Dessiner un cercle Google Static Maps

J'ai une carte Google Maps Cercle tracé sur la v3 de l'api. Lorsque l'utilisateur a tracé le cercle (ou un polygone si ils le veulent), ils peuvent enregistrer les données au serveur. Si l'utilisateur a choisi un radiale de recherche, le Centre coordonne et le rayon dans les pieds est stocké dans la base de données. Cela signifie que lorsque l'utilisateur de la recharge de sa recherche, il peut passer à travers le cercle de nouveau (comme ci-dessous).

Je vais avoir 1 problème, cependant, qui est lorsque l'utilisateur sélectionne ce qui est de la recherche qu'ils souhaitent utiliser. Il charge le polygone amende, s'ils ont attiré un polygone, et si c'est un cercle il tire à travers le marqueur sur le centre. Cependant, ce que je besoin est une fonction static maps pour tracer un cercle.

source d'informationauteur rickyduck

Un peu en retard dans le jeu, mais rien de ce que j'ai trouvé résolu mon problème (serverside php uniquement, pas de javascript).
J'ai fini par y arriver à la fin et ont détaillé ma méthode ici: http://jomacinc.com/map-radius/ et la version courte est ci-dessous.

Cette fonction PHP renvoie une codé polyligne chaîne de lat/lng points dans un cercle autour du point spécifié, et le rayon spécifié. La fonction nécessite Gabriel Svennerberg PHP polyline codage de la classe disponible ici (http://www.svennerberg.com/examples/polylines/PolylineEncoder.php.txt).

function GMapCircle($Lat,$Lng,$Rad,$Detail=8){
 $R    = 6371;

 $pi   = pi();

 $Lat  = ($Lat * $pi) /180;
 $Lng  = ($Lng * $pi) /180;
 $d    = $Rad /$R;

 $points = array();
 $i = 0;

 for($i = 0; $i <= 360; $i+=$Detail):
   $brng = $i * $pi /180;

   $pLat = asin(sin($Lat)*cos($d) + cos($Lat)*sin($d)*cos($brng));
   $pLng = (($Lng + atan2(sin($brng)*sin($d)*cos($Lat), cos($d)-sin($Lat)*sin($pLat))) * 180) /$pi;
   $pLat = ($pLat * 180) /$pi;

   $points[] = array($pLat,$pLng);
 endfor;

 require_once('PolylineEncoder.php');
 $PolyEnc   = new PolylineEncoder($points);
 $EncString = $PolyEnc->dpEncode();

 return $EncString['Points'];
}

Vous pouvez maintenant utiliser la fonction ci-dessus pour créer un mappage statique.

/* set some options */
$MapLat    = '-42.88188'; //latitude for map and circle center
$MapLng    = '147.32427'; //longitude as above
$MapRadius = 100;         //the radius of our circle (in Kilometres)
$MapFill   = 'E85F0E';    //fill colour of our circle
$MapBorder = '91A93A';    //border colour of our circle
$MapWidth  = 640;         //map image width (max 640px)
$MapHeight = 480;         //map image height (max 640px)

/* create our encoded polyline string */
$EncString = GMapCircle($MapLat,$MapLng, $MapRadius);

/* put together the static map URL */
$MapAPI = 'http://maps.google.com.au/maps/api/staticmap?';
$MapURL = $MapAPI.'center='.$MapLat.','.$MapLng.'&size='.$MapWidth.'x'.$MapHeight.'&maptype=roadmap&path=fillcolor:0x'.$MapFill.'33%7Ccolor:0x'.$MapBorder.'00%7Cenc:'.$EncString.'&sensor=false';

/* output an image tag with our map as the source */
echo '<img src="'.$MapURL.'" />'

function GMapCircle(lat,lng,rad,detail=8){

var uri = 'https://maps.googleapis.com/maps/api/staticmap?';
var staticMapSrc = 'center=' + lat + ',' + lng;
staticMapSrc += '&size=100x100';
staticMapSrc += '&path=color:0xff0000ff:weight:1';

var r    = 6371;

var pi   = Math.PI;

var _lat  = (lat * pi) /180;
var _lng  = (lng * pi) /180;
var d    = (rad/1000) /r;

var i = 0;

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

    var pLat = Math.asin(Math.sin(_lat) * Math.cos(d) + Math.cos(_lat) * Math.sin(d) * Math.cos(brng));
    var 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;

   staticMapSrc += "|" + pLat + "," + pLng;
}

return uri + encodeURI(staticMapSrc);}

