[英]How to show circle on Google Maps?
I know that this question is asked frequently, but I have a problem to show circles on my Google Map. 我知道这个问题经常被问到,但是我无法在Google地图上显示圈子。
Actually, I get markers on my maps. 实际上,我在地图上得到了标记。
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>
My question is: How to replace my markers by circles? 我的问题是:如何用圆圈替换我的标记?
Thanks a lot ! 非常感谢 !
You can add "Circles" to your map as described in the official API documentation. 您可以按照官方API文档中的说明在地图上添加“圆圈”。
https://developers.google.com/maps/documentation/javascript/examples/circle-simple https://developers.google.com/maps/documentation/javascript/examples/circle-simple
Important is this part: 重要的是这一部分:
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
});
It's pretty straight forward. 非常简单。
Instead of citymap[city].center
you need to pass your lat/lang object, for example {lat: 41.878, lng: -87.629}
. 您需要传递lat / lang对象,而不是
citymap[city].center
,例如{lat: 41.878, lng: -87.629}
。
For the radius you can pass any number value. 对于半径,您可以传递任何数字值。 In the maps demo they used the population.
在地图演示中,他们使用了人口。
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.