谷歌地图Ajax多个标记Json

Google Maps Ajax multiple markers Json

本文关键字:Json Ajax 谷歌地图      更新时间:2023-09-26

我有一个如下:https://jsfiddle.net/inkedraskal/h35dz9qd/5/

我得到一个错误:不能分配给只读属性'__e3_'的0

我之前有一个for循环,它在for循环之后调用函数,但是jshint不接受它。现在我在使用Ajax,但我卡住了。我可以返回控制台中的对象以及第一个信息框的内容(参见console),然后我得到一个错误。

js如下所示:(任何提示,技巧等将受到赞赏)

(function () {
    renderGoogleMap();

    function renderGoogleMap() {
        var start_point = new google.maps.LatLng(0, 0);
        // Creating a new map
        var map = new google.maps.Map(document.getElementById("locations-map"), {
            center: start_point,
            zoom: 6,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        // Creating a global infoWindow object that will be reused by all markers
        var infoWindow = new google.maps.InfoWindow();
        function setMarkerPoints(map,marker) {
            var bounds = new google.maps.LatLngBounds();
            // Looping through the JSON data
                // Creating a closure to retain the correct data, notice how I pass the current data in the loop into the closure (marker, data)

                $.ajax({
                   type: "GET",
                    url: 'https://raw.githubusercontent.com/roryheaney/jsonexample/master/locatoins.json',
                    dataType: "json",
                    success: function (data) {
                        console.log(data);
                        if (data.length !== 0) {
                         var   latLng = new google.maps.LatLng(data.lat, data.lng);
                        // Creating a marker and putting it on the map
                        var marker = new google.maps.Marker({
                            position: latLng,
                            map: map,
                            title: data.title
                        });

                            $.each(data, function (marker, data) {
                                var windowContent = '<h3>' + data.title + '</h3>' +
                                    '<p>' + data.description + '</p>';
                                console.log(windowContent);
                                // Attaching a click event to the current marker
                                infobox = new InfoBox({
                                    content: infoWindow.setContent(windowContent),
                                    alignBottom: true,
                                    pixelOffset: new google.maps.Size(-160, -45)
                                });
                                google.maps.event.addListener(marker, 'click', function () {
                                    // Open this map's infobox
                                    infobox.open(map, marker);
                                    infobox.setContent(windowContent);
                                    map.panTo(marker.getPosition());
                                    infobox.show();
                                });
                                google.maps.event.addListener(map, 'click', function () {
                                    infobox.setMap(null);
                                });
                            });
                        } 

                    },
                    error: function (data) {
                        // alert('Please refresh the page and try again');
                        console.log('Please refresh the page and try again');
                    }
                });
                //END MARKER DATA

                // bounds.extend(marker.getPosition());
            // end loop through json
            map.setCenter(start_point);
            map.fitBounds(bounds);
        }
        setMarkerPoints(map);
    }
})();

变更列表:

1。Google Maps API包含它自己的事件,在页面加载后触发,所以我替换了以下行:

(function () {
    renderGoogleMap();
    //...

})();

function renderGoogleMap() {
    //...
  }
google.maps.event.addDomListener(window, 'load', renderGoogleMap);  

2。添加了初始化标记lat/lng边界。

3。还有一些小的修复。

工作示例

代码片段:

function renderGoogleMap() {
  var start_point = new google.maps.LatLng(0, 0);
  // Creating a new map
  var map = new google.maps.Map(document.getElementById("locations-map"), {
    center: start_point,
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  // Creating a global infoWindow object that will be reused by all markers
  var infoWindow = new google.maps.InfoWindow();
  function setMarkerPoints(map, marker) {
    var bounds = new google.maps.LatLngBounds();
    $.ajax({
      type: "GET",
      url: 'https://raw.githubusercontent.com/roryheaney/jsonexample/master/locatoins.json',
      dataType: "json",
      success: function(data) {
        if (data.length !== 0) {
          $.each(data, function(marker, data) {
            var latLng = new google.maps.LatLng(data.lat, data.lng);
            bounds.extend(latLng);
            // Creating a marker and putting it on the map
            var marker = new google.maps.Marker({
              position: latLng,
              map: map,
              title: data.title
            });
            var windowContent = '<h3>' + data.title + '</h3>' +
              '<p>' + data.description + '</p>';
            // Attaching a click event to the current marker
            infobox = new InfoBox({
              content: infoWindow.setContent(windowContent),
              alignBottom: true,
              pixelOffset: new google.maps.Size(-160, -45)
            });
            google.maps.event.addListener(marker, 'click', function() {
              // Open this map's infobox
              infobox.open(map, marker);
              infobox.setContent(windowContent);
              map.panTo(marker.getPosition());
              infobox.show();
            });
            google.maps.event.addListener(map, 'click', function() {
              infobox.setMap(null);
            });
          });
          map.fitBounds(bounds);
        }
      },
      error: function(data) {
        console.log('Please refresh the page and try again');
      }
    });
    //END MARKER DATA
    // end loop through json
  }
  setMarkerPoints(map);
}
google.maps.event.addDomListener(window, 'load', renderGoogleMap);
// renderGoogleMap();
#locations-map {
  display: block;
  height: 500px;
}
.infoBox {
  max-width: 300px;
  background: #fff;
  padding: 10px;
  border: 1px solid red;
}
.infoBox img {
  border: 1px solid yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<div id="locations-map"></div>