：Radius圆未绘制

Question

我遵循了Google网站上的指示，但是我的圆圈从来没有被绘制到我的地图上，我也不知道我错过了什么，谁能给我指明正确的方向吗？

下面是我向地图中添加新地址标记和搜索半径的方法(注意，该标记是按预期添加的)：

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

我肯定有人会问我是否配置了一个基map对象，这是在我的初始化器方法中完成的：

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没有"center“属性)

工作代码片段：

​

// 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指南中未演示的额外步骤，即设置radius对象也属于的Map，在我的例子中：

search_radius.setMap(map);