在Google地图上使用json和placeid的多个标记

更新时间：2023-01-02 18:57:41

使用发布的代码我得到一个javascript错误： Uncaught ReferenceError：marker未定义

您在错误位置调用 InfoBox 函数（ marker exists）。

一旦我修复了我获得的infowindows，但是你有一个问题可以通过函数闭包来解决（所有的infowindows都有内容3，最后一个标记处理）。（有关函数闭包的示例，请参阅 Google Maps JS API v3 - 简单多标记示例）

程式码片段：
$ b

  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（la titude，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

 < script src =https://maps.googleapis.com/maps/api/js?libraries=places> < / script>< div id =map-canvasstyle =width：500px; height：400px>< / div>

the problem i've got is that I don't know where the problem is :P From the beginning. I've got 3 files, the json file JS and html. JS should get placeid from json and based on that place a marker on the map. It's all pretty simple but somehow it doesn't work, the map is being created but no markers show up. Here're the files:

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

I'd be very grateful for any suggestions how to solve this :)

With the posted code I get a javascript error: Uncaught ReferenceError: marker is not defined

You are calling the InfoBox function in the wrong place (outside the scope where marker exists).

Once I fix that I get infowindows, but you have an issue that can be solved by function closure (all the infowindows have the content "3", the last marker processed). (For an example of function closure see Google Maps JS API v3 - Simple Multiple Marker Example)

working fiddle

code snippet:

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"></script>
<div id="map-canvas" style="width:500px; height:400px"></div>

上一篇 : ：使用原型动态加载时，gmaps4rails地图未显示下一篇 : gmaps4rails 禁用滚轮

在Google地图上使用json和placeid的多个标记

相关阅读

技术问答最新文章