Question

我遇到此问题，其中标记在宽地图上出现多次，1920x1080分辨率，地图高度500px和宽度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>

问题：当标记保持不可分割时，如何防止标记重复？

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

Answer 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/ 唯一仍然不正确的是光标在悬停时变为指针，并且当您尝试拖动标记时地图不会拖动（您可以花一些时间通过根据用户尝试的数量手动移动地图来修复此问题拖动标记）

Answer 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

Google地图标记在广泛的地图上多次出现

2 个答案: