여기서는 Google Maps API를 사용하는 방법을 알려줍니다. 관심을 끌 수있는 방법으로 간주됩니다. 몇 가지 이유로 Google은 모든 사람과 떨어져있었습니다.
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<title> geolocation </title>
<meta name = "viewport"content = "Initial-Scale = 1.0, user-scalable = no">
<meta charset = "utf-8">
<스타일>
html, body, #map-canvas {
여백 : 0;
패딩 : 0;
높이 : 100%;
}
</스타일>
<script src = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"> </script>
<cript>
var지도;
var poly;
function initialize () {
var mylatlng = new Google.maps.latlng (31.1937077, 121.4158436);
var 위치 = [
[ 'test1, 정확도 : 150m', 31.1937077, 121.4158436, 100],
[ 'test2, 정확도 : 150m', 31.2937077, 121.4158436, 100],
[ 'test3, 정확도 : 150m', 31.0937077, 121.2158436, 100],
[ 'test4, 정확도 : 150m', 31.3937077, 120.4158436, 100],
[ 'Test5, 정확도 : 150m', 31.1637077, 120.4858436, 100],
[ 'Test6, 정확도 : 150m', 31.1037077, 121.5158436, 100]
];
var mapoptions = {
줌 : 13,
센터 : mylatlng,
MapTypeid : google.maps.maptypeid.roadmap
};
map = new Google.maps.map (Document.GetElementById ( 'Map-Canvas'),
Mapoptions);
// 줄 설정
var polyoptions = {
Strokecolor : '#00ff00', // 색상
뇌졸중 : 1.0, // 투명성
뇌졸중 : 4 // 너비
}
poly = new google.maps.polyline (폴리 옵션);
poly.setmap (맵); // 짐
/* 모든 좌표를 표시하려면 루프*/
/*for (var i = 0; i <locations.length; i ++) {
var loc = [];
loc.push (위치 [i] [1]);
loc.push (위치 [i] [2]);
var path = poly.getPath (); // 라인의 좌표를 얻습니다
path.push (new Google.maps.latlng (loc [0], loc [1]); // 라인에 Mark 좌표를 추가합니다
// 태그 아이콘을 생성합니다
마커 = 새로운 Google.maps.marker ({
위치 : New Google.maps.latlng (loc [0], loc [1]),
지도 :지도
// 아이콘 : "https://maps.gstatic.com/mapfiles/markers/marker_green.png"
});
}*/
var 마커, i, 원;
var iwarray = [];
var infowindow;
var latlngbounds = new Google.maps.latlngbounds ();
var iconyellow = new Google.maps.markerimage ( "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png");
for (i = 0; i <locations.length; i ++) {
var loc = [];
loc.push (위치 [i] [1]);
loc.push (위치 [i] [2]);
var path = poly.getPath (); // 라인의 좌표를 얻습니다
path.push (new Google.maps.latlng (loc [0], loc [1]);
var latlng = new Google.maps.latlng (위치 [i] [1], 위치 [i] [2]);
latlngbounds.extend (latlng);
if (위치 [i] [0] .indexof ( "[캐시드") == 0 || (위치 [i] [0] .indexof ( "[multiple")) == 0 && 위치 [i] [0] .indexof ( "[캐시드")) {
마커 = 새로운 Google.maps.marker ({
위치 : latlng,
지도 :지도,
아이콘 : 아이콘
});
var iw = '<div style = "font-syle : 12px; Word-wrap : break-word; Word-Break : break-all;"> <strong> <font color = "#ff0000">' + 위치 [i] [0] + '<font> </strong> <div>';
} 또 다른 {
마커 = 새로운 Google.maps.marker ({
위치 : latlng,
지도 :지도
});
var iw = '<div style = "font-syle : 12px; Word-wrap : break-word; Word-break : break-all;"> <strong> <font color = "#000000">' + 위치 [i] [0] + '<font> </strong> <div>';
}
iWarray [i] = iw;
google.maps.event.addlistener (마커, '마우스 오버', (함수 (Marker, i) {
return function () {
InfowIndow = 새로운 Google.maps.infowIndow ({
내용 : iwarray [i],
Maxwidth : 200,
Pixeloffset : New Google.maps.size (0, 0)
});
Infowindow.open (지도, 마커);
}
}) (마커, i));
google.maps.event.addlistener (마커, '마우스 아웃', function () {
infowindow.close ();
});
Circle = New Google.maps.circle ({
지도 :지도,
반경 : 위치 [i] [3],
FillColor : '#0000aa',
FillOpacity : 0.01,
뇌졸중 : 1,
스트로크 콜러 : '#0000cc',
뇌졸중 : 0.8
});
Circle.bindto ( 'Center', 마커, '위치');
}
map.fitbounds (latlngbounds);
var Learger = Google.maps.event.addlisteneronce (Map, "Idle", function ()
{
var Zoomlevel = parseint (map.getzoom ());
if (Zoomlevel> 13)
Map.setzoom (13);
});
}
google.maps.event.adddomListener (창, '로드', 초기화);
</스크립트>
</head>
<body>
<div id = "map-canvas"> </div>
</body>
</html>