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

Question

我的最终目标：仅在当前地图视口中加载地图标记，如果移动了地图，则在新视口中重新加载地图标记。

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

<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

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

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)
});

Answer 2

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

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

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>

Answer 3

Google 添加地图标记非常简单 thing.I已经创建了一个示例，对于 you.In 此页面有一些 google 地图标记的基本示例

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

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

Google Maps API v3 - Add marker after initialize

javascript

google-maps-api-3

google-maps-markers