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

Link to Google's documentation

**编辑：发现这些：

Drawing a circle Google Static Maps

Encoded Polyline Algorithm Format

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功能来自：Drawing a circle Google Static Maps

Answer 2

我已经用javascript（作为Angular Service）重写了它。

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;
    }
}

谷歌静态地图 - 画一个圆圈

2 个答案: