如何设置Map（），setVisible（）4000/5000的标记而不会在谷歌地图api V3中失去性能？

Posted 2021-04-02

在地图上加载4000/5000标记然后显示/隐藏1000个标记时，我首先遇到很多性能问题。

setMap（）和setVisible（）对我来说都很慢。有时浏览器也会崩溃。

但是，我见过许多网站使用谷歌地图api V3无缝加载许多标记。所以我不能在速度上妥协。

有谁知道如何实现它？

答案

使用此标记量时，您需要使用标记聚类技术或Fusion Table。

Google提供了一篇很好的文章，其中包含您可以使用的解决方案：https://developers.google.com/maps/articles/toomanymarkers

另一答案

我一直在努力为SugarCRM推出JJWDesign Google Maps Package的限制。 5,000个标记似乎很容易映射。在尝试映射25,000+时，我开始看到性能问题。但是，我认为浏览器之间存在很大差异。我在旧的IE浏览器（IE6）上看到了糟糕的表现。谷歌浏览器似乎拥有最佳性能。

以下是从SugarCRM映射5000+ Leads的视频。请注意，潜在客户是由Google地理编码API预先编码的。数据通过JSON传输到视图中。

在SugarCRM中映射的5000+ Leads的Google Maps演示：

https://www.youtube.com/watch?v=kPbRV0aLia4

您可以在此页面上查看主要的javascript函数：

GitHub.com项目：

https://github.com/jjwdesign/JJWDesign-Google-Maps/blob/master/SugarModules/modules/jjwg_Maps/views/view.map_markers.php

另一答案

这是因为你在html页面中添加标记。我在html页面本身加载1000个标记时也有类似的问题。这是因为你可能正在使用循环在html页面中添加标记。尝试以角度添加标记。这将加快过程，现在我可以加载20000+标记

$scope.map_function = function(){


homeService.homemapdata($scope.dummy).success(function(data){

 $scope.all_device_location=data.all_device_location;
 $scope.map_center = data.map_center;




  var myLatlng = new google.maps.LatLng(cities[0]['latitude'],cities[0]['longitude']);
    var mapOptions = {
        center: myLatlng,
        zoom: 1,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles: [
        {elementType: 'geometry', stylers: [{color: '#242f3e'}]},
        {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
        {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
        {
          featureType: 'administrative.locality',
          elementType: 'labels.text.fill',
          stylers: [{color: '#d59563'}]
        },
        {
          featureType: 'poi',
          elementType: 'labels.text.fill',
          stylers: [{color: '#d59563'}]
        },
        {
          featureType: 'poi.park',
          elementType: 'geometry',
          stylers: [{color: '#263c3f'}]
        },
        {
          featureType: 'poi.park',
          elementType: 'labels.text.fill',
          stylers: [{color: '#6b9a76'}]
        },
        {
          featureType: 'road',
          elementType: 'geometry',
          stylers: [{color: '#38414e'}]
        },
        {
          featureType: 'road',
          elementType: 'geometry.stroke',
          stylers: [{color: '#212a37'}]
        },
        {
          featureType: 'road',
          elementType: 'labels.text.fill',
          stylers: [{color: '#9ca5b3'}]
        },
        {
          featureType: 'road.highway',
          elementType: 'geometry',
          stylers: [{color: '#746855'}]
        },
        {
          featureType: 'road.highway',
          elementType: 'geometry.stroke',
          stylers: [{color: '#1f2835'}]
        },
        {
          featureType: 'road.highway',
          elementType: 'labels.text.fill',
          stylers: [{color: '#f3d19c'}]
        },
        {
          featureType: 'transit',
          elementType: 'geometry',
          stylers: [{color: '#2f3948'}]
        },
        {
          featureType: 'transit.station',
          elementType: 'labels.text.fill',
          stylers: [{color: '#d59563'}]
        },
        {
          featureType: 'water',
          elementType: 'geometry',
          stylers: [{color: '#17263c'}]
        },
        {
          featureType: 'water',
          elementType: 'labels.text.fill',
          stylers: [{color: '#515c6d'}]
        },
        {
          featureType: 'water',
          elementType: 'labels.text.stroke',
          stylers: [{color: '#17263c'}]
        }
      ],

    };
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);


  // Geo Location /
    // navigator.geolocation.getCurrentPosition(function(pos) {
    //     // map.setCenter(new google.maps.LatLng(mapcenter[0]['latitude'],mapcenter[0]['longitude']));
    //     var myLocation = new google.maps.Marker({
    //         position: new google.maps.LatLng(pos.coords.latitude,
    //     pos.coords.longitude),
    //         map: map,
    //         icon: {
    //           path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
    //           scale: 3
    //         },
    //         // animation: google.maps.Animation.DROP,
    //         title: "My Location"
    //     });
    // });
    bounds  = new google.maps.LatLngBounds();
    $scope.map = map;
    // Additional Markers //
    $scope.markers = [];
    var infoWindow = new google.maps.InfoWindow();
    var createMarker = function (info){
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(info.latitude, info.longitude),
            map: $scope.map,
            animation: google.maps.Animation.DROP,


        });
        loc = new google.maps.LatLng(info.latitude, info.longitude);
        bounds.extend(loc);
        marker.content = '<div class="infoWindowContent">' + info.device_user__name + '</div>';
        google.maps.event.addListener(marker, 'click', function(){
            infoWindow.setContent('<h2>' + info.device__device_name + '</h2>' + marker.content);
            infoWindow.open($scope.map, marker);
        });
        $scope.markers.push(marker);
    }  
    for (i = 0; i < cities.length; i++){
        createMarker(cities[i]);
    }
    map.fitBounds(bounds);


        $timeout(function() {
          $scope.markerClusterer = new MarkerClusterer(map, $scope.markers, { maxZoom: 20});
         $scope.location_loading=false;

        }, 1);



 });
}