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);
}

如何让半径显示在给定点周围？任何建议将不胜感激。

Answer 1

发布的代码出现此错误：Uncaught InvalidValueError: setRadius: not a number 但真正的问题是：center: marker.center, 应该是 center: marker.getPosition(),（google.maps.Marker 没有“中心”属性）

工作代码sn-p：

// 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);