Granice krajów za pomocą interfejsu Google Map API v3

Question

Czy jest tak, że mogę uzyskać wartości graniczne krajów o wartościach współrzędnych wielokątów za pomocą interfejsu Google map API.

Answer 1

Zobacz ten podobny pytanie: Google Maps V3: Draw German State Polygons?

Natural Ziemia zbiór danych w FusionTables ma wielokątów krajów dostępne w nim. Możesz je stylizować według własnego uznania.

użyłem go do stworzenia tego przykład: http://www.geocodezip.com/v3_FusionTablesLayer_worldmap_linkto.html

Oto przykład, który wykorzystuje KmlLayer: http://www.geocodezip.com/v3_GoogleEx_layer-kml_world_countries_simple.html

fragment kodu:

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

Sądzę, że poprzez uzyskanie granic, chcesz narysować wielokąt na swoich granicach. W tym celu musisz znać współrzędne, które pomogą narysować wielokąt. Zrobiłem to tylko dla USA. Mam wszystkie współrzędne wszystkich stanów. I rysuję wielokąt na każdym stanie. To sprawia, że ​​USA są podświetlone.

Możesz zobaczyć mój question dla amerykańskiego rozwiązania. Ale dla innych krajów musisz znać współrzędne.

Answer 3

Jeśli chcesz mieć większą kontrolę nad wyświetlanymi granicami, sugeruję użycie warstwy google.maps.Data zamiast Fusion Tables. Tabele Fusion i Fusion Layer mają swoje ograniczenia, na przykład na mapie świata w przykładzie geocodezip widać, że jeśli pomniejszysz mapę, granice zawalą się do punktów. Dzięki Data Layer możesz nadać określone granice lub je ukryć. Fusion Layer zezwala tylko na zmiany stylu warunkowego. Możesz także dodać własne detektory click, mouseover, mouseout, możesz zmienić warstwę graniczną w locie i więcej. Oczywiście czasami lepszym rozwiązaniem jest Fusion Layer, jeśli na przykład masz dane zawarte w tabelach Fusion, ale jeśli chcesz mieć większą kontrolę, to Data Layer jest więcej niż godną alternatywą.

W następnym przykładzie pokazuję granice krajów świata i stanów USA, które zostały przedstawione jako Data Layer. Możesz oczywiście użyć własnych plików granicznych. Jeśli nie masz wersję GeoJSON dostępne (tylko Shapefiles lub pliki KML), można przekonwertować je na GeoJSON za pomocą narzędzi takich jak mapshaper (wystarczy uruchomić: 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>