点击几下，Google地图会在一段时间后崩溃

Question

我遇到了一个问题，即在使用绘图区域功能（页面底部）后，谷歌地图将开始减速并崩溃。想知道我是否遗漏了某些东西，或者我有什么东西导致它崩溃？

＆＃13;

＆＃13;

var map;
var weatherDisplayIsOn = false;
var markers = [];
var cArea;

function initialize() {
    var myLatlng = new google.maps.LatLng(51.488651, -0.063232);
    var newYork = new google.maps.LatLng(40.719967, -74.009893);
    var paris = new google.maps.LatLng(48.857278, 2.352210);
    var london = new google.maps.LatLng(51.519670, -0.125631);
    var towerBridge = new google.maps.LatLng(51.506231, -0.075356);
    
  
    var mapOptions = {
        center: myLatlng,
        zoom: 8,
        disableDefaultUI: true,
        mapTypeId: google.maps.MapTypeId.SATELLITE
    };


    map = new google.maps.Map(document.getElementById('map'),
            mapOptions);



    var Home = '<div id="content" align="center">' +
            '<div id="siteNotice">' +
            '</div>' +
            '<h1 id="firstHeading" class="firstHeading">Home</h1>' +
            '<div id="bodyContent">' +
            '<p><b>Home</b>, the buidling I had spent the last 13 years living ' +
            'in with the locality of Primary Schools, Secondary and Localised ' +
            'public transport ' +
            '</p>' +
            '</div>' +
            '</div>';

    var infoHome = new google.maps.InfoWindow({
        content: Home
    });
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        animation: google.maps.Animation.DROP,
        title: 'Homeland'

    });

    google.maps.event.addListener(marker, 'click', function() {
        infoHome.open(map, marker);
    });


    var NewYork = '<div id="content" align="center">' +
            '<div id="siteNotice">' +
            '</div>' +
            '<h1 id="firstHeading" class="firstHeading">New York</h1>' +
            '<div id="bodyContent">' +
            '<p><b>New York</b>, often called New York City or the City of New York to distinguish ' +
            'it from the State of New York, of which it is a part of the most populous city ' +
            'in the United States and the center of the New York metropolitan area, the premier gateway for' +
            'legal immigration to the United States and one of the most populous urban agglomerations in the world.' +
            '</p>' +
            '<iframe width="560" height="315" src="https://www.youtube.com/embed/MtCMtC50gwY?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>' +
            '</p>' +
            '</div>' +
            '</div>';

    var nyInfo = new google.maps.InfoWindow({
        content: NewYork
    });
    var marker1 = new google.maps.Marker({
        position: newYork,
        map: map,
        animation: google.maps.Animation.DROP,
        title: 'New York'


    });

    google.maps.event.addListener(marker1, 'click', function() {
      nyInfo.open(map, marker1);
   
    });


    var Paris = '<div id="content" align="center">' +
            '<div id="siteNotice">' +
            '</div>' +
            '<h1 id="firstHeading" class="firstHeading">Paris, France</h1>' +
            '<div id="bodyContent">' +
            '<p><b>Paris</b>, is the capital and most populous city of France. ' +
            'Situated on the Seine River, in the north of the country, it is in the centre of the ' +
            'Ile-de-France region, also known as the region parisienne.' +
            '</p>' +
            '<iframe width="560" height="315" src="https://www.youtube.com/embed/hWo-43ObCP8" frameborder="0" allowfullscreen></iframe>' +
            '</div>' +
            '</div>';

    var parisInfo = new google.maps.InfoWindow({
        content: Paris

    });
    var marker2 = new google.maps.Marker({
        position: paris,
        map: map,
        animation: google.maps.Animation.DROP,
        title: 'Paris'

    });

    google.maps.event.addListener(marker2, 'click', function() {
        parisInfo.open(map, marker2);

    });

    var London = '<div id="content" align="center">' +
            '<div id="siteNotice">' +
            '</div>' +
            '<h1 id="firstHeading" class="firstHeading">London, United Kingdom</h1>' +
            '<div id="bodyContent">' +
            '<p><b>London</b>, is the capital city of England and the United Kingdom.' +
            'It is the most populous city in the United Kingdom, with a metropolitan area of over ' +
            '13 million inhabitants. ' +
            '</p>' +
            '<iframe width="560" height="315" src="https://www.youtube.com/embed/45ETZ1xvHS0?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>' +
            '</div>' +
            '</div>';

    var londonInfo = new google.maps.InfoWindow({
        content: London

    });
    var marker3 = new google.maps.Marker({
        position: london,
        map: map,
        animation: google.maps.Animation.DROP,
        title: 'London'

    });

    google.maps.event.addListener(marker3, 'click', function() {
        londonInfo.open(map, marker3);
    });

    var TowerBridge = '<div id="content" align="center">' +
            '<div id="siteNotice">' +
            '</div>' +
            '<h1 id="firstHeading" class="firstHeading">Tower Bridge,London</h1>' +
            '<div id="bodyContent">' +
            '<p><b>Tower Bridge</b>, is the capital city of England and the United Kingdom.' +
            'It is the most populous city in the United Kingdom, with a metropolitan area of over ' +
            '13 million inhabitants. ' +
            '</p>' +
            '<iframe width="560" height="315" src="https://www.youtube.com/embed/45ETZ1xvHS0?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>' +
            '</div>' +
            '</div>';

    var towerBridgeInfo = new google.maps.InfoWindow({
        content: TowerBridge
        
        

    });
    var marker4 = new google.maps.Marker({
        position: towerBridge,
        map: map,
        animation: google.maps.Animation.DROP,
        title: 'Tower Bridge'
        
       
    });

    google.maps.event.addListener(marker4, 'click', function() {
        towerBridgeInfo.open(map, marker4)
         
    });


    weatherLayer = new google.maps.weather.WeatherLayer({
        temperatureUnits: google.maps.weather.TemperatureUnit.CELCIUS
    });

    google.maps.event.addDomListener(document.getElementById('weather'), 'click', toggleWeather);

    
  };

