点击时让谷歌地图移动标记

Question

点击时让谷歌地图移动标记

16

我想要做的是，在我的地图上，当我点击地图上某个位置时，会在该点显示一个标记，然后我再点击地图上不同的位置，另一个标记就会出现。但是我希望将第一个标记移动到第二个位置。

(我在html标签后面放置了""来将代码放在这里)

这是我的代码：

<html>
<style type="text/css">
    #map_canvas {
        height: 760px;
        width: 1100px;
        position: static;
        top: 100px;
        left: 200px;
    }
</style>

<script type="text/javascript"
        src="http://maps.google.com/maps/api/js?sensor=false">
</script>

<script type="text/javascript">

    function initialize() {
        var latlng = new google.maps.LatLng(42.55308, 9.140625);

        var myOptions = {
            zoom: 2,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            streetViewControl: false,
            mapTypeControl: false,
        };

        var map = new google.maps.Map(document.getElementById("map_canvas"),
                myOptions);


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

        function placeMarker(location) {

            var marker = new google.maps.Marker({
                position: location,
                map: map
                animation: google.maps.Animation.DROP,

            });
            map.setCenter(location);

        }


    }

</script>
</head>


<body onload="initialize()">
<div id="map_canvas" style="1500px; 1000px"></div>
</body>
</html>

- mer

你能否将你的页面复制粘贴到 jsFiddle (http://jsfiddle.net/) 中？我无法正确阅读它，但是你的 "var map" 变量的作用域是否为全局？ - Jason

3个回答

10

另一种解决方案是移动一个标记，你只需要使用marker.setPosition()。(感谢kjy112的提醒:)

<html>
<style type="text/css">
    #map_canvas {
        height: 760px;
        width: 1100px;
        position: static;
        top: 100px;
        left: 200px;
    }
</style>

<script type="text/javascript"
        src="http://maps.google.com/maps/api/js?sensor=false">
</script>

<script type="text/javascript">
    var marker;

    function initialize() {
        var latlng = new google.maps.LatLng(42.55308, 9.140625);

        var myOptions = {
            zoom: 2,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            streetViewControl: false,
            mapTypeControl: false,
        };

        var map = new google.maps.Map(document.getElementById("map_canvas"),
                myOptions);


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

        function placeMarker(location) {



            if (marker == undefined){
                marker = new google.maps.Marker({
                    position: location,
                    map: map, 
                    animation: google.maps.Animation.DROP,
                });
            }
            else{
                marker.setPosition(location);
            }
            map.setCenter(location);

        }


    }

</script>
</head>


<body onload="initialize()">
<div id="map_canvas" style="1500px; 1000px"></div>
</body>
</html>

- AlfaTeK

1

什么？你可以在一个问题中发布两个答案？我不知道，哈哈。 - KJYe.Name

2

要移除一个标记，只需将它的setMap(null)。

<html>
<style type="text/css">
    #map_canvas {
        height: 760px;
        width: 1100px;
        position: static;
        top: 100px;
        left: 200px;
    }
</style>

<script type="text/javascript"
        src="http://maps.google.com/maps/api/js?sensor=false">
</script>

<script type="text/javascript">
    var oldMarker;

    function initialize() {
        var latlng = new google.maps.LatLng(42.55308, 9.140625);

        var myOptions = {
            zoom: 2,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            streetViewControl: false,
            mapTypeControl: false,
        };

        var map = new google.maps.Map(document.getElementById("map_canvas"),
                myOptions);


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

        function placeMarker(location) {

            marker = new google.maps.Marker({
                position: location,
                map: map
                animation: google.maps.Animation.DROP,

            });

            if (oldMarker != undefined){
                oldMarker.setMap(null);
            }
            oldMarker = marker;
            map.setCenter(location);

        }


    }

</script>
</head>


<body onload="initialize()">
<div id="map_canvas" style="1500px; 1000px"></div>
</body>
</html>

- AlfaTeK

没错。我读了原帖，以为看到了删除标记，这就是我脑海中唯一的东西 :) 显然那是最好的答案 :) - AlfaTeK

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dsas · Accepted Answer

每次运行placemarker()函数时，它都会创建一个新的标记。

你需要在placemarker函数之外创建标记，并在之后的placemarker函数内使用marker.setPosition()。