Question

我正在创建一个手机网站，并在Google地图上显示数据库中的1000多个标记，但是当我将街景图标拖到地图上时，移动版Safari和移动版Chrome都会崩溃。

如果我将标记限制为10，则可以正常工作。

我不知道问题是什么。这是我的代码：

function initialize() { 
var myOptions = {
    zoom: 17,
    zoomControl:true,
    mapTypeControl: true,
    streetViewControl: true,
    overviewMapControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
getLocation();

var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(map, 'click', function() {infoWindow.close();});

<?php
    for($i = 0; $i < count($places); $i++) {
        ?>
        var marker<?=$i?> = new google.maps.Marker({
        position: new google.maps.LatLng(<?=$places[$i]->coordinates?>),
        map: map,
        });

        google.maps.event.addListener(marker<?=$i?>, 'click', function() {
                    infoWindow.setContent("");
                    infoWindow.open(map,marker<?=$i?>);
            map.panTo(marker<?=$i?>.getPosition());
        });
    <?php
    }
?>

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError, { timeout: 3000, enableHighAccuracy: true, maximumAge: 90000 });
    }
    else {
        alert("Geolocation is not supported by this browser.");
    }
}
function showPosition(position) {
    var currentLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    map.setCenter(currentLocation);
    var marker = new google.maps.Marker({
        position: currentLocation,
        map: map
    });
}
function showError(error) {
    alert(error.message);
}   
}

Answer 1

群集标记可以是一种解决方案。然后例如用php创建一个json，并用javascript加载它。

https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/examples.html

https://developers.google.com/maps/articles/toomanymarkers

此示例将在地图上显示100个标记。

var center = new google.maps.LatLng(37.4419, -122.1419);
var options = {
  'zoom': 13,
  'center': center,
  'mapTypeId': google.maps.MapTypeId.ROADMAP
};

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

var markers = [];
for (var i = 0; i < 100; i++) {
  var latLng = new google.maps.LatLng(data.photos[i].latitude,
      data.photos[i].longitude);
  var marker = new google.maps.Marker({'position': latLng});
  markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);

希望有所帮助

谷歌街景视图因标记过多而被打破

1 个答案: