我遇到了一个问题，即在使用绘图区域功能（页面底部）后，谷歌地图将开始减速并崩溃。想知道我是否遗漏了某些东西，或者我有什么东西导致它崩溃？
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&controls=0&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&controls=0&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&controls=0&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);
}
答案 0 :(得分：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);
});