web-dev-qa-db-fra.com

Google Maps Comment afficher la ville ou une zone

Comment afficher les lieux ou le contour de la zone, exactement comme le font les sites ci-dessous:

 enter image description here

Lien

J'ai cherché des heures dans les documents officiels sur les cartes et je ne savais pas comment ces sites Web indiquaient les frontières de la région. Également examiné quelques vieilles questions et lu ce n'est pas possible alors.

google-mapsgoogle-maps-api-3
40
Chanakya Vadla

D'après mes recherches, pour le moment, il n'y a pas d'option de Google dans l'API Maps v3 et il existe un problème de sur l'API Google Maps datant de 2008. Il y a quelques questions plus anciennes - Ajouter Contour "Zone de recherche" sur le résultat Google Maps , Google a commencé à mettre en surbrillance les zones de recherche en rose. Cette fonctionnalité est-elle disponible dans Google Maps API 3? et vous trouverez peut-être des réponses plus récentes avec des informations mises à jour, mais ce n'est pas une fonctionnalité.

Ce que vous pouvez faire est de dessiner des formes sur votre carte - mais pour cela, vous devez avoir les coordonnées des frontières de votre région.

Maintenant, pour obtenir les limites des zones administratives, vous devrez faire un peu de travail: http://www.gadm.org/country (si vous avez de la chance et que le niveau de détail est suffisant là-bas) .

Sur ce site, vous pouvez télécharger localement un fichier (de nombreux formats disponibles) avec l’extension .kmz. Décompressez-le et vous aurez un fichier .kml qui contient la plupart des zones administratives (villes, villages).

  <?xml version="1.0" encoding="utf-8" ?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document id="root_doc">
<Schema name="x" id="x">
    <SimpleField name="ID_0" type="int"></SimpleField>
    <SimpleField name="ISO" type="string"></SimpleField>
    <SimpleField name="NAME_0" type="string"></SimpleField>
    <SimpleField name="ID_1" type="string"></SimpleField>
    <SimpleField name="NAME_1" type="string"></SimpleField>
    <SimpleField name="ID_2" type="string"></SimpleField>
    <SimpleField name="NAME_2" type="string"></SimpleField>
    <SimpleField name="TYPE_2" type="string"></SimpleField>
    <SimpleField name="ENGTYPE_2" type="string"></SimpleField>
    <SimpleField name="NL_NAME_2" type="string"></SimpleField>
    <SimpleField name="VARNAME_2" type="string"></SimpleField>
    <SimpleField name="Shape_Length" type="float"></SimpleField>
    <SimpleField name="Shape_Area" type="float"></SimpleField>
