4
我正在從數據庫中讀取點數爲JSON，以在頁面上創建地圖標記和非結構化列表。在添加一些代碼來自定義列表元素之後，地圖停止在第一次請求時顯示標記圖標 - 直到發佈頁面重新加載。這是由於從API中超時了嗎？列表對象可以在加載地圖後從數組中構建出來，還是有其他方法可以加快代碼的運行速度，從而消除問題？地圖加載標記罰款兩倍這個數量的標記（300+），所以我知道問題是作爲格式添加到列表對象的結果。不需要羣集。此頁面的演示版本可在此處獲得Google Maps API V3要求頁面重新加載以顯示標記圖標
簽署了JS n00b。謝謝。 ...... JSON POWERED GoogleMap的
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
var map;
var infoWindow = new google.maps.InfoWindow();
function initialize() {
var myLatlng = new google.maps.LatLng(49.57154029531499,-125.74951171875);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.TERRAIN,
streetViewControl: false
}
this.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
} /* end initialize function */
<!-- load points from database into Locations JSON -->
$(document).ready(function() {
initialize();
$.getJSON("map-service.php?action=listpoints", function(json) {
if (json.Locations.length > 0) {
for (i=0; i<json.Locations.length; i++) {
var location = json.Locations[i];
addMarker(location);
}
}
});
//define grn icon as closed
var greenicon = 'http://maps.google.com/mapfiles/ms/icons/green-dot.png';
function addMarker(location) {
if(location.datesummit == "0000-00-00") {
var markerOptions = {map: map, title: location.name, position: new google.maps.LatLng(location.lat, location.lng),icon: greenicon};
//create marker info window content
var html='<B>'+location.name+'</B><BR> Register a summit <A href="http://goo.gl/Nl0UQ">here</A> ';
//create list element text and onclick
$("<li class=\"notclimbed\">")
.html(location.name+"</li>")
.click(function(){
infoWindow.close();
infoWindow.setContent(html);
infoWindow.open(map, marker)
})
.appendTo("#list");
}
else{
var markerOptions = {map: map, title: location.name, position: new google.maps.LatLng(location.lat, location.lng)};
//create marker info window content
var html='<B>'+location.name+'</B><BR> Summitted: '+location.datesummit+'<BR> By:'+location.summitlog;
//create list element text and onclick
$("<li class=\"climbed\">")
.html(location.name+"</li>")
.click(function(){
infoWindow.close();
infoWindow.setContent(html);
infoWindow.open(map, marker)
})
.appendTo("#list");
}
var marker = new google.maps.Marker(markerOptions);
// add a listener to open an info window when a user clicks on one of the markers
google.maps.event.addListener(marker, 'click', function() {
infoWindow.close();
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}; // end of addmarker function
});
</script>
</head>
<body>
<div id="banner" {vertical-align:text-top;} >
<img src="test.jpg" alt="Logo" style="width:150px;height:150px;vertical-align:middle">
<img src="test.png" alt="Logo" style="vertical-align:middle">
</div>
<div id="map_canvas" >
Map Here!
</div>
<div id="mindthegap"></div>
<div id="list" > </div>
</body>
這是一個很遠的嘗試，但可以在map-service.php頁面上嘗試添加「Content-Type：application/json」的標題。 – Corbin 2012-01-31 05:56:09
@corbin感謝這個提示 - 我明白這應該是在響應 - 但是，正如你所建議的......它沒有改變結果。 – user468648 2012-01-31 06:53:11
你看過我的回答嗎？這絕對是問題（或者可能是'一個'問題 - 不知道它是否是唯一的問題）。 – Corbin 2012-01-31 06:53:49