Google 静态地图 - 画一个圆圈

Question

尝试创建一个带有像this

这样的圆圈的静态地图

在

path

参数中我不明白如何获取

enc

部分。这似乎是一些编码路径，包括纬度/经度和圆的大小。

https://maps.googleapis.com/maps/api/staticmap?
center=51.44208,5.47308&
zoom=14&
size=693x648&
path=color:blue|fillcolor:0x00d2c196|weight:1|
enc%3Aad_yHofn%60%40JyFh%40sF%60AcFxAmElBqD~BoCnCiBtC_AzCUzCTvC~%40lChB~BnCnBpDxAlE%60AbFf%40rFLxFMxFg%40rFaAbFyAlEoBpD_CnCmChBwC~%40%7BCT%7BCUuC_AoCiB_CoCmBqDyAmEaAcFi%40sFKyF%3F%3F

Google 文档链接

**编辑：找到这些：

画一个圆圈谷歌静态地图

编码折线算法格式

Answer 1

这是我的想法：

function funcStaticMapWithCircle($lat, $lng) {

    //$lat & $lng are center of circle

    $mapCentLat =   $lat + 0.002;
    $mapCentLng =   $lng - 0.011;
    $mapW =         600;
    $mapH =         600;
    $zoom =         14;

    $circRadius =       0.75;         //Radius in km
    $circRadiusThick =  1;
    $circFill =         '00BFFF';
    $circFillOpacity =  '60';
    $circBorder =       'red';

    $encString = GMapCircle($lat,$lng,$circRadius); //Encoded polyline string


    $src =  'https://maps.googleapis.com/maps/api/staticmap?';
    $src .= 'center=' .$mapCentLat. ',' .$mapCentLng. '&';
    $src .= 'zoom=' .$zoom. '&';
    $src .= 'size=' .$mapW. 'x' .$mapH.'&';
    $src .= 'maptype=roadmap&';
    $src .= 'style=feature:water|element:geometry.fill|color:0x9bd3ff&';
    $src .= 'path=';
    $src .= 'color:0x' .$circBorder. '00|';
    $src .= 'fillcolor:0x' .$circFill.$circFillOpacity. '|';
    $src .= 'weight:' .$circRadiusThick. '|';
    $src .= 'enc:' .$encString;


    return $src;
}

GMapCircle 函数来自：画圆Google Static Maps

Answer 2

我用 javascript 重写了它（作为 Angular 服务）。

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { environment } from "environments/environment";

@Injectable({
    providedIn: "root",
})
export class StaticMapService {
    constructor(private httpClient: HttpClient) {}

    getStaticMapBase64(
        lat: number,
        lng: number,
        radius: string,
        zoom: number
    ): Promise<string> {
        return new Promise((resolve) => {
            this.httpClient
                .get(`https://maps.googleapis.com/maps/api/staticmap`, {
                    params: {
                        key: environment.googleMapsApiKey,
                        center: `${lat},${lng}`,
                        size: `640x480`,
                        zoom: `${zoom}`,
                        path: `fillcolor:0xff00002D|color:0xf96332ff|enc:${this.drawCirclePath(
                            lat,
                            lng,
                            radius
                        )}`,
                    },
                    responseType: "blob",
                })
                .toPromise()
                .then((imgBlob) => {
                    const reader = new FileReader();
                    reader.readAsDataURL(imgBlob);
                    reader.onloadend = function () {
                        resolve(reader.result.toString());
                    };
                });
        });
    }

    private drawCirclePath(lat, lng, radius, detail = 8) {
        let R = 6371;

        let pi = Math.PI;

        lat = (lat * pi) / 180;
        lng = (lng * pi) / 180;
        let d = radius / R;

        let points: any = [];
        let i = 0;

        for (i = 0; i <= 360; i += detail) {
            let brng = (i * pi) / 180;

            let plat = Math.asin(
                Math.sin(lat) * Math.cos(d) +
                    Math.cos(lat) * Math.sin(d) * Math.cos(brng)
            );
            let plng =
                ((lng +
                    Math.atan2(
                        Math.sin(brng) * Math.sin(d) * Math.cos(lat),
                        Math.cos(d) - Math.sin(lat) * Math.sin(plat)
                    )) *
                    180) /
                pi;
            plat = (plat * 180) / pi;

            let currentPoints: any = [plat, plng];
            points.push(currentPoints);
        }

        return this.createEncodings(points);
    }

    private createEncodings(coords) {
        var i = 0;

        var plat = 0;
        var plng = 0;

        var encoded_points = "";

        for (i = 0; i < coords.length; ++i) {
            var lat = coords[i][0];
            var lng = coords[i][1];

            encoded_points += this.encodePoint(plat, plng, lat, lng);

            plat = lat;
            plng = lng;
        }

        return encoded_points;
    }

    private encodePoint(plat, plng, lat, lng) {
        var dlng = 0;
        var dlat = 0;

        var late5 = Math.round(lat * 1e5);
        var plate5 = Math.round(plat * 1e5);

        var lnge5 = Math.round(lng * 1e5);
        var plnge5 = Math.round(plng * 1e5);

        dlng = lnge5 - plnge5;
        dlat = late5 - plate5;

        return this.encodeSignedNumber(dlat) + this.encodeSignedNumber(dlng);
    }

    private encodeSignedNumber(num) {
        var sgn_num = num << 1;

        if (num < 0) {
            sgn_num = ~sgn_num;
        }

        return this.encodeNumber(sgn_num);
    }

    private encodeNumber(num) {
        var encodeString = "";

        while (num >= 0x20) {
            encodeString += String.fromCharCode((0x20 | (num & 0x1f)) + 63);
            num >>= 5;
        }
        encodeString += String.fromCharCode(num + 63);

        return encodeString;
    }
}

Answer 3

GMapCircle 的所有答案都可能会创建一个巨大的 URL，这将使 Google 响应错误。如果你有 2 个或更多圆圈，将无法创建此静态地图。

为了创建一个圆圈，我做了一个小修改，而不是一个真正的圆圈，我所做的只是一条非常小的线，但画笔大小与圆圈直径相同。 将会发生的事情是它看起来像一个圆圈。

我的GMapCircle功能：

function GMapCircle(color, lat,lng,rad, zoom){
     var staticMapSrc = '&path=color:0x' + color + '|weight:' + parseInt(rad*Math.pow(2, zoom)/72223);

     staticMapSrc += "|" + lat.toFixed(4) + "," + lng.toFixed(4);
                staticMapSrc += "|" + lat.toFixed(4) + "," + (lng + 0.0001).toFixed(4);
     return staticMapSrc
}

在上面的函数中，我在经度上添加了一个小的 0.0001 值只是为了制作一条线，但这个值太小了，重要的是画笔的大小（粗细）。

重量（画笔的大小）取决于您想要的直径（rad），并且会随着变焦而减小。

这将为您想要的每个圆圈创建小线，使其看起来像一个圆圈。我可以用这段代码容纳近 200 个圆圈，而不会使 URL 太长。