2015-02-12 4 views
-1

У меня возникла проблема, когда карты google начнут замедляться и сработают после игры с функцией области рисования (внизу страницы). Хотел узнать, пропустил ли я что-то или у меня что-то есть, что вызывает его крушение?После нескольких щелчков мыши Google Maps вылетает с ошибкой

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() 
 
{ 
 
\t 
 
\t var points = new google.maps.MVCArray(); 
 
     
 

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

 

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

 
\t cArea.setMap(map); 
 

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

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

+0

пожалуйста, вы можете создать http://jsfiddle.net/ показывая вашу проблему? было бы проще попробовать и отлаживать .. – Shaunak

+0

https://jsfiddle.net/368b5e1t/2/ –

+0

https://jsfiddle.net/368b5e1t/5/ –

ответ

0

У вас есть эта функция:

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); 
}); 
+0

Какую часть мне нужно отредактировать, чтобы исправить эту проблему? –

+0

@TahirMehmet см. Мое обновление – duncan

+0

Я не думаю, что «рекурсия» - это правильное слово, поскольку «addMarker» в обработчике событий не запускается при добавлении обработчика. Скорее всего, первый обработчик добавляет другой обработчик, поэтому следующий клик запускает два обработчика, а затем добавляет третий и т. Д. – kyle

Смежные вопросы