Google Maps JS API - 使用静态中心绘制可调整大小的圆圈

Question

Google Maps JS API - 使用静态中心绘制可调整大小的圆圈

Has*_*han 4 javascript google-maps google-maps-api-3

我要求在给定的静态点上绘制谷歌地图上的圆圈.我试图通过设置圆形设置完成此操作,center如下所示,center: new google.maps.LatLng(-34.397, 150.644)使用DrawingManager.

但是这里的问题是圆圈开始从鼠标点击位置开始绘制,一旦完成圆圈就会捕捉到给定的lat并且lng作为小提琴的演示版:http://jsfiddle.net/hjkety80/1/

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

谢谢

编辑

即使圆心与标记结合也是一个很好的解决方法,如果可能的话

Answer 1

Mat*_* P. 7

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

所以在这个例子中,当加载map时,会向用户显示一个指针光标,当他按下鼠标按钮时,他将开始绘制一个带有中心的圆圈,static_position并根据他点击的位置确定radius新的circle.

该示例包括几何库(&libraries=geometry获取Google Maps API时的注意事项)并利用它的google.maps.geometry.spherical.computeDistanceBetween()函数来计算中心与用户刚刚点击以获得半径之间的距离.如果用户没有立即释放按钮而是移动鼠标,则圆圈将根据用户使用光标的移动自动调整半径.在用户释放鼠标之后,他可以拖动地图并且圈子可以编辑以进行调整.

示例(只需在地图上按鼠标左键即可开始绘图.为了更好地体验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;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，7 月前
查看次数：	2204 次
最近记录：	8 年，3 月前