ここでは、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>