在地图上加载4000/5000个标记然后显示/隐藏 1000 个标记时，我首先面临许多性能问题。
setMap ()和setVisible()对我来说工作缓慢。有时浏览器也会崩溃。
但是，我看到许多网站使用 Google maps api V3 无缝加载许多标记。所以我不能在速度上妥协。
有谁知道如何实现它？
问问题
1082 次
3 回答
0
有了这么多的标记，您需要使用标记聚类技术或融合表。
Google 有一篇不错的文章，其中包含您可以使用的解决方案： https ://developers.google.com/maps/articles/toomanymarkers
于 2013-05-29T13:34:58.993 回答
0
我一直在尝试突破适用于 SugarCRM 的 JJWDesign Google Maps Package 的限制。5,000 个标记似乎很容易映射。尝试映射 25,000+ 时，我开始看到性能问题。但是，我认为浏览器之间的差异很大。我在旧的 IE 浏览器 (IE6) 上看到了可怕的性能。谷歌浏览器似乎有最好的性能。
以下是从 SugarCRM 映射 5000 多个潜在客户的视频。请注意，潜在客户已通过 Google 地理编码 API 进行了预地理编码。数据通过 JSON 传输到视图中。
在 SugarCRM 中映射的 5000 多个潜在客户的 Google 地图演示：
https://www.youtube.com/watch?v=kPbRV0aLia4
您可以在此页面上查看主要的 Javascript 函数：
GitHub.com 项目：
于 2013-11-25T16:27:37.863 回答
0
这是因为您在 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);
});
}
于 2018-04-09T07:26:01.277 回答