Google地图V3：仅在视口中显示标记 - 清除标记问题 [英] Google Maps V3: Only show markers in viewport - Clear markers issue

问题描述

我喜欢使用可处理大量标记（超过10.000）的Google地图创建地图。为了不减慢映射，我创建了一个只输出当前视口内标记的XML文件。

首先，我使用initialize（）进行设置地图选项：

function initialize（）{
var myLatlng = new google。 maps.LatLng（51.25503952021694,3.27392578125）;
var myOptions = {
zoom：8，
center：myLatlng，
mapTypeId：google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map（document.getElementById（map_canvas），myOptions）;

google.maps.event.addListener（map，'tilesloaded'，function（）{
loadMapFromCurrentBounds（map）;
}）;
}


当事件'tilesloaded'完成时，我使用loadMapFromCurrentBounds（）函数将获取当前边界并向XML文件发送请求以显示当前视口内的标记： > 函数loadMapFromCurrentBounds（map）{

//首先，确定地图边界
var bounds = map.getBounds（）;

//然后点
var swPoint = bounds.getSouthWest（）;
var nePoint = bounds.getNorthEast（）;

//现在，每个坐标
var swLat = swPoint.lat（）;
var swLng = swPoint.lng（）;
var neLat = nePoint.lat（）;
var neLng = nePoint.lng（）;

downloadUrl（mapsxml.php？swLat =+ swLat +& swLng =+ swLng +& neLat =+ neLat +& neLng =+ neLng +，函数）{
var xml = parseXml（data）;
var markers = xml.documentElement.getElementsByTagName（marker）;
var infoWindow = new google.maps.InfoWindow;

for（var i = 0; i< markers.length; i ++）{
var address = markers [i] .getAttribute（address）;
var type = markers [i ] .getAttribute（type）;
var name = markers [i] .getAttribute（name）;

var point = new google.maps.LatLng（
parseFloat（markers [i] .getAttribute（lat）），
parseFloat（markers [i] .getAttribute（lng））
）;

var html = < b>+ name +< / b>< br />+ address;
var icon = customIcons [type] || {};

var marker = new google.maps.Marker（{
map：map，
位置：点，
图标：icon.icon，
shadow：icon.shadow}）;

bindInfoWindow（marker，map，infoWindow，html）;

}）
}


但是，当前的代码不会卸载不在视口中的标记。除此之外，它再次加载已经加载的标记，这会在将地图移动到同一区域的视图时真正快速地减慢地图。

所以，当视口更改，我想在加载新标记之前首先清除整个地图。

解决方案

您需要将另一个事件监听器添加到地图中：

  google.maps.event.addListener（map，'bounds_changed'，removeMarkers）; 
  

请参阅这里了解更多有关从谷歌地图中删除所有标记的信息 - 不幸的是，我不认为这可以通过一次调用完成。因此，您必须编写removeMarkers或类似的东西，它们必须遍历地图上的所有标记，像这样逐个删除它们：

  markersArray [i] .setMap（null）; 
  

我不知道在使用删除前是否更快检查标记是否在视口中：

map.getBounds（）;


了解更多关于Google Map API v3事件的信息

I like to create a map with Google Maps that can handle large amounts of markers (over 10.000). To not slow down the map I've created a XML-file that only outputs the markers that are inside the current viewport.

First, I use initialize() to setup the map options:

function initialize() {
    var myLatlng = new google.maps.LatLng(51.25503952021694,3.27392578125);
    var myOptions = {
        zoom: 8,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    google.maps.event.addListener(map, 'tilesloaded', function () {
    loadMapFromCurrentBounds(map);
    }); 
}

When the event 'tilesloaded' is finished, I use loadMapFromCurrentBounds(), this functions will get the current bounds and sends a request to the XML-file to show the markers that are inside the current viewport:

function loadMapFromCurrentBounds(map) {

    // First, determine the map bounds
    var bounds = map.getBounds();

    // Then the points
    var swPoint = bounds.getSouthWest();
    var nePoint = bounds.getNorthEast();

    // Now, each individual coordinate
    var swLat = swPoint.lat();
    var swLng = swPoint.lng();
    var neLat = nePoint.lat();
    var neLng = nePoint.lng();

    downloadUrl("mapsxml.php?swLat="+swLat+"&swLng="+swLng+"&neLat="+neLat+"&neLng="+neLng+"", function(data) {
        var xml = parseXml(data);
        var markers = xml.documentElement.getElementsByTagName("marker");
        var infoWindow = new google.maps.InfoWindow; 

        for (var i = 0; i < markers.length; i++) {
            var address = markers[i].getAttribute("address");
            var type = markers[i].getAttribute("type");
            var name = markers[i].getAttribute("name");

            var point = new google.maps.LatLng( 
            parseFloat(markers[i].getAttribute("lat")),
            parseFloat(markers[i].getAttribute("lng"))
            );

            var html = "<b>" + name + "</b> <br/>" + address;
            var icon = customIcons[type] || {};

            var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow});

            bindInfoWindow(marker, map, infoWindow, html);
        }
    })
}

This is working great, however, the current code doesn't offload markers that aren't in de viewport anymore. Besides that, it loads markers again who are already loaded, that slows down the map really fast when moving the map a view times in the same area.

So when the viewport changes, I like to clear the whole map first before loading new markers. What is the best way to do this?

解决方案

You need to add another Event Listener to the map:

google.maps.event.addListener(map,'bounds_changed', removeMarkers);

See here for more on removing all markers from a google map - unfortunately I dont think it can be done with one call. So you will have to write the removeMarkers or something similar which will have to iterate through all the markers on the map removing them individually like so:

 markersArray[i].setMap(null);

I don't know whether it's quicker to check if the marker is in the viewport before removing by using:

 map.getBounds();

Read more about Google Map API v3 events

这篇关于Google地图V3：仅在视口中显示标记 - 清除标记问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！