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

Google Maps API v3 - Add marker after initialize

本文关键字：添加 加标记 初始化 API v3 谷歌地图      更新时间：2023-09-26

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

据我所知，要做到这一点，我需要地图角坐标，我只能在地图空闲时加载它，这样我就可以将这些坐标传递给我的 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>

您无需等待空闲事件。 地图边界在"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>

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

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

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

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

相关文章：