谷歌地圖上使用json和placeid的多個標記

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

您在錯誤的位置（ marker所在的作用域之外）調用了InfoBox函數。

解決問題后，我便獲得了信息窗口，但是您可以通過函數關閉來解決問題（所有信息窗口的內容均為“ 3”，這是最后處理的標記）。 （有關函數關閉的示例，請參閱Google Maps JS API v3-簡單多個標記示例）

工作小提琴

代碼段：

 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>

谷歌地圖上使用json和placeid的多個標記

問題描述

1 個解決方案

解決方案1
0 已采納 2015-08-04 10:05:17

谷歌地圖上使用json和placeid的多個標記

問題描述

1 個解決方案

解決方案1 0 已采納 2015-08-04 10:05:17

解決方案1
0 已采納 2015-08-04 10:05:17