下面的代码在Google地图上显示地图标记,但每个地方lat和long都硬编码到JS文件中。取而代之的是从网址中提取数据的最佳方式是什么?请注意,下面的脚本还允许用户点击html内的文本链接,并在地图上突出显示一个点。使用来自URL的JSON数据来显示Google地图标记 - 如何?
var stationList=[
\t {"latlng":[37.7029,-121.9335],name:"Dublin, CA"},
\t {"latlng":[37.6958,-121.9255],name:"Pleasanton CA"},
\t {"latlng":[37.6931,-121.9262],name:"Pleasanton CA"}
]
;var infoWnd,mapCanvas;
function initialize(){
\t var mapDiv=document.getElementById("map_canvas");
\t mapCanvas=new google.maps.Map(mapDiv);
\t mapCanvas.setMapTypeId(google.maps.MapTypeId.ROADMAP);
\t
\t infoWnd=new google.maps.InfoWindow();
\t
\t var bounds=new google.maps.LatLngBounds();
\t
\t var station,i,latlng;
\t for(i in stationList){station=stationList[i];
\t \t latlng=new google.maps.LatLng(station.latlng[0],station.latlng[1]);
\t \t bounds.extend(latlng);
\t \t var marker=createMarker(mapCanvas,latlng,station.name);
\t \t createMarkerButton(marker);
\t }
\t mapCanvas.fitBounds(bounds)
\t ;}
function createMarker(map,latlng,title){
\t var marker=new google.maps.Marker({position:latlng,map:map,title:title});
\t
\t google.maps.event.addListener(marker,"click",function(){infoWnd.setContent("<strong>"+title+"</title>");
\t infoWnd.open(map,marker);});
\t
\t return marker;
}
function createMarkerButton(marker){
\t var ul=document.getElementById("marker_list");
\t var li=document.createElement("li");
\t var title=marker.getTitle();li.innerHTML=title;ul.appendChild(li);
\t google.maps.event.addDomListener(li,"click",function(){google.maps.event.trigger(marker,"click");});
}
google.maps.event.addDomListener(window,"load",initialize);
#map_canvas {
width: 70%;
padding-bottom: 40%;
float: left;
}
ul#marker_list {
float: left;
width: 20%;
background: #f9f9f9;
border: 1px solid #888;
margin: 0 0 0 5px;
padding: 0;
}
ul#marker_list li {
padding: 5px;
list-style-type: none;
color: #444;
border-bottom: 1px solid #888;
}
<script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<div id="map_canvas"></div>
<ul id="marker_list"></ul>
\t
谢谢,任何想法如何完成这样使用Javascript吗? – chaser7016 2015-03-19 01:51:07