javascript - 从 JSON 渲染多个 Google Maps API V3 标记

Question

尝试使用 Google Maps API V3 从 DB 的 PHP 输出的 JSON 中绘制多个标记。

map 在页面上初始化，但它不填充标记。浏览器警告“Resource interpreted as Other but transferred with MIME type undefined.”？

请提供进一步故障排除/调试的建议。

        <!--  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

我的问题源于我如何初始化原始 map 对象。它在我共享的代码中不可见……抱歉。

我这样做了:

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!