Question

当用户在地图上拖动时，我希望标记/图钉滚动并位于地图的中心。我有一个简单的jsfiddle（http://jsfiddle.net/upsidown/5xd1Lbpc/6/），当用户停止拖动时，引脚将下降到地图的中心，但我希望引脚随拖动一起移动。

Google Maps JS

var center = new google.maps.LatLng(-33.013803, -71.551498);

var map = new google.maps.Map(document.getElementById('mapBox'), {
    zoom: 18,
    center: center,
    mapTypeId: google.maps.MapTypeId.HYBRID
});

var myMarker = new google.maps.Marker({
    position: center,
    draggable: true,
    map: map
});

google.maps.event.addListener(myMarker, 'dragend', function () {
    map.setCenter(this.getPosition()); // Set map center to marker position
    updatePosition(this.getPosition().lat(), this.getPosition().lng()); // update position display
});

google.maps.event.addListener(map, 'dragend', function () {
    myMarker.setPosition(this.getCenter()); // set marker position to map center
    updatePosition(this.getCenter().lat(), this.getCenter().lng()); // update position display
});

function updatePosition(lat, lng) {
    document.getElementById('dragStatus').innerHTML = '<p> Current Lat: ' + lat.toFixed(4) + ' Current Lng: ' + lng.toFixed(4) + '</p>';
}

HTML

<div id='mapBox'></div>

关于如何做到这一点的任何想法或想法？

Answer 1

JSFiddle

为了减少闪烁，您可以将绝对定位的标记直接放在地图顶部的中心位置。然后，您可以使用getCenter()检索地图上的实际位置。

#wrapper {
    position: relative;
    display: inline-block;
}
#mapBox {
    width: 400px;
    height: 300px;
}
#marker {
    position: absolute;
    top: calc(50% - 40px);
    left: calc(50% - 40px);
    height: 80px;
    width: 80px;
    border: 3px solid blue;
    border-radius: 50%;
    background-color: rgba(30,144,255,0.5);
    box-sizing: border-box;
    pointer-events: none;
}

HTML：

<div id="wrapper">
    <div id="mapBox"></div>
    <div id="marker"></div>
</div>
<div id="dragStatus"></div>

JS：

var center = new google.maps.LatLng(-33.013803, -71.551498);

var map = new google.maps.Map(document.getElementById('mapBox'), {
    zoom: 18,
    center: center,
    mapTypeId: google.maps.MapTypeId.HYBRID
});

google.maps.event.addListener(map, 'drag', function() {
  loc(map);
});

google.maps.event.addListener(myMarker, 'dragend', function () {
  loc(map);
});

function loc(map) {
    var x = map.getCenter();
    document.getElementById('dragStatus').innerHTML = x.lat() + ', ' + x.lng();
}

其他有用的答案：

Is there a way to Fix a Google Maps Marker to the Center of its Map always?

Answer 2

添加此

google.maps.event.addListener(map, 'drag', function () {
  myMarker.setPosition(this.getCenter()); // set marker position to map center
   updatePosition(this.getCenter().lat(), this.getCenter().lng()); // update position display
});

请参阅http://jsfiddle.net/gbqqzonr/

//Dragable Marker In Google Map....

var center = new google.maps.LatLng(-33.013803, -71.551498);

var map = new google.maps.Map(document.getElementById('mapBox'), {
    zoom: 18,
    center: center,
    mapTypeId: google.maps.MapTypeId.HYBRID
});

var myMarker = new google.maps.Marker({
    position: center,
    draggable: true,
    map: map
});

google.maps.event.addListener(myMarker, 'dragend', function () {
    map.setCenter(this.getPosition()); // Set map center to marker position
    updatePosition(this.getPosition().lat(), this.getPosition().lng()); // update position display
});

google.maps.event.addListener(map, 'drag', function () {
    myMarker.setPosition(this.getCenter()); // set marker position to map center
    updatePosition(this.getCenter().lat(), this.getCenter().lng()); // update position display
});

google.maps.event.addListener(map, 'dragend', function () {
    myMarker.setPosition(this.getCenter()); // set marker position to map center
    updatePosition(this.getCenter().lat(), this.getCenter().lng()); // update position display
});

function updatePosition(lat, lng) {
    document.getElementById('dragStatus').innerHTML = '<p> Current Lat: ' + lat.toFixed(4) + ' Current Lng: ' + lng.toFixed(4) + '</p>';
}

拖动时将标记/图钉保留在地图中间

2 个答案: