从 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); 

我在Adding markers after map created@yitwail 这个帖子中找到了解决方案！

Answer 2

尝试使用 jquery $.each 进行循环。

if (json && json.Locations) {

$.each(json.Locations, function() { 添加标记（此）； });

});

此外，您可能希望在 addMarker 函数内的 lat 和 longiture 上调用 parseFloat。