Javascript 拖动后地图中心的标记

我在我的网站上实现谷歌地图。用户可以拖动标记并获取坐标。它工作正常，但要求是当用户拖动标记时，拖动后的标记应位于地图窗口的中心，或者如果用户拖动地图，则在这种情况下，标记也应位于地图窗口的中心

我有以下代码，只适用于地图上的拖动标记， 但我不知道在哪里添加函数或代码，在拖动后移动地图窗口中心的标记

该代码写在下面：

google.maps.event.addListener(myMarker, 'dragend', function (evt) {
    document.getElementById('dragStatus').innerHTML = '<p> Current Lat: ' + evt.latLng.lat().toFixed(4) + ' Current Lng: ' + evt.latLng.lng().toFixed(4) + '</p>';
    var point = marker.getPosition();
       map.panTo(point);
});

google.maps.event.addListener(myMarker, 'dragstart', function (evt) {
    //-------------
    //------------
});

google.maps.event.addListener（myMarker，'dragend'，function（evt）{
document.getElementById（'dragStatus'）.innerHTML='当前Lat:'+evt.latLng.Lat（）.toFixed（4）+'Current Lng:'+evt.latLng.Lng（）.toFixed（4）+'
'；
var point=marker.getPosition（）；
潘图（点）；
});
google.maps.event.addListener（myMarker，'dragstart'，函数（evt）{
//-------------
//------------
});

---

只需添加以下代码：

var point = myMarker.getPosition(); //instead of marker.getPosition();
map.setCenter(point); //set the center of the map based on myMarker

更新：拖动后以地图为中心的标记

关于

idle

事件：当平移或缩放后贴图变为空闲时，将触发此事件

---

工作小提琴：这对我来说很有用：

//谷歌地图中的可拖动标记。。。。
var map=new google.maps.map（document.getElementById（'mapBox'）{
缩放：4，
中心：新google.maps.LatLng（28.613977.2090），
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var myMarker=new google.maps.Marker({
位置：新google.maps.LatLng（28.613977.2090），
德拉格布尔：是的
});
google.maps.event.addListener（myMarker，'dragend'，function（evt）{
document.getElementById（'dragStatus'）.innerHTML='当前Lat:'+evt.latLng.Lat（）.toFixed（4）+'当前Lng:'++'
'；
var x=evt.latLng.lat（）；
var y=evt.latLng.lng（）；
var newLatLng=newgoogle.maps.LatLng（x，y）；
myMarker.setPosition（新LATLNG）；
//使用全局变量：
潘托地图（纽拉特宁）；
});
google.maps.event.addListener（myMarker，'dragend'，function（evt）{
//-------------
//------------
});
地图设置中心（myMarker.position）；
myMarker.setMap（map）；

这（我认为）是一个更简单的解决方案。。。或者我没有完全达到你想要的目标

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

//谷歌地图中的可拖动标记。。。。
var center=new google.maps.LatLng（-33.013803，-71.551498）；
var map=new google.maps.map（document.getElementById（'mapBox'）{
缩放：18，
中心:中心,，
mapTypeId:google.maps.mapTypeId.HYBRID
});
var myMarker=new google.maps.Marker({
位置：中，
真的，
地图：地图
});
google.maps.event.addListener（myMarker，'dragend'，function（）{
map.setCenter（this.getPosition（））；//将地图中心设置为标记位置
updatePosition（this.getPosition（）.lat（），this.getPosition（）.lng（））；//更新位置显示
});
google.maps.event.addListener（映射'dragend'，函数（）{
myMarker.setPosition（this.getCenter（））；//将标记位置设置为地图中心
更新位置（this.getCenter（）.lat（），this.getCenter（）.lng（））；//更新位置显示
});
功能更新位置（lat、lng）{
document.getElementById（'dragStatus'）.innerHTML='当前纬度：'+Lat.toFixed（4）+'Current Lng:'+Lng.toFixed（4）+'
'；
}

---

对于（f=0；f使用
$event
作为
dragEnd
事件的值

    <agm-marker
            (markerClick)="clickedMarker()"
            [latitude]="lat"
            [longitude]="lng"
            [markerDraggable]=true
            (dragEnd)="markerDragEnd($event)">
    </agm-marker>



做得很好。谢谢。如果我拖动地图，还有一件事，在这种情况下，标记也可以出现在地图窗口的中心。请解释您的解决方案。代码中有文本或注释。谢谢。注释添加到代码中…我不明白为什么投反对票，因为最初的问题只是关于标记的中心…但是谢谢不管怎样：）谢谢你的编辑，但我不明白你为什么需要那么多东西才能做到这一点？由于您编辑了答案，向下投票被删除。发布您的答案，您将获得我的向上投票…没问题：）拖动结束后，是否要将地图居中放置在标记上？或者将标记移动到地图的中心？这还不清楚。但是能够移动一个标记来获取坐标听起来很奇怪，一旦移动完成，标记会自动移动到地图的中心；如果标记设置为新位置，OP希望将地图居中…干杯；）上面的标记必须具有数据库纬度和经度才能在mapHi上显示标记，您的答案可能需要更多支持信息：这只是代码块。当最初的问题没有建议他们在哪里使用php时，为什么现在对php有依赖性？。您的答案是否比已经提供的其他三个答案有任何好处，可能是一个没有详细研究代码就不明显的答案？可能是，我只提供了拖动和更改坐标的答案，显示的坐标与更改后的新坐标类似，这些坐标通过php中的ajax保存在数据库中，通过php检索，然后嵌入javascript
//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, '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>';
}

 for(f=0; f<Data.length; f++)
                {           
                            /*var p = Data[f];
                            var latlng = new google.maps.LatLng(p[0], p[1]);
                            bounds.extend(latlng);*/
                             var marker = new google.maps.Marker({
                                position:  new google.maps.LatLng(Data[f][0], Data[f][1]),
                                map: map,
                                draggable:<?php  echo $dragger; ?>,
                                icon: iconBase
                              });

                       google.maps.event.addListener(marker, 'dragend', (function(marker, f) {
                        return  function()
                        {
                               if(confirm("Are you sure you want to change lat/lng?")){   
                            var park_id = ID[f];
                            var lat = this.getPosition().lat();
                            var lng = this.getPosition().lng();
                                    $.ajax({
                              type: "POST",
                              url: "<?php echo base_url() ?>Admin/updateParkid", 
                              data: {park_id: park_id, latitude: lat, longitude: lng},
                              dataType: '',
                              success: function(result){
                                alert(result);

                                //marker.setIcon(iconBase);
                                        }
                              });            
                            } }
                         })(marker, f)); 

    <agm-marker
            (markerClick)="clickedMarker()"
            [latitude]="lat"
            [longitude]="lng"
            [markerDraggable]=true
            (dragEnd)="markerDragEnd($event)">
    </agm-marker>