小编Thi*_*ijs的帖子

Google Maps V3:仅在视口中显示标记 - 清除标记问题

我喜欢使用谷歌地图创建一个可以处理大量标记(超过10,000)的地图.为了不减慢地图速度,我创建了一个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);
    }); 
}
Run Code Online (Sandbox Code Playgroud)

当事件'tilesloaded'完成后,我使用loadMapFromCurrentBounds(),这个函数将获取当前边界并向XML文件发送请求以显示当前视口内的标记:

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 …
Run Code Online (Sandbox Code Playgroud)

javascript google-maps google-maps-api-3 google-maps-markers

29
推荐指数
4
解决办法
3万
查看次数