谷歌地图标记在宽地图上出现多次答案

【问题标题】：Google maps markers appears multiple times on wide map谷歌地图标记在宽地图上出现多次
【发布时间】：2014-11-20 02:28:17
【问题描述】：

我遇到了标记在宽地图上多次出现的问题，屏幕分辨率为 1920x1080，地图高度为 500 像素，宽度为 100% (a live example)。

<style>
html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
    function initialize() {
        var myLatlng = new google.maps.LatLng(0, 0);
        var mapOptions = {
            zoom: 0,
            center: myLatlng
        }
        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Hello World!'
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas"></div>

但是，将标记设置为可拖动会使 google maps api 不会多次呈现标记 (a live example)。

<style>
html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
    function initialize() {
        var myLatlng = new google.maps.LatLng(0, 0);
        var mapOptions = {
            zoom: 0,
            center: myLatlng
        }
        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            draggable: true,
            title: 'Hello World!'
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas"></div>

问题：如何在标记不可拖动的情况下防止标记重复？

后期编辑：地图大小无法更改。

【问题讨论】：

您可以更改缩放级别，这样您就不会看到世界地图 3 次。像这里我更新了你的JSFiddle
这不是一个选项。地图的宽度必须为 100%。
缩放级别 1 也不会帮助您，还是？因为那样你就有了完整的世界地图。不是同一张地图的三倍。
缩放级别 1 仍然显示标记三倍。零缩放时有 3 张地图： 1. 屏幕左侧我有地图的右半部分； 2.全幅地图； 3.屏幕右侧我有左半边地图；
它显示了 3 次，因为你有一个直接的 myLatlng 点。首先我让标记下的可拖动为真，然后我尝试了marker.setOptions({draggable: false}); 或marker.draggable(false)，但这并没有成功。可能通过可拖动的 true 您没有固定点，您可以更改它，这就是它只显示一个标记的原因。我尝试使用event，但是一旦鼠标移到标记上，它就会再次显示另外两个。我认为这看起来像一个死胡同。

标签： javascript google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

这可能会有所帮助，我将 draggable 设置为 true，但在拖动事件时将位置设置回原始位置。

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function initialize() {
    var myLatlng = new google.maps.LatLng(0,0);
    var mapOptions = {
    zoom: 0,
    center: myLatlng
    }
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        draggable: true,
        crossOnDrag : false,
        title: 'Hello World!'
    });
var origPos = marker.getPosition();
marker.addListener("drag",function(e){marker.setPosition(origPos);})
}

google.maps.event.addDomListener(window, 'load', initialize);

在这里看小提琴http://jsfiddle.net/wvch9qpu/3/ 唯一仍然不正确的是光标在悬停时变为指针，并且当您尝试拖动标记时地图不拖动，（您可以花一些时间通过根据用户尝试的程度手动移动地图来解决此问题拖动标记）

【讨论】：

【解决方案2】：

当您将鼠标移出其他标记消失时，我尝试了两个事件。

var marker = new google.maps.Marker();
        marker.setPosition(myLatlng);
        marker.setMap(map);
        marker.setDraggable(true);

        google.maps.event.addListener(marker, 'mouseover', function() {
            marker.setDraggable(false);
        });
        google.maps.event.addListener(marker, 'mouseout', function() {
            marker.setDraggable(true);
        });

这里是直播example

【讨论】：

问题在于它会产生令人讨厌的闪烁效果。
是的，我知道一旦标记可拖动，它就会创建其他标记，因为它在 3 个世界地图中显示相同的位置。实际上这是正确的，因为这是您要在地图上显示的点。因此，在这三个相同的世界中，它具有完全相同的点。因此，通常它会显示 3 个标记。在 draggable false 你没有任何确切的观点。它只是一个占位符标记。因此，您可以随时更改位置。