從JSON渲染多個Google Maps API V3標記

Question

嘗試使用來自DB的PHP從JSON輸出的Google Maps API V3繪制多個標記。

地圖在頁面上初始化，但不會填充標記。 瀏覽器警告“資源解釋為其他，但轉移MIME類型未定義。”？

請進一步排除故障/調試的建議。

        <!--  load points from database into Locations JSON -->
    $(document).ready(function () {
        $.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); 
                    }
                }
            });

        function addMarker(location) {
            var point = new google.maps.LatLng(location.lat, location.lng); 
            var marker = new google.maps.Marker({
                position:point,
                map: map,
                title: location.name
                }); 
            };


    });

來自map-service.php？action = listpoints的驗證樣本JSON輸出

{"Locations":[{"name":"Abco Mountain","lat":"49.424999","lng":"-125.855003"},{"name":"Adder Peak","lat":"49.248333","lng":"-125.320000"},{"name":"Alexandra Peak","lat":"49.738110","lng":"-125.489998"},{"name":"Argus Mountain","lat":"49.538612","lng":"-125.389999"},{"name":"Big Baldy Mountain","lat":"49.759998","lng":"-126.129997"}]}

Answer 1

我的問題源於我如何初始化原始地圖對象。 它在我分享的代碼中不可見......道歉。

我這樣做了：

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

並且應該這樣做：

this.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

我發現這個帖子中的解決方案在地圖創建后添加標記謝謝@yitwail！

Answer 2

嘗試使用jquery $ .each進行循環。

if（json && json.Locations）{

$ .each（json.Locations，function（）{addMarker（this）;}）;

}）;

此外，您可能希望在addMarker函數內的lat和longiture上調用parseFloat。