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没有“中心”属性）

工作代码段：

// 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指南中未说明的额外步骤，即设置半径对象所属的Map，在我的情况下：

search_radius.setMap(map);

Google Maps API：半径圆不绘图

2 个答案: