javascript - 如何获取边界并更改边界以删除或添加标记 Google map 列表

Question

我陷入了这样一种情况，我需要获取边界和更改边界，以便我可以在 Google map 下方的添加列表中添加和删除标记信息

与缩放更改相同，我需要添加，因为我使用标记管理器

我需要一些关于如何实现这种类型的帮助，因为我是 Google map 新手

这是我的代码

<script type="text/javascript">
    var geocoder;
    var map;
    var placesList;

    function initialize() {
        var minZoomLevel = 4;
        var zooms = 7;
        geocoder = new google.maps.Geocoder();

        map = new google.maps.Map(document.getElementById('map'), {
            zoom: minZoomLevel,
            center: new google.maps.LatLng(38.50, -90.50),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        // Bounds for North America
        var strictBounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(15.70, -160.50),
     new google.maps.LatLng(68.85, -55.90)
   );

        // Listen for the dragend event


  google.maps.event.addListener(map, 'dragend', function () {
            if (strictBounds.contains(map.getCenter())) return;

            // We're out of bounds - Move the map back within the bounds

            var c = map.getCenter(),
         x = c.lng(),
         y = c.lat(),
         maxX = strictBounds.getNorthEast().lng(),
         maxY = strictBounds.getNorthEast().lat(),
         minX = strictBounds.getSouthWest().lng(),
         minY = strictBounds.getSouthWest().lat();

            if (x < minX) x = minX;
            if (x > maxX) x = maxX;
            if (y < minY) y = minY;
            if (y > maxY) y = maxY;

            map.setCenter(new google.maps.LatLng(y, x));
        });


        // Limit the zoom level
        google.maps.event.addListener(map, 'zoom_changed', function () {
            if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
        });

         placesList = document.getElementById('places');
    }
    var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
    function codeAddress() {
        var infowindow = new google.maps.InfoWindow();
        $.getJSON('/Dashboard/LoadWorkerList', function (address) {
            $.each(address, function () {
                var currVal = this["AddressLine1"];
                geocoder.geocode({ 'address': currVal }, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        var marker = new google.maps.Marker({
                            map: map,
                            icon: iconBase + 'man.png',
                            position: results[0].geometry.location,
                            title: currVal


                        })
                        placesList.innerHTML += '<li>' + currVal + '</li>';


                        google.maps.event.addListener(marker, 'click', (function (marker, i) {
                            return function () {
                                infowindow.setContent(currVal);
                                infowindow.open(map, marker);
                            }
                        })(marker, currVal));
                        address.push(marker);




                }
                else if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
                    setTimeout(codeAddress, 2000);
                }
                else {
                    alert("Geocode was not successful for the following reason: " + status);
                }
            });
        });
    });
    return false;
}

window.onload = function () {
    initialize();
    codeAddress();
}

这是屏幕截图

找到一个列表 https://developers.google.com/maps/documentation/javascript/examples/place-search-pagination

我想制作 Google map 内的列表

提前致谢:D

Answer 1

将位置存储为 <li> 的属性-元素:

$('#places').append($('<li/>')
                      .text(currVal)
                       .data('location',results[0].geometry.location));

...然后您稍后就可以迭代 <li/> -元素和使用LatLngBounds.contains()检查边界是否包含该位置(如果不包含，则隐藏 <li>)

示例:

        google.maps.event.addListener(map,'bounds_changed',function(){
          $('#places li').css('display',  function(){
              return (map.getBounds().contains($(this).data('location')))
                      ? ''
                      : 'none';
            });
        });

注意:在 $.getJSON 的末尾-回调你应该触发 bounds_changed -应用列表过滤的事件:

google.maps.event.trigger(map,'bounds_changed');

(或者通过在创建元素时设置元素的显示来直接应用过滤)