Question

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

我在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();，我就无法使该功能正常工作。

Answer 1

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

或者直接将直接位置对象分配到地图中：new google.maps.LatLng（41.878113，-87.629798）确保每件事都好吗

允许用户使用输入的半径在地图上绘制圆

1 个答案: