如何在谷歌地图上显示圆圈？

Posted 2023-03-28

【中文标题】如何在谷歌地图上显示圆圈？

【英文标题】：How to show circle on Google Maps?

【发布时间】：2018-06-24 22:17:38

【问题描述】：

我知道这个问题经常被问到，但我在 Google 地图上显示圆圈时遇到了问题。

实际上，我的地图上有标记。

import htmlTemplate from './activityDetails.html';

export default 

  template: htmlTemplate,

  require: 
    parent: '^main'
  ,

  bindings: 
    activity: '<'
  ,

  controller: function controller(MapsService, GeolocationService, NgMap, $log) 
    'ngInject';

    this.$onInit = () => 
      // Load Google Maps API script
      MapsService.loadGoogleApi().then(() => 
        this.loaded = true;
        NgMap.getMap().then((map) => 
          this.map = map;
          $log.info('activityDetails component init');
          this.activity.lat = this.activity.location.coordinates[0];
          this.activity.lng = this.activity.location.coordinates[1];
          // Save each marker in its user object to facilitate hover
          this.createMarkers();
          // Set geolocation notification hook
          this.setGeolocationHook();
        );
      );
    ;
  
;

<div class="block-map col m6">
    <ng-map class="map" center="$ctrl.activity.lat, $ctrl.activity.lng" zoom="16">
      <marker position="$ctrl.activity.lat, $ctrl.activity.lng"></marker>
    </ng-map>
  </div>

我的问题是： 如何用圆圈替换我的标记？

非常感谢！

【参考方案1】：

您可以按照官方 API 文档中的说明将“圆圈”添加到地图中。

https://developers.google.com/maps/documentation/javascript/examples/circle-simple

这部分很重要：

var cityCircle = new google.maps.Circle(
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35,
  map: map,
  center: citymap[city].center,
  radius: Math.sqrt(citymap[city].population) * 100
);

这很简单。

您需要传递 lat/lang 对象，而不是 citymap[city].center，例如 lat: 41.878, lng: -87.629。

对于半径，您可以传递任何数值。在地图演示中，他们使用了人口。

对于 NG-Map：

<shape name="circle" ng-repeat="circle in vm.circles" no-watcher="true"
  stroke-color="#FF0000"
  stroke-opacity="0.8"
  stroke-weight="2"
  fill-color="#FF0000"
  fill-opacity="0.35"
  center="circle.position"
  radius="circle.radius">
</shape>