ここでは、Google Maps APIの使用方法を説明します。注目を集める方法と考えられています。何らかの理由で、Googleはすべての人から離れています。
コードコピーは次のとおりです。
<！doctype html>
<html>
<head>
<title> Geolocation </title>
<Meta name = "Viewport" content = "initial-scale = 1.0、user-scalable = no">
<メタcharset = "utf-8">
<style>
html、body、＃map-canvas {
マージン：0;
パディング：0;
高さ：100％;
}
</style>
<スクリプトsrc = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"> </script>
<スクリプト>
var Map;
var poly;
関数initialize（）{
var mylatlng = new Google.maps.latlng（31.1937077、121.4158436）;
var locations = [
['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（PolyOptions）;
poly.setmap（Map）; // 負荷
/*すべての座標をマークするためのループ*/
/*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]））; //ラインにマーク座標を追加します
//タグアイコンを生成します
Marker = new Google.maps.marker（{
位置：新しいGoogle.maps.latlng（loc [0]、loc [1]）、
マップ：マップ
//アイコン： "https://maps.gstatic.com/mapfiles/markers/marker_green.png"
}）;
}*/
varマーカー、i、circle;
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（locations [i] [0] .indexof（ "[cached"）== 0 ||（locations [i] [0] .indexof（ "[multiple"）== 0 && locations [i] [0] .indexof（ "[cached"）> = 0）{
Marker = new Google.maps.marker（{
位置：latlng、
マップ：マップ、
アイコン：Iconyhellow
}）;
var iw = '<div style = "font-size：12px; word-rap：break-word; word-break：break-all;"> <strong> <font color = "＃ff0000">' + locations [i] [0] + '<font> </strong> <div>';
} それ以外 {
Marker = new Google.maps.marker（{
位置：latlng、
マップ：マップ
}）;
var iw = '<div style = "font-size：12px; word-rap：break-word; word-break：break-all;"> <strong> <font color = "＃000000">' + locations [i] [0] + '<font> </strong> <div>';
}
iwarray [i] = iw;
google.maps.event.addlistener（Marker、 'Mouseover'、（function（marker、i）{
return function（）{
infowindow = new google.maps.infowindow（{
コンテンツ：iwarray [i]、
MaxWidth：200、
PixelOffset：新しいGoogle.maps.size（0、0）
}）;
infowindow.open（Map、Marker）;
}
}）（マーカー、i））;
google.maps.event.addlistener（マーカー、 'mouseout'、function（）{
infowindow.close（）;
}）;
circle = new Google.maps.circle（{
マップ：マップ、
半径：場所[i] [3]、
fillcolor： '＃0000aa'、
fillopacity：0.01、
ストローク級：1
strokecolor： '＃0000cc'、
ストロケパシティ：0.8
}）;
circle.bindto（ 'center'、marker、 'position'）;
}
map.fitbounds（latlngbounds）;
varリスナー= google.maps.event.addlisteneronce（map、 "idle"、function（）
{
var zoomlevel = parseint（map.getzoom（））;
if（Zoomlevel> 13）
map.setzoom（13）;
}）;
}
google.maps.event.adddomilistener（window、 'load'、initialize）;
</script>
</head>
<body>
<div id = "map-canvas"> </div>
</body>
</html>