我尝试了很多例子，但没有得到它。
我需要更改我的代码，以便在长时间、纬度发生变化时 map 不会重新加载。
我尝试在初始化之外声明标记，并尝试为标记单独创建另一个函数，它不起作用，必须进行哪些更改才能解决问题。
这是我的页面:
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<script>
function initialize() {
x = document.getElementById("x").value;
y = document.getElementById("y").value;
var latLng = new google.maps.LatLng(x, y);
var mapProp = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var marker1 = new google.maps.Marker({
position: latLng,
title: 'Point A',
draggable: true,
});
marker1.setMap(map);
var ne0 = new google.maps.LatLng(25.774252, -80.190262);
var ne01 = new google.maps.LatLng(18.466465, -66.118292);
var ne02 = new google.maps.LatLng(32.321384, -64.75737);
var n0 = new google.maps.LatLng(23.774252, -78.190262);
var n01 = new google.maps.LatLng(17.466465, -65.118292);
var n02 = new google.maps.LatLng(16.466465, -63.118292);
var n03 = new google.maps.LatLng(30.321384, -64.75737);
var zone = [
n0, n01, n02, n03
];
var zone0 = [
ne0, ne01, ne02, ne0
];
var dzone = new google.maps.Polygon({
paths: zone,
strokeColor: "#0000FF",
strokeOpacity: 1.5,
strokeWeight: 2,
fillColor: "#ff0000",
fillOpacity: 1,
clickable: false
});
dzone.setMap(map);
var dzone0 = new google.maps.Polygon({
paths: zone0,
strokeColor: "#0000FF",
strokeOpacity: 1.5,
strokeWeight: 2,
fillColor: "#ff0000",
fillOpacity: 1,
clickable: false
});
dzone0.setMap(map);
google.maps.event.addListener(marker1, 'dragend', function(e) {
var result;
if (google.maps.geometry.poly.containsLocation(e.latLng, dzone)) {
window.alert("Danger!");;
document.body.style.backgroundColor = "red";
} else if (google.maps.geometry.poly.containsLocation(e.latLng, dzone0)) {
window.alert("Danger!");;
document.body.style.backgroundColor = "red";
} else {
document.body.style.backgroundColor = "white";
}
var m = new google.maps.Marker({
position: e.latLng,
map: map,
icon: 'pi.png'
})
});
google.maps.event.trigger(marker1, 'dragend', {
latLng: marker1.getPosition()
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
Langtitude <input id="x" type="number" value = "25.774252" onkeyup="initialize('x')">
latitude <input id="y" type="number"value = "-80.190262" onkeyup="initialize('y')"><br> <br>
<button type="button" onclick="initialize()">Submit</button>
</div>
</body>
</html>最佳答案
每次单击 button 时，您都在调用 initialize 函数:
<button type="button" onclick="initialize()">Submit</button>
首先，让我们创建一个名为 updateMarker 的函数，如下所示:
function updateMarker() {
var lat = document.getElementById("x").value;
var lng = document.getElementById("y").value;
var latLng = new google.maps.LatLng(lat, lng);
marker1.setPosition(latLng);
map.panTo(latLng);
}
一个转marker1和map的全局变量，像这样:
var map;
var marker1;
function initialize() {}
然后，我们至少需要更新按钮。看起来像这样:
<div id="googleMap" style="width:500px;height:380px;"></div>
Longitude <input id="x" type="number" value = "25.774252">
Latitude <input id="y" type="number"value = "-80.190262"><br> <br>
<button type="button" onclick="updateMarker()">Submit</button>
</div>
这只是一个示例，您需要更改以更新您的多边形。
这里是完整的 HTML:
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<script>
var map;
var marker1;
function initialize() {
var x = document.getElementById("x").value;
var y = document.getElementById("y").value;
var latLng = new google.maps.LatLng(x, y);
var mapProp = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
marker1 = new google.maps.Marker({
position: latLng,
title: 'Point A',
draggable: true,
});
marker1.setMap(map);
var ne0 = new google.maps.LatLng(25.774252, -80.190262);
var ne01 = new google.maps.LatLng(18.466465, -66.118292);
var ne02 = new google.maps.LatLng(32.321384, -64.75737);
var n0 = new google.maps.LatLng(23.774252, -78.190262);
var n01 = new google.maps.LatLng(17.466465, -65.118292);
var n02 = new google.maps.LatLng(16.466465, -63.118292);
var n03 = new google.maps.LatLng(30.321384, -64.75737);
var zone = [
n0, n01, n02, n03
];
var zone0 = [
ne0, ne01, ne02, ne0
];
var dzone = new google.maps.Polygon({
paths: zone,
strokeColor: "#0000FF",
strokeOpacity: 1.5,
strokeWeight: 2,
fillColor: "#ff0000",
fillOpacity: 1,
clickable: false
});
dzone.setMap(map);
var dzone0 = new google.maps.Polygon({
paths: zone0,
strokeColor: "#0000FF",
strokeOpacity: 1.5,
strokeWeight: 2,
fillColor: "#ff0000",
fillOpacity: 1,
clickable: false
});
dzone0.setMap(map);
google.maps.event.addListener(marker1, 'dragend', function(e) {
var result;
if (google.maps.geometry.poly.containsLocation(e.latLng, dzone)) {
window.alert("Danger!");;
document.body.style.backgroundColor = "red";
} else if (google.maps.geometry.poly.containsLocation(e.latLng, dzone0)) {
window.alert("Danger!");;
document.body.style.backgroundColor = "red";
} else {
document.body.style.backgroundColor = "white";
}
var m = new google.maps.Marker({
position: e.latLng,
map: map,
icon: 'pi.png'
})
});
google.maps.event.trigger(marker1, 'dragend', {
latLng: marker1.getPosition()
});
}
google.maps.event.addDomListener(window, 'load', initialize);
function updateMarker() {
var lat = document.getElementById("x").value;
var lng = document.getElementById("y").value;
var latLng = new google.maps.LatLng(lat, lng);
marker1.setPosition(latLng);
map.panTo(latLng);
}
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
Longitude <input id="x" type="number" value = "25.774252">
Latitude <input id="y" type="number"value = "-80.190262"><br> <br>
<button type="button" onclick="updateMarker()">Submit</button>
</div>
</body>
</html>关于javascript - 如何在 initialize() 函数之外声明标记以避免在坐标更改时重新加载 map ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29887950/