拖动后在地图中心标记 [英] Marker on the center of map after drag

问题描述

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

我有下面的代码，它只用于在地图上拖动标记
，但我不知道在哪里添加将标记移动到中心的函数或代码

该代码写在下面：

  google.maps.event.addListener（myMarker，'dragend'，function（evt）{
 document.getElementById（'dragStatus'）。innerHTML ='< p>当前纬度：'+ 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）{
 // ------------- 
 // ------------ 
}）; 
  

http://jsfiddle.net/ANJYR/6xq6pujk/

解决方案

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

  // 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（））; //将地图中心设置为标记位置
 updatePosition（this.getPosition（）。lat（），this.getPosition（）。lng（））; //更新位置显示
}）; 
 
 google.maps.event.addListener（map，'dragend'，function（）{
 myMarker.setPosition（this.getCenter（））; //设置标记位置到地图中心
 updatePosition（this.getCenter（）。lat（），this.getCenter（）。lng（））; //更新位置显示
}）; 
 
 function updatePosition（lat，lng）{
 document.getElementById（'dragStatus'）。innerHTML ='< p>当前纬度：'+ lat.toFixed（4）+'当前Lng：'+ lng.toFixed（4）+'< / p>'; 
} 
  

JSFiddle演示

I implement google map on my website. User can drag the marker and get coordinates. It's working fine but requirement is that when user drag marker, after drag marker should come on the center of the map window or if user drag map, then for this case marker also come to the center of map window.

I have the following code which is working for only drag marker on the map, but I don't know where to add the function or code that move the marker on the center of map window after drag.

That code is written below:

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) {
    //-------------
    //------------
});

http://jsfiddle.net/ANJYR/6xq6pujk/

解决方案

This is (I think) an easier solution... Or I didn't quite get what you want to achieve.

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

JSFiddle demo

这篇关于拖动后在地图中心标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！