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>

- WhoopitySchmoopity

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

- geocodezip

---

工作得非常完美，谢谢！我不知道bounds_changed会在第一次加载时发生。 - WhoopitySchmoopity

Answer 2

为什么不在初始化函数中添加另一个监听器事件：

google.maps.event.addListener(map, 'dragend', function(){
  var latlng = new google.maps.LatLng(35, -90);
  var marker = new google.maps.Marker({
    position: latlng
  });
  marker.setMap(map)
});

- Barhum

Answer 3

Google 地图标记添加非常简单。我为您创建了一个示例。在此页面中，有一些基本的 Google 地图标记示例。

http://www.w3docs.com/learn-javascript/google-maps-markers.html

- Hazarapet Tunanyan