google.maps.event.addDomListener(window, 'load', initialize);



function setRoad() {
    map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
}

function setHYB() {
    map.setMapTypeId(google.maps.MapTypeId.HYBRID);
}

function zoomTo() {
    var lat = prompt("Enter your latitude");
    var lng = prompt("Enter your longtitude");
    map.panTo(new google.maps.LatLng(lat, lng));
}

function zoomIn() {

    var currentZoomLevel = map.getZoom();
    if (currentZoomLevel != 21) {
        map.setZoom(currentZoomLevel + 1);
    }
}

function zoomOut() {

    var currentZoomLevel = map.getZoom();
    if (currentZoomLevel != 21) {
        map.setZoom(currentZoomLevel - 1);
    }
}

function toggleWeather() {
    if (weatherDisplayIsOn) {
        weatherLayer.setMap(null);
        weatherDisplayIsOn = false;
    }
    else {
        weatherLayer.setMap(map);
        weatherDisplayIsOn = true;
    }
}

function addMarker(myLatlng) {

    var customMarker = new google.maps.Marker({
        position: myLatlng,
        map: map
    });

    markers.push(customMarker);

    google.maps.event.addListener(map, 'click', function(event) {
        addMarker(event.latLng);
    });

}


function setAllMap(map) {
    for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(map);
    }
}

function clearMarkers() {
    setAllMap(null);
}

function showMarkers() {
    setAllMap(map);
}

function deleteMarkers() {
    clearMarkers();
    markers = [];
}

function toggleBounce() {

    if (marker.getAnimation() != null) {
        marker.setAnimation(null);
    } else {
        marker.setAnimation(google.maps.Animation.BOUNCE);
    }
}

function drawArea()
{
	
	var points = new google.maps.MVCArray();
       

	var endPoint = new google.maps.LatLngBounds();


	cArea = new google.maps.Polygon({
		  path: points,
		  strokeOpacity: 0.7,
		  strokeWeight: 2,
		  fillOpacity: 0.2,
                  fillColor: "#FF0000"
		 });

	  cArea.setMap(map);

	google.maps.event.addListener(map, 'click', function(e)
	{
		var path = cArea.getPath();
		path.push(e.latLng);
		endPoint.extend(e.latLng);
                addMarker(e.latLng);
		
	});
}

function deleteArea(){
    
    cArea.setMap(null);
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

你有这个功能：

function addMarker(myLatlng) {
    var customMarker = new google.maps.Marker({
        position: myLatlng,
        map: map
    });

    markers.push(customMarker);

    google.maps.event.addListener(map, 'click', function(event) {
        addMarker(event.latLng);
    });
}

在其中为地图点击定义一个事件监听器，它调用... addMarker函数...它定义了一个地图点击的事件监听器，它调用了... addMarker函数...它定义了一个事件监听器无限制的地图点击，...等等。

换句话说，错误可能是过多的递归。

最重要的是，你也可以在其他地方定义相同的事件监听器：

google.maps.event.addListener(map, 'click', function(e)
{
    var path = cArea.getPath();
    path.push(e.latLng);
    endPoint.extend(e.latLng);
    addMarker(e.latLng);
});

虽然这似乎是在一个函数（'drawArea'）中没有从任何地方调用。

只需将其移到addMarker函数之外的任何位置即可创建地图：

 google.maps.event.addListener(map, 'click', function(event) {
     addMarker(event.latLng);
 });