如何在Google地圖上顯示圈子？

Question

我知道這個問題經常被問到，但是我無法在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> 

我的問題是：如何用圓圈替換我的標記？

非常感謝 ！

Answer 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>