Question

我尝试了许多例子，但没有得到它。

我需要更改我的代码，以便在很长时间内，纬度更改地图不应重新加载。

我尝试在初始化之外声明标记并尝试单独创建另一个函数，因为标记不起作用，必须进行哪些更改才能解决。

这是我的页面：

<!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> &nbsp;
    </div>
</body>
</html>

Answer 1

每次点击initialize时，您都会调用button函数：

<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> &nbsp;
</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> &nbsp;
    </div>
</body>
</html>

如何在initialize（）函数之外声明标记以避免坐标更改时地图重新加载？

1 个答案: