在Google 地图上实现做的标记相连接
这里仅仅是将谷歌地图API的使用方法告诉大家，算是抛砖引玉吧，由于某些原因，谷歌已经远离大家了。
<!DOCTYPEhtml>
<html>
<head>
<title>GeoLocation</title>
<metaname="viewport"content="initial-scale=1.0,user-scalable=no">
<metacharset="utf-8">
<style>
html,body,#map-canvas{
margin:0;
padding:0;
height:100%;
}
</style>
<scriptsrc="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
varmap;
varpoly;
functioninitialize(){
varmyLatlng=newgoogle.maps.LatLng(31.1937077,121.4158436);
varlocations=[
['test1,accuracy:150m',31.1937077,121.4158436,100],
['test2,accuracy:150m',31.2937077,121.4158436,100],
['test3,accuracy:150m',31.0937077,121.2158436,100],
['test4,accuracy:150m',31.3937077,120.4158436,100],
['test5,accuracy:150m',31.1637077,120.4858436,100],
['test6,accuracy:150m',31.1037077,121.5158436,100]
];
varmapOptions={
zoom:13,
center:myLatlng,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map=newgoogle.maps.Map(document.getElementById('map-canvas'),
mapOptions);
//线条设置
varpolyOptions={
strokeColor:'#00ff00', //颜色
strokeOpacity:1.0, //透明度
strokeWeight:4 //宽度
}
poly=newgoogle.maps.Polyline(polyOptions);
poly.setMap(map); //装载
/*循环标出所有坐标*/
/*for(vari=0;i<locations.length;i++){
varloc=[];
loc.push(locations[i][1]);
loc.push(locations[i][2]);
varpath=poly.getPath(); //获取线条的坐标
path.push(newgoogle.maps.LatLng(loc[0],loc[1])); //为线条添加标记坐标
//生成标记图标
marker=newgoogle.maps.Marker({
position:newgoogle.maps.LatLng(loc[0],loc[1]),
map:map
//icon:"https://maps.gstatic.com/mapfiles/markers/marker_green.png"
});
}*/
varmarker,i,circle;
variwarray=[];
varinfoWindow;
varlatlngbounds=newgoogle.maps.LatLngBounds();
variconYellow=newgoogle.maps.MarkerImage("http://maps.google.com/mapfiles/ms/icons/yellow-dot.png");
for(i=0;i<locations.length;i++){
varloc=[];
loc.push(locations[i][1]);
loc.push(locations[i][2]);
varpath=poly.getPath(); //获取线条的坐标
path.push(newgoogle.maps.LatLng(loc[0],loc[1]));
varlatlng=newgoogle.maps.LatLng(locations[i][1],locations[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=newgoogle.maps.Marker({
position:latlng,
map:map,
icon:iconYellow
});
variw='<divstyle="font-size:12px;word-wrap:break-word;word-break:break-all;"><strong><fontcolor="#FF0000">'+locations[i][0]+'<font></strong><div>';
}else{
marker=newgoogle.maps.Marker({
position:latlng,
map:map
});
variw='<divstyle="font-size:12px;word-wrap:break-word;word-break:break-all;"><strong><fontcolor="#000000">'+locations[i][0]+'<font></strong><div>';
}
iwarray[i]=iw;
google.maps.event.addListener(marker,'mouseover',(function(marker,i){
returnfunction(){
infoWindow=newgoogle.maps.InfoWindow({
content:iwarray[i],
maxWidth:200,
pixelOffset:newgoogle.maps.Size(0,0)
});
infoWindow.open(map,marker);
}
})(marker,i));
google.maps.event.addListener(marker,'mouseout',function(){
infoWindow.close();
});
circle=newgoogle.maps.Circle({
map:map,
radius:locations[i][3],
fillColor:'#0000AA',
fillOpacity:0.01,
strokeWeight:1,
strokeColor:'#0000CC',
strokeOpacity:0.8
});
circle.bindTo('center',marker,'position');
}
map.fitBounds(latlngbounds);
varlistener=google.maps.event.addListenerOnce(map,"idle",function()
{
varzoomLevel=parseInt(map.getZoom());
if(zoomLevel>13)
map.setZoom(13);
});
}
google.maps.event.addDomListener(window,'load',initialize);
</script>
</head>
<body>
<divid="map-canvas"></div>
</body>
</html>