谷歌地图上使用 json 和 placeid 的多个标记答案

【问题标题】：Multiple markers on google maps using json and placeid谷歌地图上使用 json 和 placeid 的多个标记
【发布时间】：2015-10-26 14:30:26
【问题描述】：

我遇到的问题是我不知道问题出在哪里：P 从一开始就。我有 3 个文件，json 文件 JS 和 html。 JS 应该从 json 获取 placeid 并基于该位置在地图上放置一个标记。这一切都很简单，但不知何故它不起作用，正在创建地图但没有显示标记。这是文件：

JSON：

       [{   "placeid":   'ChIJu6HrLMVWIkcRWHTA90kiueI'              ,           "content":  "   1   "   }   ,
        {   "placeid":    'ChIJnXBuJ34zGUcRvt9FTKrPeeM'             ,           "content":  "   2   "   }   ,
        {   "placeid":    'ChIJiwUNhqX7PEcRdJjYqzrWYjs'             ,           "content":  "   3   "   }   ]

HTML：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script src="functions_edit.js"></script>


</head>

<body>
<div id="map-canvas" style="width:500px; height:400px"></div>
</body>
</html>

JS：

var openedInfoWindow = null;

function initialize() {
        var latitude = 51.9315631,
            longitude = 19.473451,
            radius = 8000, 
            center = new google.maps.LatLng(latitude,longitude),
            mapOptions = {
                center: center,
                zoom: 5,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scrollwheel: false
            };

        var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

        setMarkers(center, radius, map);
    }

    function setMarkers(center, radius, map) {
        var json = (function () { 
            var json = null; 
            $.ajax({ 
                'async': false, 
                'global': false, 
                'url': "placeid.json", 
                'dataType': "json", 
                'success': function (data) {
                     json = data; 
                 }
            });
            return json;
        })();


        for (var i = 0, length = json.length; i < length; i++) {
            var data = json[i];

                                var service = new google.maps.places.PlacesService(map);
                service.getDetails({
                    placeId: data.placeid
                }, function (result, status) {
                    if (status != google.maps.places.PlacesServiceStatus.OK) {
            alert(status);
            return;
        }
                    var marker = new google.maps.Marker({
                        map: map,
                        place: {
                            placeId: data.placeid,
                            location: result.geometry.location
                        }
                        //position: result.geometry.location
                    });
                });

                infoBox(map, marker, data);
            }
        }

    function infoBox(map, marker, data) {
        var infoWindow = new google.maps.InfoWindow();

        google.maps.event.addListener(marker, "click", function(e) {

            infoWindow.setContent(data.content);
            infoWindow.open(map, marker);
        });

        (function(marker, data) {

          google.maps.event.addListener(marker, "click", function(e) {

            infoWindow.setContent(data.content);
            infoWindow.open(map, marker);
          });
        })(marker, data);
    }

   google.maps.event.addDomListener(window, 'load', initialize);

【问题讨论】：

标签： javascript json google-maps google-maps-api-3

【解决方案1】：

使用发布的代码，我收到一个 javascript 错误：Uncaught ReferenceError: marker is not defined

您在错误的地方调用了InfoBox 函数（在marker 存在的范围之外）。

一旦我修复了这个问题，我就会得到 infowindows，但是你有一个可以通过函数关闭来解决的问题（所有 infowindows 的内容都是“3”，最后一个标记被处理）。（函数闭包的例子见Google Maps JS API v3 - Simple Multiple Marker Example）

working fiddle

代码 sn-p：

var placeid_json = [{
    "placeid": 'ChIJu6HrLMVWIkcRWHTA90kiueI',
    "content": "   1   "
}, {
    "placeid": 'ChIJnXBuJ34zGUcRvt9FTKrPeeM',
    "content": "   2   "
}, {
    "placeid": 'ChIJiwUNhqX7PEcRdJjYqzrWYjs',
    "content": "   3   "
}];


var openedInfoWindow = null;

function initialize() {
    var latitude = 51.9315631,
        longitude = 19.473451,
        radius = 8000,
        center = new google.maps.LatLng(latitude, longitude),
        mapOptions = {
            center: center,
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: false
        };

    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    setMarkers(center, radius, map);
}

function setMarkers(center, radius, map) {
    /* var json = (function () { 
            var json = null; 
            $.ajax({ 
                'async': false, 
                'global': false, 
                'url': "placeid.json", 
                'dataType': "json", 
                'success': function (data) {
                     json = data; 
                 }
            });
            return json;
        })(); */

    var json = placeid_json;
    for (var i = 0, length = json.length; i < length; i++) {
        var data = json[i];
        createMarker(data, map);
    }
}
function createMarker(data, map) {
            var service = new google.maps.places.PlacesService(map);
        service.getDetails({
            placeId: data.placeid
        }, function (result, status) {
            if (status != google.maps.places.PlacesServiceStatus.OK) {
                alert(status);
                return;
            }
            var marker = new google.maps.Marker({
                map: map,
                place: {
                    placeId: data.placeid,
                    location: result.geometry.location
                }
                //position: result.geometry.location
            });
            infoBox(map, marker, data, result);
        });

}
function infoBox(map, marker, data, result) {
    var infoWindow = new google.maps.InfoWindow();

    google.maps.event.addListener(marker, "click", function (e) {

        infoWindow.setContent(data.content);
        infoWindow.open(map, marker);
    });

    (function (marker, data) {

        google.maps.event.addListener(marker, "click", function (e) {

            infoWindow.setContent(data.content+"<br>"+result.name);
            infoWindow.open(map, marker);
        });
    })(marker, data);
}

google.maps.event.addDomListener(window, 'load', initialize);

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas" style="width:500px; height:400px"></div>

【讨论】：