Google Maps API v3 - 初始化后添加标记

Question

我的最终目标:仅在当前地图视口中加载地图标记,如果移动地图,则在新视口中重新加载地图标记.

据我所知,要做到这一点,我需要地图角坐标,我只能在地图空闲时加载,这样我就可以将这些坐标传递给我的PHP文件来查询我的数据库并输出XML用于地图标记内角落(我试图通过将查询限制在相关的地图区域来减轻我的数据库的压力).我在初始化后添加虚拟标记时遇到问题(参见下面的代码).它只是没有加载标记,其他一切正常.

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

<script>

function initialize() {
    var map = new google.maps.Map(document.getElementById("googleMap"), {
     zoom: 12,
     center: new google.maps.LatLng(40.779502, -73.967857)
    });

    google.maps.event.addListener(map, 'idle', function() {
         /*bounds =  map.getBounds();
         ne = bounds.getNorthEast();
         sw = bounds.getSouthWest();
         window.top.showBounds();*/
         TestMarker();

    });
}

function addMarker(location) {
    marker = new google.maps.Marker({
        position: location,
        map: map
    });
}

// Testing the addMarker function
function TestMarker() {
       CentralPark = new google.maps.LatLng(40.779502, -73.967857);
       addMarker(CentralPark);
}

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

</script>

Answer 1

您无需等待空闲事件.第一次'bounds_changed'事件触发时,地图边界可用.

等待bounds_changed事件; 每当边界发生变化(包括第一次),然后在地图上更新标记.

工作小提琴

代码段:

var map;
var bounds;

function initialize() {
  map = new google.maps.Map(document.getElementById("googleMap"), {
    zoom: 12,
    center: new google.maps.LatLng(40.779502, -73.967857)
  });

  google.maps.event.addListener(map, 'bounds_changed', function() {
    bounds = map.getBounds();
    ne = bounds.getNorthEast();
    sw = bounds.getSouthWest();
    document.getElementById('mapBounds').innerHTML = bounds.toUrlValue(6);
    TestMarker();

  });
}

function addMarker(location) {
  marker = new google.maps.Marker({
    position: location,
    map: map
  });
}

// Testing the addMarker function
function TestMarker() {
  CentralPark = new google.maps.LatLng(40.779502, -73.967857);
  addMarker(CentralPark);
}

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

html,
body,
#googleMap {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="mapBounds"></div>
<div id="googleMap" style="border: 2px solid #3872ac;"></div>