在拖動時將標記/別針保持在地圖的中間

Question

我希望標記/別針在地圖上拖動時在地圖的中心滾動並位於地圖的中心。我有一個簡單的jsfiddle（http://jsfiddle.net/upsidown/5xd1Lbpc/6/），當用戶停止拖動時，該引腳將落到地圖的中心，但我希望該引腳隨拖動一起移動。

谷歌地圖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

添加此

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>'; 
} 

Answer 2

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?