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