如何在地图上围绕特定城市画一个圆圈？

Question

我正在做一个项目，我想在谷歌地图上围绕项目的位置画一个圆圈。在我下面的代码中，如果我点击show 标签，那么它应该在谷歌地图上显示项目位置周围的圆圈：

<div class="tab-pane" id="show">
 <p>
    <span class="heading_size">show:</span>
 </p>

 <p class="text-justify mb-0 pb-5">
   <!-- <? php echo strtolower($data['item']->item_address); ?> -->
    <div id="map" style="width:100%;height:500px"></div> 

    <script>
    function myMap() {
      var amsterdam = new google.maps.LatLng(52.395715,4.888916);
      var mapCanvas = document.getElementById("map");
      var mapOptions = {center: amsterdam, zoom: 7};
      var map = new google.maps.Map(mapCanvas,mapOptions); 

      var myCity = new google.maps.Circle({
        center: amsterdam,
        radius: 50000,
        strokeColor: "#0000FF",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#0000FF",
        fillOpacity: 0.4
      });

      myCity.setMap(map);
    }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
 </p>
</div>

问题陈述：

下面是我打印item_address时打印出来的项目详细信息，如上面的代码（此时注释）使用echo。所以我需要使用下面的数据在下面的json中围绕city字段做一个圆圈。例如：在下面的 json - city 字段中是ottawa，所以它应该在渥太华市周围环绕。到目前为止，我可以围绕特定的纬度/经度圈，但是如果我有一个城市名称，那么我怎么能围绕那个城市圈呢？这可以吗？

{
    "address_id": 115,
    "country": "canada",
    "state": "ontario",
    "city": "ottawa",
    "street": "riverside drive",
    "number": "1750",
    "postal": "k1g 3t6"
}

Answer 1

您需要使用地理编码来找出城市在地图上的位置。您可以查看下面的工作示例。

我创建了以下函数，可让您在传递给该函数的任何城市周围画圈：

google.maps.event.addDomListener(window, "load", function() {
  myMap();
});

function myMap() {
  //add global geocoder
  window.geocoder = new google.maps.Geocoder();

  var mapCanvas = document.getElementById("map_div");
  var mapOptions = {
    zoom: 7,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: new google.maps.LatLng(33.808678, -117.918921)
  };
  window.map = new google.maps.Map(mapCanvas, mapOptions);

  drawCircleAroundCity('ottawa');
}

function drawCircleAroundCity(cityName) {
  if (!cityName) return;
  if (!window.geocoder) throw "Geocoder is not loaded";

  window.geocoder.geocode({
    'address': cityName
  }, function(results, status) {
    if (status == 'OK') {
      addCircle(results[0].geometry.location, true);
    } else {
      throw 'Unable to find address: ' + address;
    }
  });
}

function addCircle(position, recenter) {
  if (typeof(position) != 'object') return;
  if (!window.map) throw "Map is not loaded";

  var myCity = new google.maps.Circle({
    center: position,
    radius: 50000,
    strokeColor: "#0000FF",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#0000FF",
    fillOpacity: 0.4
  });

  myCity.setMap(window.map);

  if (recenter)
    window.map.setCenter(position);
}

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<div id="map_div" style="height: 400px;"></div>

Answer 2

使用 Google 地图 Geocoding API 并根据您的 JSON 字段构建适当的请求。 API 将返回一个包含纬度和经度值的 JSON 对象。

您的 API 请求将采用以下形式：

https://maps.googleapis.com/maps/api/geocode/json?address=1750+riverside+drive,ottawa,ontario,canada&key=YOUR_API_KEY

Answer 3

将城市翻译成 LatLon 并不会太难，但这里有一些代码我可以盲目地复制而不用想太多。 HTH。

    var circleOptions = {
      clickable: true,
      draggable: true,
      editable: true,
      visible: false,
      strokeColor: 'gray',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: 'gray',
      fillOpacity: 0.35,
      center: marker.getPosition()
    };

    radarCircle = new radarView(new google.maps.Circle(circleOptions));

    google.maps.event.addDomListener(radarCircle,    'center_changed', reScope);
    google.maps.event.addDomListener(radarCircle,    'radius_changed', reScope);

function radarView(superBase)
{
    this.__proto__ = superBase;

    if (this instanceof google.maps.Circle) {
        augmentCircle.apply(this);
    } else if (this instanceof google.maps.Rectangle) {
        augmentRectangle.apply(this);
    } else {
        Tier3Toolbox.reportError({header:"Internal error", 
                message:"Inheriting from unknown object"});
    }

    this.doX = function(x){return "x is>" + x;};

    return this;
}

function augmentCircle()
{
    this.moveBorder = function()
    {
        google.maps.event.trigger(radarCircle,"center_changed");
    }
}

function augmentRectangle()
{
    this.moveBorder = function()
    {
        google.maps.event.trigger(radarRectangle,"bounds_changed");
    }
}


function reScope() {

    var searchReq = {'cmd':'search', 'scopeVintage':scopeVintage};
    if (radarShape.getCenter) {
        searchReq.checker = 0;
        var currCenter = radarCircle.getCenter();
        searchReq.centerLat = currCenter.lat();
        searchReq.centerLng = currCenter.lng();         
        searchReq.radius = radarCircle.getRadius();
    } else {
        searchReq.checker = 1;
        searchReq.SWLat = radarShape.getBounds().getSouthWest().lat();
        searchReq.SWLng = radarShape.getBounds().getSouthWest().lng();
        searchReq.NELat = radarShape.getBounds().getNorthEast().lat();
        searchReq.NELng = radarShape.getBounds().getNorthEast().lng();
    }

    facFinder.postMessage(searchReq);
}