个人中心
gpt4 book ai didi

javascript - Google Maps JS API - 绘制具有静态中心的可调整大小的圆

转载 作者：搜寻专家 更新时间：2023-11-01 05:10:05 24 4
gpt4 key购买 nike

我需要从给定的静态点在谷歌地图上画一个圆圈。我尝试通过设置圆圈设置 center 来实现此目的，如下所示，center: new google.maps.LatLng(-34.397, 150.644) 在使用 绘制后绘图管理器。

但这里的问题是圆圈从鼠标点击位置开始绘制，一旦完成，圆圈就会捕捉到给定的 lat 和 lng，如在 fiddle :http://jsfiddle.net/hjkety80/1/

我需要的是，无论我在哪里点击圆圈都应该从给定的静态点开始绘制。如果描述含糊不清，我深表歉意，如果需要，我很乐意澄清更多。非常感谢有关此事的任何帮助/引用。

谢谢

编辑

如果可能，即使圆心绑定(bind)到标记也是一个很好的解决方法

最佳答案

我已经为您创建了一个工作示例。它没有使用 DrawingManager因为它不适合你想要实现的目标，所以我以编程方式更新圆的半径。

所以在这个例子中，当加载 map 时，用户会看到一个指针光标，当他按下鼠标按钮时，他将开始绘制一个以你的 static_position 为中心的圆。和 radius新的 circle是根据他点击的位置来确定的。

该示例包括几何库(在获取 Google map API 时注意 &libraries=geometry)并利用它的 google.maps.geometry.spherical.computeDistanceBetween()函数计算您的中心与用户刚刚单击以获取半径的位置之间的距离(以米为单位)。如果用户没有立即释放按钮而是四处移动鼠标，圆圈将根据用户光标的移动自动调整其半径。用户松开鼠标后，可以拖动 map ，圆圈保持可编辑状态进行调整。

示例(只需在 map 上按鼠标左键即可开始绘图。为了获得更好的体验，请在full page 模式下运行):

var map = null;

function initialize(){
	
  var static_position = new google.maps.LatLng(-34.397, 150.644);
  var the_circle = null;
 
  map = new google.maps.Map(document.getElementById('map-canvas'), {
      center: static_position,
      zoom: 8,
      draggable: false,
      draggableCursor:'pointer'
  });
  
  var mousemove_handler;
  
  google.maps.event.addListener(map, 'mouseup', function(e) {            
      if(mousemove_handler) google.maps.event.removeListener(mousemove_handler);
      map.setOptions({draggable:true, draggableCursor:''}); //allow map dragging after the circle was already created 
      the_circle.setOptions({clickable:true});
  });
  
  google.maps.event.addListenerOnce(map, 'mousedown', function (mousedown_event) {
	  var radius = google.maps.geometry.spherical.computeDistanceBetween(static_position, mousedown_event.latLng); //get distance in meters between our static position and clicked position, which is the radius of the circle
	  the_circle = createCircle(static_position, radius); //create circle with center in our static position and our radius
	  mousemove_handler = google.maps.event.addListener(map, 'mousemove', function(mousemove_event) { //if after mousedown user starts dragging mouse, let's update the radius of the new circle
		  var new_radius = google.maps.geometry.spherical.computeDistanceBetween(static_position, mousemove_event.latLng);
		  console.log(new_radius);
		  the_circle.setOptions({radius:new_radius}); 
	  });
  });
  
}

google.maps.event.addDomListener(window, 'load', initialize);

function createCircle(center, radius) {

    var circle = new google.maps.Circle({
        fillColor: '#ffffff',
        fillOpacity: .6,
        strokeWeight: 1,
        strokeColor: '#ff0000',
        draggable: false,
        editable: true,
        map: map,
        center: center,
        radius: radius,
        clickable:false
    });

    google.maps.event.addListener(circle, 'radius_changed', function (event) {
        console.log('circle radius changed');
    });

    google.maps.event.addListener(circle, 'center_changed', function (event) {
        if(circle.getCenter().toString() !== center.toString()) circle.setCenter(center);
    });
	
    return circle;
}
<script src="//maps.google.com/maps/api/js?sensor=false&libraries=geometry&dummy=.js"></script>
<body style="margin:0px; padding:0px;">
	 <div id="map-canvas" style="height:400px; width:500px;"></div> 
</body>

关于javascript - Google Maps JS API - 绘制具有静态中心的可调整大小的圆，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37338085/

24 4 0
文章推荐： ios - 如何使用多个变换为 CATransform3D 制作动画？
文章推荐： javascript - 如何在 Postman 中使用 SHA-1 动态 key
文章推荐： iphone - 访问文件夹iphone应用程序中的所有图像
文章推荐： javascript - 滚动事件不会传播到父级
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com