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

Question

我的最终目标:仅在当前 map 视口(viewport)中加载 map 标记，如果移动了 map ，则在新视口(viewport)中重新加载 map 标记。

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

<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

您无需等待空闲事件。 map 边界在“bounds_changed”事件第一次触发时可用。

等待bounds_changed事件；每当边界发生变化(包括第一次)时，请更新 map 上的标记。

working fiddle

代码片段:

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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="mapBounds"></div>
<div id="googleMap" style="border: 2px solid #3872ac;"></div>