Limiti del paese utilizzando l'API di Google Maps v3

Question

Esiste comunque in modo che sia possibile ottenere i limiti dei Paesi con il valore delle coordinate poligonali utilizzando l'API della mappa di Google.

Answer 1

Vai a questa domanda simile: Google Maps V3: Draw German State Polygons?

Il set di dati Natural Terra in Fusiontables ha poligoni di campagna disponibili in esso. Puoi modellarli come preferisci.

ho usato per creare questo esempio: http://www.geocodezip.com/v3_FusionTablesLayer_worldmap_linkto.html

Ecco un esempio che utilizza una KmlLayer: http://www.geocodezip.com/v3_GoogleEx_layer-kml_world_countries_simple.html

frammento di codice:

var kmlLayer = null; 
 
var map = null; 
 

 
function openIW(layerEvt) { 
 
    if (layerEvt.row) { 
 
    var content = layerEvt.row['admin'].value; 
 
    } else if (layerEvt.featureData) { 
 
    var content = layerEvt.featureData.name; 
 
    } 
 
    document.getElementById('info').innerHTML = "you clicked on:<br>" + content; 
 
} 
 

 
function initialize() { 
 
    var chicago = new google.maps.LatLng(36.4278, -15.9); 
 
    var myOptions = { 
 
    zoom: 0, 
 
    center: chicago, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    } 
 

 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
 

 
    google.maps.event.addListener(map, "click", function() { 
 
    document.getElementById('info').innerHTML = ""; 
 
    }); 
 

 

 
    kmlLayer = new google.maps.KmlLayer('http://www.geocodezip.com/geoxml3_test/world_countries_kml.xml', { 
 
    preserveViewport: true, 
 
    suppressInfoWindows: true 
 
    }); 
 
    kmlLayer.setMap(map); 
 

 
    google.maps.event.addListener(kmlLayer, 'click', openIW); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<table> 
 
    <tr> 
 
    <td> 
 
     <div id="map_canvas" style="height:200px; width:300px;"></div> 
 
    </td> 
 
    <td> 
 
     <div id="info"></div> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

Immagino che ottenendo dei limiti, si desideri disegnare poligono sui loro bordi. Per questo è necessario conoscere le coordinate che aiuteranno a disegnare il poligono. Ho fatto questa cosa solo per gli Stati Uniti. Ho tutte le coordinate di tutti gli stati. E disegno il poligono su ogni stato. Ciò mette in evidenza gli Stati Uniti.

È possibile vedere il mio questo question per la soluzione degli Stati Uniti. Ma per gli altri paesi, è necessario conoscere le coordinate.

Answer 3

Se si desidera un maggiore controllo sui limiti visualizzati, suggerisco di utilizzare il livello google.maps.Data anziché Fusion Tables. Le tabelle di fusione e il livello di fusione hanno i loro limiti, ad esempio sulla mappa del mondo nell'esempio di geocodezip che puoi vedere, se riduci la mappa, i contorni si comprimono in punti. Con Data Layer puoi creare uno stile per definire limiti specifici o nasconderli. Fusion Layer consente solo modifiche di stile condizionale. È anche possibile aggiungere i propri ascoltatori , mouseover, mouseout, è possibile modificare il livello limite al volo e altro ancora. Certo, a volte lo Fusion Layer è un'alternativa migliore, ad esempio se si dispone di dati contenuti in Fusion Tables, ma se si desidera un maggiore controllo, Data Layer è un'alternativa più che degna.

Nel mio prossimo esempio di lavoro mostro i confini dei paesi del mondo e degli Stati Uniti resi utilizzando Data Layer come esempio. Ovviamente puoi usare i tuoi file di confine. Se non si dispone di versione GeoJSON a disposizione (solo Shapefiles o file KML), è possibile convertire in GeoJSON usando utilità come mapshaper (basta eseguire: mapshaper -i myshp.shp -o format=geojson out.geo.json)

var map = null; 
 
    var my_boundaries = {}; 
 
    var data_layer; 
 
    var info_window; 
 

 
    //initialize map on document ready 
 
    $(document).ready(function(){ 
 
    \t var latlng = new google.maps.LatLng(40.723080, -73.984340); //you can use any location as center on map startup 
 
    \t var myOptions = { 
 
    \t \t zoom: 2, 
 
    \t \t center: latlng, 
 
    \t \t mapTypeControl: true, 
 
    \t \t mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, 
 
    \t \t navigationControl: true, 
 
    \t \t mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    \t }; 
 
    \t map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
 
    \t google.maps.event.addListener(map, 'click', function(){ 
 
    \t \t if(info_window){ 
 
    \t \t \t info_window.setMap(null); 
 
    \t \t \t info_window = null; 
 
    \t \t } 
 
    \t }); 
 
\t 
 
\t $('#boundary_load_select').change(function(){ 
 
\t \t if($(this).val()==1){ 
 
\t \t \t loadBoundariesFromGeoJson("https://raw.githubusercontent.com/matej-pavla/Google-Maps-Examples/master/BoundariesExample/geojsons/world.countries.geo.json"); 
 
\t \t }else{ 
 
\t \t \t loadBoundariesFromGeoJson("https://raw.githubusercontent.com/matej-pavla/Google-Maps-Examples/master/BoundariesExample/geojsons/us.states.geo.json"); 
 
\t \t } 
 
\t }); 
 
\t loadBoundariesFromGeoJson("https://raw.githubusercontent.com/matej-pavla/Google-Maps-Examples/master/BoundariesExample/geojsons/world.countries.geo.json"); 
 
    }); 
 

 
    function initializeDataLayer(){ 
 
\t if(data_layer){ 
 
\t \t data_layer.forEach(function(feature) { 
 
\t \t  data_layer.remove(feature); 
 
\t \t }); 
 
\t \t data_layer = null; 
 
\t } 
 
\t data_layer = new google.maps.Data({map: map}); //initialize data layer which contains the boundaries. It's possible to have multiple data layers on one map 
 
    \t data_layer.setStyle({ //using set style we can set styles for all boundaries at once 
 
    \t \t fillColor: 'white', 
 
    \t \t strokeWeight: 1, 
 
    \t \t fillOpacity: 0.1 
 
    \t }); 
 

 
    \t data_layer.addListener('click', function(e) { //we can listen for a boundary click and identify boundary based on e.feature.getProperty('boundary_id'); we set when adding boundary to data layer 
 
    \t \t var boundary_id = e.feature.getProperty('boundary_id'); 
 
    \t \t var boundary_name = "NOT SET"; 
 
    \t \t if(boundary_id && my_boundaries[boundary_id] && my_boundaries[boundary_id].name) boundary_name = my_boundaries[boundary_id].name; 
 
    \t \t if(info_window){ 
 
    \t \t \t info_window.setMap(null); 
 
    \t \t \t info_window = null; 
 
    \t \t } 
 
    \t \t info_window = new google.maps.InfoWindow({ 
 
    \t \t \t content: '<div>You have clicked a boundary: <span style="color:red;">' + boundary_name + '</span></div>', 
 
    \t \t \t size: new google.maps.Size(150,50), 
 
    \t \t \t position: e.latLng, map: map 
 
    \t \t }); 
 
    \t }); 
 
\t 
 
\t data_layer.addListener('mouseover', function(e) { 
 
\t \t data_layer.overrideStyle(e.feature, { 
 
\t \t \t strokeWeight: 3, 
 
\t \t \t strokeColor: '#ff0000' 
 
\t \t }); 
 
\t }); 
 
\t 
 
\t data_layer.addListener('mouseout', function(e) { 
 
\t \t data_layer.overrideStyle(e.feature, { 
 
\t \t \t strokeWeight: 1, 
 
\t \t \t strokeColor: '' 
 
\t \t }); 
 
\t }); 
 
    } 
 

 
    function loadBoundariesFromGeoJson(geo_json_url){ 
 
\t initializeDataLayer(); 
 
    \t $.getJSON(geo_json_url, function(data){ 
 
    \t \t if(data.type == "FeatureCollection"){ //we have a collection of boundaries in geojson format 
 
    \t \t \t if(data.features){ 
 
    \t \t \t \t for(var i = 0; i < data.features.length; i++){ 
 
\t \t \t \t \t var boundary_id = i + 1; 
 
    \t \t \t \t \t var new_boundary = {}; 
 
    \t \t \t \t \t if(!data.features[i].properties) data.features[i].properties = {}; 
 
\t \t \t \t \t data.features[i].properties.boundary_id = boundary_id; //we will use this id to identify boundary later when clicking on it 
 
    \t \t \t \t \t data_layer.addGeoJson(data.features[i], {idPropertyName: 'boundary_id'}); 
 
\t \t \t \t \t new_boundary.feature = data_layer.getFeatureById(boundary_id); 
 
    \t \t \t \t \t if(data.features[i].properties.name) new_boundary.name = data.features[i].properties.name; 
 
\t \t \t \t \t if(data.features[i].properties.NAME) new_boundary.name = data.features[i].properties.NAME; 
 
    \t \t \t \t \t my_boundaries[boundary_id] = new_boundary; 
 
    \t \t \t \t } 
 
    \t \t \t } 
 
\t \t \t if(my_boundaries[24]){ //just an example, that you can change styles of individual boundary 
 
\t \t \t \t data_layer.overrideStyle(my_boundaries[24].feature, { 
 
\t \t \t \t \t fillColor: '#0000FF', 
 
\t \t \t \t \t fillOpacity: 0.9 
 
\t \t \t \t }); 
 
\t \t \t } 
 
    \t \t } 
 
    \t }); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
 
<script type="text/javascript"> 
 
google.load("maps", "3",{other_params:"sensor=false"}); 
 
</script> 
 
<body style="margin:0px; padding:0px;" > 
 
\t <select id="boundary_load_select"> 
 
\t \t <option value="1">Load World Boundaries</option> 
 
\t \t <option value="2">Load US States Boundaries</option> 
 
\t </select> 
 
\t <div id="map_canvas" style="height:400px; width:500px;"></div> 
 
</body>