Попытка создать похожий эффект на моей карте Googlemaps.
Используется плагин Ionic Native Google Maps.
В настоящее время у меня есть следующий код.
Точки используются для создания наложенного многоугольника по всей карте, а затем я использую функцию drawCircle для рисования круга, добавляя точки lat / lng к массиву extp.push({lat: ey,lng: ex});
points = [
{lat: 85,lng: 90},
{lat: 85,lng: 0.1},
{lat: 85,lng: -90},
{lat: 85,lng: -179.9},
{lat: 0,lng: -179.9},
{lat: -85,lng: -179.9},
{lat: -85,lng: -90},
{lat: -85,lng: 0.1},
{lat: -85,lng: 90},
{lat: -85,lng: 179.9},
{lat: 0,lng: 179.9},
{lat: 85,lng: 179.9} ];
drawCircle(point, radius, dir) {
let lat;
let lng;
var d2r = Math.PI / 180; // degrees to radians
var r2d = 180 / Math.PI; // radians to degrees
var earthsradius = 3963; // 3963 is the radius of the earth in miles or 6371 in km
var points = 32;
// find the raidus in lat/lon
var rlat = (radius / earthsradius) * r2d;
var rlng = rlat / Math.cos(point.lat() * d2r);
var extp = new Array();
if (dir==1) {var start=0;var end=points+1} // one extra here makes sure we connect the ends
else {var start=points+1;var end=0}
for (var i=start; (dir==1 ? i < end : i > end); i=i+dir) {
var theta = Math.PI * (i / (points/2));
let ey = point.lng() + (rlng * Math.cos(theta)); // center a + radius x * cos(theta)
let ex = point.lat() + (rlat * Math.sin(theta)); // center b + radius y * sin(theta)
extp.push({lat: ey,lng: ex});
}
return extp;
}
Загрузка карты здесь
this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => {
console.log('Map is ready!');
this.geolocation.getCurrentPosition({enableHighAccuracy: true}).then((resp) => {
console.log(resp.coords.latitude);
console.log(resp.coords.longitude);
this.myLat = resp.coords.latitude;
this.myLong = resp.coords.longitude;
let loc: LatLng;
loc = new LatLng (resp.coords.latitude, resp.coords.longitude);
this.map.addPolygon({
'points': this.points,
'strokeColor': "blue",
'holes': this.drawCircle(loc,10,-1), //when adding this I lose the overlay and the hole is not drawn. When I remove it, it starts to work again but without a hole.
'strokeWidth': 4,
'fillColor': "#222222"
});
this.map.moveCamera({
'target': loc,
'zoom': 14
});
this.map.addMarker({
'position': loc,
'title': "Hello GoogleMap for Cordova!",
'icon' : 'https://image.flaticon.com/icons/svg/147/147144.svg'
});
}).catch((error) => {
console.log('Error getting location', error);
});
});