Version Javascript

2

Je pense qu'il n'est pas possible de tracer un cercle sur une statique de Google map. Vous auriez besoin de rapprocher le cercle par une polyligne (meilleur de format codé). Cela a déjà été mentionné dans Stackoverflow et il est démontré par exemple par Carte Gratuite Outils.

Basé sur la réponse de JomacVoici une Java/Android version du même code.

Il utilise le PolyUtil classe de Google Maps API Android Utility Library pour coder le chemin.

import android.location.Location;

import com.google.android.gms.maps.model.LatLng;
import com.google.maps.android.PolyUtil;

import java.util.ArrayList;

public class GoogleStaticMapsAPIServices
{
    private static final double EARTH_RADIUS_KM = 6371;

    private static String GOOGLE_STATIC_MAPS_API_KEY = "XXXXXXXXXXXXX";

    public static String getStaticMapURL(Location location, int radiusMeters)
    {
        String pathString = "";
        if (radiusMeters > 0)
        {
            //Add radius path
            ArrayList<LatLng> circlePoints = getCircleAsPolyline(location, radiusMeters);

            if (circlePoints.size() > 0)
            {
                String encodedPathLocations = PolyUtil.encode(circlePoints);
                pathString = "&path=color:0x0000ffff%7Cweight:1%7Cfillcolor:0x0000ff80%7Cenc:" + encodedPathLocations;
            }
        }

        String staticMapURL = "https://maps.googleapis.com/maps/api/staticmap?size=640x320&markers=color:red%7C" +
                location.getLatitude() + "," + location.getLongitude() +
                pathString +
                "&key=" + GOOGLE_STATIC_MAPS_API_KEY;

        return staticMapURL;
    }

    private static ArrayList<LatLng> getCircleAsPolyline(Location center, int radiusMeters)
    {
        ArrayList<LatLng> path = new ArrayList<>();

        double latitudeRadians = center.getLatitude() * Math.PI /180.0;
        double longitudeRadians = center.getLongitude() * Math.PI /180.0;
        double radiusRadians = radiusMeters /1000.0 /EARTH_RADIUS_KM;

        double calcLatPrefix = Math.sin(latitudeRadians) * Math.cos(radiusRadians);
        double calcLatSuffix = Math.cos(latitudeRadians) * Math.sin(radiusRadians);

        for (int angle = 0; angle < 361; angle += 10)
        {
            double angleRadians = angle * Math.PI /180.0;

            double latitude = Math.asin(calcLatPrefix + calcLatSuffix * Math.cos(angleRadians));
            double longitude = ((longitudeRadians + Math.atan2(Math.sin(angleRadians) * Math.sin(radiusRadians) * Math.cos(latitudeRadians), Math.cos(radiusRadians) - Math.sin(latitudeRadians) * Math.sin(latitude))) * 180) /Math.PI;
            latitude = latitude * 180.0 /Math.PI;

            path.add(new LatLng(latitude, longitude));
        }

        return path;
    }
}

Partage ma version C#

private string GMapCircle(double lat, double lng, double rad, int detail = 8)
{
    const string uri = "https://maps.googleapis.com/maps/api/staticmap?";
    var staticMapSrc = "center=" + lat + "," + lng;
    staticMapSrc += "&zoom=16";
    staticMapSrc += "&maptype=satellite";
    staticMapSrc += "&key=[YOURKEYHERE]";
    staticMapSrc += "&size=640x426";
    staticMapSrc += "&path=color:0xff0000ff:weight:1";

    const int r = 6371;
    const double pi = Math.PI;

    var latAux = (lat * pi) /180;
    var longAux = (lng * pi) /180;
    var d = (rad /1000) /r;

    var i = 0;

    if (rad > 0)
    {
        for (i = 0; i <= 360; i += detail)
        {
            var brng = i * pi /180;

            var pLat = Math.Asin(Math.Sin(latAux) * Math.Cos(d) + Math.Cos(latAux) * Math.Sin(d) * Math.Cos(brng));
            var pLng = ((longAux + Math.Atan2(Math.Sin(brng) * Math.Sin(d) * Math.Cos(latAux), Math.Cos(d) - Math.Sin(latAux) * Math.Sin(pLat))) * 180) /pi;
            pLat = (pLat * 180) /pi;

            staticMapSrc += "|" + pLat + "," + pLng;
        }
    }
    else
    {
        //TODO - Add marker
    }

    return uri + staticMapSrc;
}

Vous devez vous connecter pour publier un commentaire.