谷歌地图V3：绘制德国国家多边形？ [英] Google Maps V3: Draw German State Polygons?
本文介绍了谷歌地图V3：绘制德国国家多边形？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
解决方案
你想做这样的事情吗？
http://www.geocodezip.com/geoxml3_test/v3_FusionTables_query_sidebarF_local。 html？country = Germany
它使用 FusionTables中的公开数据，自然地球数据集。
加密ID ：
https://www.google.com/fusiontables/DataSource?docid=19lLpgsKdJRHL2O4fNmJ406ri9JtpIIk8a-AchA
数字ID：
https://www.google.com/fusiontables/DataSource?dsrcid = 420419
您可以按照自己的喜好设计款式（颜色）。
代码段：
// globalsvar map = null; var infoWindow = null; var geoXml = null; var geoXmlDoc = null; var myLatLng = null; var myOptions = null; var mapCenter = null; var geocodeTheCountry = true; var gpolygons = []; // Fusion Table data IDvar FT_TableID =19lLpgsKdJRHL2O4fNmJ406ri9JtpIIk8a-AchA; // 420419; var CountryName =Germany; google.load（'visualization'，'1'，{'packages'：['corechart'，'table'，'geomap']}）; function createSidebar（）{/ /使用参数设置查询var FT_Query2 =SELECT'name_0'，'name_1'，'kml_4326'FROM+ FT_TableID +WHERE name_0 ='+ CountryName +'ORDER by'name_1'; var queryText = encodeURIComponent（FT_Query2）; // alert（createSidebar query =+ FT_Query2）; var query = new google.visualization.Query（'http://www.google.com/fusiontables/gvizdata?tq='+ queryText）; //设置回调函数query.send（getData）;} //设置一个回调函数，当Google Visualization API被加载时运行.google.setOnLoadCallback（createSidebar）; var FTresponse = null; myLatLng = new google.maps.LatLng 37.422104808，-122.0838851）; //这些设置映射的初始中心，缩放和maptype //如果在查询中未指定该字符串stringvar lat = 37.422104808; var lng = -122.0838851; var zoom = 18; var maptype = google .maps.MapTypeId.ROADMAP; if（！isNaN（lat）&&！isNaN（lng））{myLatLng = new google.maps.LatLng（lat，lng）;} infoWindow = new google.maps.InfoWindow（） ; //定义回调函数，当返回结果时调用这个函数getData（response）{if（！response）{alert（'no response'）;返回; }（response.isError（））{alert（'Error in query：'+ response.getMessage（）+''+ response.getDetailedMessage（））;返回; } FTresponse =回应; //有关响应对象的更多信息，请参阅文档//http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse numRows = response.getDataTable（）。getNumberOfRows（）; numCols = response.getDataTable（）。getNumberOfColumns（）; fusiontabledata =< table>< tr>; fusiontabledata + =th + response.getDataTable（）。getColumnLabel（1）+< / th>; //} fusiontabledata + =< / tr>< tr>;对于（i = 0; i
html，body {width：100％;身高：100％;保证金：0; padding：0;}＃map_canvas {width：300px; height：100％}。infowindow * {font-size：90％; margin：0}
< script src =https： //geoxml3.googlecode.com/svn/branches/polys/geoxml3.js\"></script><script src =http://www.google.com/jsapi>< / script> < script src =https://maps.googleapis.com/maps/api/js>< / script>< table style =width：100％; height：100％;> < tr style =width：100％; height：90％;> < td style =width：60％; height：100％;> < div id =map_canvas>< / div> < / TD> < TD> < div id =sidebarstyle =width：300px; height：400px; overflow：auto>< / div> < / TD> < / table>
I need to draw colored polygons over certain German states. What's the best way (or easiest, fastest, any really...) to do this? Do I need to somehow get all the outlines as lat/lon points and draw a polygon based on those? Or is there a better way?
解决方案
You want to do something like this? http://www.geocodezip.com/geoxml3_test/v3_FusionTables_query_sidebarF_local.html?country=Germany
It uses publicly available data in FusionTables, the Natural Earth Data set.
encrypted ID:
https://www.google.com/fusiontables/DataSource?docid=19lLpgsKdJRHL2O4fNmJ406ri9JtpIIk8a-AchA
numeric ID:
https://www.google.com/fusiontables/DataSource?dsrcid=420419
You can style them (color them) as you like.
code snippet:
// globals
var map = null;
var infoWindow = null;
var geoXml = null;
var geoXmlDoc = null;
var myLatLng = null;
var myOptions = null;
var mapCenter = null;
var geocodeTheCountry = true;
var gpolygons = [];
// Fusion Table data ID
var FT_TableID = "19lLpgsKdJRHL2O4fNmJ406ri9JtpIIk8a-AchA"; // 420419;
var CountryName = "Germany";
google.load('visualization', '1', {
'packages': ['corechart', 'table', 'geomap']
});
function createSidebar() {
// set the query using the parameters
var FT_Query2 = "SELECT 'name_0', 'name_1', 'kml_4326' FROM " + FT_TableID + " WHERE name_0 = '" + CountryName + "' ORDER by 'name_1'";
var queryText = encodeURIComponent(FT_Query2);
// alert("createSidebar query="+FT_Query2);
var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
//set the callback function
query.send(getData);
}
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(createSidebar);
var FTresponse = null;
myLatLng = new google.maps.LatLng(37.422104808, -122.0838851);
// these set the initial center, zoom and maptype for the map
// if it is not specified in the query string
var lat = 37.422104808;
var lng = -122.0838851;
var zoom = 18;
var maptype = google.maps.MapTypeId.ROADMAP;
if (!isNaN(lat) && !isNaN(lng)) {
myLatLng = new google.maps.LatLng(lat, lng);
}
infoWindow = new google.maps.InfoWindow();
//define callback function, this is called when the results are returned
function getData(response) {
if (!response) {
alert('no response');
return;
}
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
FTresponse = response;
//for more information on the response object, see the documentation
//http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse
numRows = response.getDataTable().getNumberOfRows();
numCols = response.getDataTable().getNumberOfColumns();
fusiontabledata = "<table><tr>";
fusiontabledata += "<th>" + response.getDataTable().getColumnLabel(1) + "</th>";
// }
fusiontabledata += "</tr><tr>";
for (i = 0; i < numRows; i++) {
fusiontabledata += "<td><a href='javascript:myFTclick(" + i + ")'>" + response.getDataTable().getValue(i, 1) + "</a></td>";
// }
fusiontabledata += "</tr><tr>";
}
fusiontabledata += "</table>";
//display the results on the page
document.getElementById('sidebar').innerHTML = fusiontabledata;
}
function infoWindowContent(name, description) {
content = '<div class="FT_infowindow"><h3>' + name +
'</h3><div>' + description + '</div></div>';
return content;
}
function myFTclick(row) {
var description = FTresponse.getDataTable().getValue(row, 0);
var name = FTresponse.getDataTable().getValue(row, 1);
if (!gpolygons[row]) {
var kml = FTresponse.getDataTable().getValue(row, 2);
// create a geoXml3 parser for the click handlers
var geoXml = new geoXML3.parser({
map: map,
zoom: false,
infoWindow: infoWindow,
singleInfoWindow: true
});
geoXml.parseKmlString("<Placemark>" + kml + "</Placemark>");
geoXml.docs[0].gpolygons[0].setMap(null);
gpolygons[row] = geoXml.docs[0].gpolygons[0].bounds.getCenter();
}
var position = gpolygons[row];
if (!infoWindow) infoWindow = new google.maps.InfoWindow({});
infoWindow.setOptions({
content: infoWindowContent(name, description),
pixelOffset: new google.maps.Size(0, 2),
position: position
});
infoWindow.open(map);
}
function initialize() {
myOptions = {
zoom: zoom,
center: myLatLng,
mapTypeId: maptype
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var geocoder = new google.maps.Geocoder();
if (geocoder && geocodeTheCountry) {
geocoder.geocode({
'address': CountryName + " Country"
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
map.setCenter(results[0].geometry.location);
map.fitBounds(results[0].geometry.viewport);
} else {
alert("No results found");
}
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
var FT_Query = "SELECT 'kml_4326' FROM " + FT_TableID + " WHERE 'name_0' = '" + CountryName + "';";
var FT_Options = {
suppressInfoWindows: true,
query: {
from: FT_TableID,
select: 'kml_4326',
where: "'name_0' = '" + CountryName + "';"
},
styles: [{
polygonOptions: {
fillColor: "#FF0000",
fillOpacity: 0.35
}
}]
};
layer = new google.maps.FusionTablesLayer(FT_Options);
layer.setMap(map);
google.maps.event.addListener(layer, "click", function(event) {
infoWindow.close();
infoWindow.setContent(infoWindowContent(event.row.name_1.value, event.row.name_0.value));
infoWindow.setPosition(event.latLng);
infoWindow.open(map);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
width: 300px;
height: 100%
}
.infowindow * {
font-size: 90%;
margin: 0
}
<script src="https://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<script src="http://www.google.com/jsapi"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<table style="width:100%; height:100%;">
<tr style="width:100%; height:90%;">
<td style="width:60%; height:100%;">
<div id="map_canvas"></div>
</td>
<td>
<div id="sidebar" style="width:300px;height:400px; overflow:auto"></div>
</td>
</tr>
</table>
这篇关于谷歌地图V3：绘制德国国家多边形？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
