Question

我遇到的问题是我不知道问题出在哪里：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);

Answer 1

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

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

一旦我确定了我得到了信息，但你有一个问题可以通过功能关闭解决（所有信息都有内容＆＃34; 3＆＃34;，最后一个标记处理）。（有关函数闭包的示例，请参阅Google Maps JS API v3 - Simple Multiple Marker Example）

working fiddle

代码段

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: