拖动后在地图中心标记

编程入门 行业动态 更新时间:2024-10-17 15:24:15
本文介绍了拖动后在地图中心标记的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述

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

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

该代码写在下面:

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

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

jsfiddle/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

更多推荐

拖动后在地图中心标记

本文发布于:2023-11-25 00:38:30,感谢您对本站的认可!
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:拖动   标记   地图   中心

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!