</Schema>
<Folder><name>x</name>
  <Placemark>
    <Style><LineStyle><color>ff0000ff</color></LineStyle><PolyStyle><fill>0</fill></PolyStyle></Style>
    <ExtendedData><SchemaData schemaUrl="#x">
        <SimpleData name="ID_0">186</SimpleData>
        <SimpleData name="ISO">ROU</SimpleData>
        <SimpleData name="NAME_0">Romania</SimpleData>
        <SimpleData name="ID_1">1</SimpleData>
        <SimpleData name="NAME_1">Alba</SimpleData>
        <SimpleData name="ID_2">1</SimpleData>
        <SimpleData name="NAME_2">Abrud</SimpleData>
        <SimpleData name="TYPE_2">Comune</SimpleData>
        <SimpleData name="ENGTYPE_2">Commune</SimpleData>
        <SimpleData name="VARNAME_2">Oras Abrud</SimpleData>
        <SimpleData name="Shape_Length">0.2792904164402</SimpleData>
        <SimpleData name="Shape_Area">0.00302673357146115</SimpleData>
    </SchemaData></ExtendedData>
      <MultiGeometry><Polygon><outerBoundaryIs><LinearRing><coordinates>23.117561340332031,46.269237518310547 23.108898162841797,46.265365600585937 23.107486724853629,46.264305114746207 23.104681015014762,46.260105133056641 23.101633071899471,46.250000000000114 23.100803375244254,46.249053955078239 23.097520828247184,46.246582031250114 23.0965576171875,46.245487213134822 23.095674514770508,46.244930267334098 23.092174530029354,46.243438720703182 23.088010787963924,46.240383148193473 23.083366394043082,46.238204956054801 23.075212478637809,46.234935760498047 23.071325302123967,46.239696502685547 23.070602416992131,46.241668701171875 23.069700241088924,46.242824554443416 23.068435668945369,46.243541717529354 23.066627502441406,46.244037628173771 23.064964294433651,46.246234893798885 23.062850952148437,46.247486114501953 23.0626220703125,46.248153686523438 23.062761306762752,46.250873565673942 23.061862945556697,46.255172729492301 23.061449050903434,46.256267547607422 23.05998420715332,46.258060455322322 23.057676315307674,46.259838104248161 23.055141448974666,46.262714385986442 23.053401947021484,46.264244079589901 23.049621582031193,46.266674041748161 23.043565750122013,46.268516540527457 23.041521072387695,46.269458770751953 23.034791946411076,46.270542144775334 23.027051925659293,46.27105712890625 23.025453567504826,46.271255493164063 23.022710800170898,46.272083282470703 23.020351409912053,46.271331787109432 23.018688201904297,46.270687103271598 23.015596389770508,46.270793914794922 23.014116287231502,46.271579742431697 23.009817123413143,46.275333404541016 23.006668090820426,46.277061462402401 23.004106521606445,46.279254913330135 23.001775741577205,46.282882690429688 23.005559921264648,46.283077239990348 23.009967803955135,46.28415679931652 23.014947891235465,46.286224365234489 23.019996643066463,46.28900146484375 23.024263381958121,46.292709350586051 23.027633666992301,46.295299530029411 23.028041839599609,46.295692443847656 23.032444000244197,46.294342041015625 23.03491401672369,46.293315887451229 23.044847488403434,46.290401458740234 23.047790527343807,46.28928375244152 23.053009033203239,46.288627624511719 23.057231903076229,46.288341522216797 23.064565658569393,46.287548065185547 23.070388793945426,46.286254882812614 23.075139999389592,46.284847259521428 23.075983047485465,46.284801483154411 23.085800170898494,46.28253173828125 23.098115921020451,46.280982971191406 23.099718093872127,46.280590057373104 23.105833053588981,46.278388977050838 23.112155914306641,46.274082183837947 23.116207122802791,46.270610809326172 23.117561340332031,46.269237518310547</coordinates></LinearRing></outerBoundaryIs></Polygon></MultiGeometry>
  </Placemark>
</Folder>
</Document></kml>

À partir de ce moment, lorsque l'utilisateur recherche une ville/un village, il vous suffit de récupérer les limites et de dessiner ces coordonnées sur la carte - https://developers.google.com/maps/documentation/javascript/overlays#Polygons

J'espère que ceci vous aide! Bonne chance!

 border on Google Map using the above coordinates UPDATE: J'ai fait les frontières de cette ville en utilisant les coordonnées ci-dessus 

                   var ctaLayer = new google.maps.KmlLayer({
                       url: 'https://www.dropbox.com/s/0grhlim3q4572jp/ROU_adm2%20-%20Copy.kml?dl=1'
  });
  ctaLayer.setMap(map);

(J'ai mis un petit fichier kml sur ma Dropbox contenant les frontières d'une seule ville)

