Google Maps API：半径圆圈没有绘制

Question

我遵循Google Maps API网站上给出的指示，但我的圈子永远不会被绘制到我的地图上，而且我不了解我错过了什么，有没有人可以指出我在正确的方向？

这里是我的方法来添加新的地址标记和搜索半径地图（注意标记添加如预期）：

// Add the users point to the map 
function addAddress() { 

    // Get the users current location 
    var location  = document.getElementById("P1_LOCATION").value; // Users postcode 
    var radius_size = document.getElementById("P1_RADIUS").value; // Users radius size in miles 
    var search_radius; 

    // Translate the users location onto the map 
    geocoder.geocode({ 'address': location}, function(results, status) { 
     if(status == google.maps.GeocoderStatus.OK) { 

      // Center around the users location 
      map.setCenter(results[0].geometry.location); 

      // Place a marker where the user is situated 
      var marker = new google.maps.Marker({ 
       map:map, 
       position: results[0].geometry.location 
      }); 

      // configure the radius 
      // Construct the radius circle 
      var radiusOptions = { 
       strokeColor: "#FF0000", 
       strokeOpacity: 0.8, 
       strokeWeight: 2, 
       fillColor: '#FF0000', 
       fillOpacity: 0.35, 
       map: map, 
       center: marker.center,  // I want to set the center around the users location 
       radius: radius_size  // I want the radius to be in miles, how do I do this? 
      }; 

      // add the radius circle to the map 
      search_radius = new google.maps.Circle(radiusOptions); 
     } 
    }); 
} 

而且我敢肯定有人会问，如果我已经配置底图的对象，这是在我的初始化方法进行：

var geocoder; 
var map; 

// Create our base map object 
function initialize() 
{ 
    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng(0,0); 
    var mapOptions = { 
     zoom: 12, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map"), mapOptions); 
} 

我将如何去获取半径显示围绕给点？任何suggestiosn将不胜感激。

Answer 1

我得到这个错误与发布代码：Uncaught InvalidValueError: setRadius: not a number 但真正的问题是这样的：center: marker.center,应该是center: marker.getPosition(),（一google.maps.Marker没有一个“中心”属性）

工作代码片段：

// Add the users point to the map 
 
function addAddress() { 
 

 
    // Get the users current location 
 
    var location = document.getElementById("P1_LOCATION").value; // Users postcode 
 
    var radius_size = parseFloat(document.getElementById("P1_RADIUS").value); // Users radius size in meters (unless you scale it to miles) 
 
    var search_radius; 
 

 
    // Translate the users location onto the map 
 
    geocoder.geocode({ 
 
    'address': location 
 
    }, function(results, status) { 
 
    if (status == google.maps.GeocoderStatus.OK) { 
 

 
     // Center around the users location 
 
     map.setCenter(results[0].geometry.location); 
 

 
     // Place a marker where the user is situated 
 
     var marker = new google.maps.Marker({ 
 
     map: map, 
 
     position: results[0].geometry.location 
 
     }); 
 

 
     // configure the radius 
 
     // Construct the radius circle 
 
     var radiusOptions = { 
 
     strokeColor: "#FF0000", 
 
     strokeOpacity: 0.8, 
 
     strokeWeight: 2, 
 
     fillColor: '#FF0000', 
 
     fillOpacity: 0.35, 
 
     map: map, 
 
     center: marker.getPosition(), // I want to set the center around the users location 
 
     radius: radius_size // I want the radius to be in miles, how do I do this? 
 
     }; 
 

 
     // add the radius circle to the map 
 
     search_radius = new google.maps.Circle(radiusOptions); 
 
    } 
 
    }); 
 
} 
 
var geocoder; 
 
var map; 
 

 
// Create our base map object 
 
function initialize() { 
 
    geocoder = new google.maps.Geocoder(); 
 
    var latlng = new google.maps.LatLng(0, 0); 
 
    var mapOptions = { 
 
    zoom: 12, 
 
    center: latlng, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    } 
 
    map = new google.maps.Map(document.getElementById("map"), mapOptions); 
 
} 
 

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

html, 
 
body, 
 
#map { 
 
    height: 500px; 
 
    width: 500px; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<input id="P1_LOCATION" value="08646" type="text" /> 
 
<input id="P1_RADIUS" value="10000" type="text" /> 
 
<input id="geocode" value="geocode" type="button" onclick="addAddress()" /> 
 
<div id="map" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>

Answer 2

对于将来遇到同样问题的任何人，请确保您采取了未在API指南中演示的额外步骤，即在我的情况下设置半径对象所属的地图：

search_radius.setMap(map);