0

nous avons la liste des lat-long et nous voulons afficher sur google map. Voici la liste de la latitude et la longitude, je m'attends à générer des cartes google personnalisées pour cette liste.Existe-t-il un moyen de générer une zone de carte en utilisant la liste de latitude et de longitude?

Input: 
12.123456, 72.123456 
12.123654, 72.366666 
.... 
.... 
12.123456, 72.123456 

Output: 

<code>area surround by red border is required output</code>

Remarque: ces entrées sont des références, pas de données réelles.

+1

polygone peut vous aide. https://developers.google.com/maps/documentation/javascript/examples/polygon-arrays –

+0

Yep poylogn! Aussi, si vous essayez avec 4 points de plus (ce qui bien sûr vous le ferez) Cochez [cette réponse] (https://stackoverflow.com/questions/45056207/how-to-draw-a-polygon-in-google-map -using-many-coordinates/45060097 # 45060097) J'ai écrit sur la façon de trier vos points pour éviter les croisements de lignes etc ... –

+0

merci @HardeepSingh Résolu! jsfiddle lien ici https://jsfiddle.net/rjnitt/12g7jL8y/2/ –

Répondre

0

Vous devez remplacer le votreAPI_KEYpour voir la sortie correctement.

// This example creates a simple polygon representing the Bermuda Triangle. 
 

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

 
    // Define the LatLng coordinates for the polygon's path. 
 
    // Your coordinates should go here. 
 
    var triangleCoords = [ 
 
    {lat: 25.774, lng: -80.190}, 
 
    {lat: 18.466, lng: -66.118}, 
 
    {lat: 32.321, lng: -64.757}, 
 
    {lat: 25.774, lng: -80.190} 
 
    ]; 
 

 
    // Construct the polygon. 
 
    var bermudaTriangle = new google.maps.Polygon({ 
 
    paths: triangleCoords, 
 
    strokeColor: '#FF0000', 
 
    strokeOpacity: 0.8, 
 
    strokeWeight: 1, 
 
    fillColor: 'red', 
 
    fillOpacity: 0.1 
 
    }); 
 
    bermudaTriangle.setMap(map); 
 
}
/* Always set the map height explicitly to define the size of the div 
 
* element that contains the map. */ 
 
#map { 
 
    height: 100%; 
 
} 
 

 
/* Optional: Makes the sample page fill the window. */ 
 
html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
}
<div id="map"></div> 
 

 
<!-- Replace the value of the key parameter with your own API key. --> 
 
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"> 
 
</script>