允许用户使用他们输入的半径在地图上绘制圆圈答案

【问题标题】：Allow user to draw circle on the map with radius that they entered允许用户使用他们输入的半径在地图上绘制圆圈
【发布时间】：2013-10-20 16:31:33
【问题描述】：

我想到的是用户首先输入半径的输入框。然后在它旁边的一个按钮上将一个可拖动的圆圈添加到地图上。

我在 Google Map V3 中尝试过 DrawingMode。它忽略了该半径设置。

var map;
var pos;

function initialize() {
  var mapOptions = {
    zoom: 16,
    scaleControl: false,
    zoomControl: false,
    rotateControl: false,
    streetViewControl: false,
    panControl:false,

    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

function setCurrentLocation(){
navigator.geolocation.getCurrentPosition(function(position) {
     pos = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);
     map.setCenter(pos);
})}


setCurrentLocation();

function drawCircle(){
        var draw_circle = new google.maps.Circle({
        center: pos,
        radius: 200,
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.35,
        map: map})}


$( "#addcircle" ).click(function() {
  drawCircle();
});

我已尝试使用上述方法。但似乎变量pos 在drawCircle 函数中无效。

$( "#addcircle" ).click(function() {
  drawCircle();
});

这部分与一个特定的按钮有关，一旦单击它就应该添加圆圈。

function setCurrentLocation(){
navigator.geolocation.getCurrentPosition(function(position) {
     pos = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);
     map.setCenter(pos);

     function drawCircle(){
        var draw_circle = new google.maps.Circle({
        center: pos,
        radius: 200,
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.35,
        map: map})}
        ;
        drawCircle();

})}

如果我更改代码以测试pos，则可以。实际发送到圆的pos坐标是有效的。

但是，一旦我将drawCircle(); 与按钮单击处理程序一起放置，我就无法使该功能工作。

【问题讨论】：

请发布您尝试过但不起作用的代码。
或者看看this example
抱歉，缺少代码。

标签： javascript jquery html jquery-mobile google-maps-api-3

【解决方案1】：

你确定navigator.geolocation.getCurrentPosition 我的意思是为什么您不检查 setCurrentLocation() 中的 console.log(position.coords) 确保您将正确的对象“pos”发送到圆圈中

或直接将位置对象分配到地图中：new google.maps.LatLng(41.878113, -87.629798) 确保一切正常

【讨论】：

'坐标{速度：null，航向：null，altitudeAccuracy：null，准确度：70，高度：null…}准确度：70 高度：nullaltitudeAccuracy：null航向：null 纬度：1.4383010999999999 经度：103.79765259999999 speed: null proto: Coordinates constructor: function Coordinates() { [native code] } proto: Object' 这是我从控制台日志中得到的。这是正确的东西发送到 pos 吗？或者我如何更改它以便它只发送坐标？
function setCurrentLocation(){ navigator.geolocation.getCurrentPosition(function(position) { pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); map.setCenter(pos); function drawCircle(){ var draw_circle = new google.maps.Circle({ center: pos, radius: 200, strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35, map: map})} ; drawCircle(); })} 我更改代码来测试 pos，这行得通。