Ländergrenzen mit Google Map API v3

Question

Gibt es trotzdem, so kann ich Grenzen von Ländern in Polygonkoordinaten Wert mit Google Map API erhalten.

Answer 1

diese ähnliche Frage Siehe: Google Maps V3: Draw German State Polygons?

Die Natural Earth Data Set in Fusion hat Land Polygone in ihm vorhanden. Sie können sie nach Belieben gestalten.

habe ich es dieses Beispiel zu erstellen: http://www.geocodezip.com/v3_FusionTablesLayer_worldmap_linkto.html

Hier ist ein Beispiel, das eine KmlLayer verwendet: http://www.geocodezip.com/v3_GoogleEx_layer-kml_world_countries_simple.html

Code-Schnipsel:

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

Ich schätze, indem Sie Grenzen erhalten, möchten Sie Polygon auf ihren Grenzen zeichnen. Dafür müssen Sie die Koordinaten kennen, die Ihnen helfen, das Polygon zu zeichnen. Ich habe dieses Ding nur für die USA gemacht. Ich habe alle Koordinaten aller Staaten. Und ich zeichne Polygon auf jeden Zustand. Das macht US hervorgehoben.

Sie können meine dies question für US-Lösung sehen. Aber für andere Länder müssen Sie die Koordinaten kennen.

Answer 3

Wenn Sie mehr Kontrolle über die angezeigten Grenzen haben möchten, empfehle ich die Verwendung von google.maps.Data Layer anstelle von Fusion Tables. Fusionstabellen und Fusion Layer haben ihre Grenzen, zum Beispiel auf der Weltkarte im Geocodezip-Beispiel können Sie sehen, dass wenn Sie die Karte verkleinern, die Grenzen zu Punkten zusammenfallen. Mit Data Layer können Sie bestimmte Grenzen anpassen oder sie ausblenden. Fusion Layer erlaubt nur bedingte Stiländerungen. Sie können auch Ihre eigenen click, mouseover, mouseout Listener hinzufügen, können Sie die Grenzschicht im laufenden Betrieb und mehr ändern. Natürlich ist manchmal Fusion Layer die bessere Alternative, zum Beispiel, wenn Sie Daten in Fusion Tabellen enthalten, aber wenn Sie mehr Kontrolle wollen Data Layer ist mehr als eine würdige Alternative.

In meinem nächsten Arbeitsbeispiel zeige ich Welt Land und US-Bundesstaaten Grenzen gerendert mit Data Layer als Beispiel. Sie können natürlich Ihre eigenen Grenzdateien verwenden. Wenn Sie nicht GeoJSON Version verfügbar (nur Shape-Dateien oder KML-Dateien) haben, können Sie sie zu GeoJSON mit Utilities wie mapshaper konvertieren (einfach auszuführen: 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>