Notez que cela utilise le système KML intégré de Google, dans lequel le serveur récupère le fichier, calcule la vue et vous la renvoie - il a une utilisation limitée et je l’ai utilisé pour vous montrer l’apparence des bordures. Dans votre application, vous devriez pouvoir analyser les coordonnées du fichier kml et les placer dans un tableau (comme l'indique la documentation du polygone - https://developers.google.com/maps/documentation/javascript/examples/polygon -arrays ) et les afficher.

Notez qu'il y aura des différences entre les bordures définies par Google sur http://www.google.com/maps et les bordures que vous obtiendrez avec ces données.

Bonne chance!  enter image description here

UPDATE: http://Pastebin.com/x2V1aarJ , http://Pastebin.com/Gh55EDW5 Ce sont les fichiers javascript (ils ont été minifiés, j'ai donc utilisé un outil en ligne pour les rendre lisibles) du site. Si vous n'êtes pas entièrement satisfait de cette solution, n'hésitez pas à l'étudier.

Bonne chance!

62
radu-matei

je cherchais le même et j'ai trouvé la réponse,

la solution consiste à utiliser la carte stylée. Sur le lien ci-dessous, vous pouvez créer vos styles personnalisés à l'aide d'un assistant et le tester simultanément. Assistant Google Map Style

vous pouvez vérifier toutes les options disponibles: ici

voici mon exemple de code qui crée une frontière pour les états et cache toute la route et ses étiquettes.

    var styles = [
  {
    "featureType": "administrative.province",
    "elementType": "geometry.stroke",
    "stylers": [
      { "visibility": "on" },
      { "weight": 2.5 },
      { "color": "#24b0e2" }
    ]
  },{
    "featureType": "road",
    "elementType": "geometry",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "administrative.locality",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "road",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  }
];

  var  geocoder = new google.maps.Geocoder();
   geocoder.geocode({
       'address': "rajasthan"
   }, (results, status)=> {
     var mapOpts = {
       mapTypeId: google.maps.MapTypeId.ROADMAP,
       scaleControl: true,
       scrollwheel: false,
       styles:styles,
       center: results[0].geometry.location,
       zoom:6
     }
     map = new google.maps.Map(document.getElementById("map"), mapOpts);
   });
4
abhirathore2006

j'ai donc une solution qui n'est pas parfaite mais qui a fonctionné pour moi. Utilisez l'exemple de polygone de Google et utilisez le repère Pinpoint sur Google Maps pour obtenir des positions tardives.

Calgary pinpoint

J'ai utilisé ce que j'appelle "copier-coller oculaire" où vous regardez l'écran puis écrivez les chiffres que vous voulez ;-)

<style>
  #map {
    height: 500px;
  }
</style>
<script>

// This example creates a simple polygon representing the Host city of the 
// Greatest Outdoor Show On Earth.

 function initMap() {
   var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 9,
      center: {lat: 51.039, lng: -114.204},
      mapTypeId: 'terrain'
    });

    // Define the LatLng coordinates for the polygon's path.
    var triangleCoords = [
      {lat: 51.183, lng: -114.234},
      {lat: 51.154, lng: -114.235},
      {lat: 51.156, lng: -114.261},
      {lat: 51.104, lng: -114.259},
      {lat: 51.106, lng: -114.261},
      {lat: 51.102, lng: -114.272},
      {lat: 51.081, lng: -114.271},
      {lat: 51.081, lng: -114.234},
      {lat: 51.009, lng: -114.236},
      {lat: 51.008, lng: -114.141},
      {lat: 50.995, lng: -114.142},
      {lat: 50.998, lng: -114.160},
      {lat: 50.984, lng: -114.163},
      {lat: 50.987, lng: -114.141},
      {lat: 50.979, lng: -114.141},
      {lat: 50.921, lng: -114.141},
      {lat: 50.921, lng: -114.210},
      {lat: 50.893, lng: -114.210},
      {lat: 50.892, lng: -114.140},
      {lat: 50.888, lng: -114.139},
      {lat: 50.878, lng: -114.094},
      {lat: 50.878, lng: -113.994},
      {lat: 50.840, lng: -113.954},
      {lat: 50.854, lng: -113.905},
      {lat: 50.922, lng: -113.906},
      {lat: 50.935, lng: -113.877},
      {lat: 50.943, lng: -113.877},
      {lat: 50.955, lng: -113.912},
      {lat: 51.183, lng: -113.910}
    ];

    // Construct the polygon.
    var bermudaTriangle = new google.maps.Polygon({
      paths: triangleCoords,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35
    });
    bermudaTriangle.setMap(map);
  }
</script>


<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/jskey=YOUR_API_KEY&callback=initMap">
</script>

Cela vous donne les grandes lignes pour Calgary. J'ai joint une image ici.

1
Jeremy

J'ai essayé Twitter geo api, échoué.

Google map api, a échoué, jusqu'à présent, vous ne pouvez absolument pas atteindre la limite de ville par n'importe quelle api.

Le point final Twitter api geo ne vous indiquera PAS les limites de la ville,

ce qu'ils vous fournissent est SEULEMENT une boîte englobante avec 5 points (lat, long)

c’est ce que j’obtiens de Twitter api geo pour San Francisco  enter image description here

0
hoogw