javascript 谷歌地图作为矢量地图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21302002/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Map as a Vector Map
提问by Dawid van der Hoven
I've searched every where for this, the closest I have found isn't very satisfactory (this), Is there anyway to get google maps looking and acting like jvectormap? By acting I mean hover-able countries etc, and by looking I mean the clean look that vectormap has.
我已经搜索了每个地方，我发现的最接近的不是很令人满意（这个），无论如何让谷歌地图看起来和行为像jvectormap？通过表演，我指的是可悬停的国家等，而通过观察，我指的是矢量地图具有的干净外观。
回答by MrUpsidown
As suggested in my comment, you can check how to style the map:
正如我的评论中所建议的，您可以检查如何设置地图样式：
https://developers.google.com/maps/documentation/javascript/styling
https://developers.google.com/maps/documentation/javascript/styling
This can help you understand how it works, and eventually let you build your own:
这可以帮助您了解它的工作原理，并最终让您构建自己的：
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
Regarding Fusion Tables, once you find the appropriate data set (there are many, some are incomplete, more or less, and the level of geometry details can vary from one set to another), you can download it as a CSV, and import it to your DB. From there, you can query your DB and create polygons for each country. I will update my answer later with some code to help you get started.
关于Fusion Tables，一旦你找到合适的数据集（有很多，有些不完整，或多或少，几何细节的级别可能因一组而异），你可以将其下载为 CSV，然后导入到您的数据库。从那里，您可以查询您的数据库并为每个国家/地区创建多边形。稍后我将使用一些代码更新我的答案以帮助您入门。
Edit:Here is a data set I used for one of my projects. Maybe it can help you. It only holds the fields I was interested in, but has random colors associated with each country. http://www.sendspace.com/file/plgku3https://www.dropbox.com/s/7o5y26gfim1asf0/gmaps_countries.sql?dl=1
编辑：这是我用于我的一个项目的数据集。也许它可以帮助你。它只包含我感兴趣的领域，但有与每个国家相关的随机颜色。http://www.sendspace.com/file/plgku3https://www.dropbox.com/s/7o5y26gfim1asf0/gmaps_countries.sql?dl=1
Edit 2:Here is the JavaScript:
编辑 2：这是JavaScript：
var g = google.maps;
var countries = [];
function jsonCountries() {
$.ajax({
url : 'get_countries.php',
cache : true,
dataType : 'json',
async : true,
success : function(data) {
if (data) {
$.each(data, function(id,country) {
var countryCoords;
var ca;
var co;
if ('multi' in country) {
var ccArray = [];
for (var t in country['xml']['Polygon']) {
countryCoords = [];
co = country['xml']['Polygon'][t]['outerBoundaryIs']['LinearRing']['coordinates'].split(' ');
for (var i in co) {
ca = co[i].split(',');
countryCoords.push(new g.LatLng(ca[1], ca[0]));
}
ccArray.push(countryCoords);
}
createCountry(ccArray,country);
} else {
countryCoords = [];
co = country['xml']['outerBoundaryIs']['LinearRing']['coordinates'].split(' ');
for (var j in co) {
ca = co[j].split(',');
countryCoords.push(new g.LatLng(ca[1], ca[0]));
}
createCountry(countryCoords,country);
}
});
toggleCountries();
}
}
});
}
function createCountry(coords, country) {
var currentCountry = new g.Polygon({
paths: coords,
strokeColor: 'white',
strokeOpacity: 1,
strokeWeight: 1,
fillColor: country['color'],
fillOpacity: .6
});
countries.push(currentCountry);
}
function toggleCountries() {
for (var i=0; i<countries.length; i++) {
if (countries[i].getMap() !== null) {
countries[i].setMap(null);
} else {
countries[i].setMap(map);
}
}
}
And here is get_countries.php:
这是get_countries.php：
$results = array();
$sql = "SELECT * from gmaps_countries";
$result = $db->query($sql) or die($db->error);
while ($obj = $result->fetch_object()) {
$obj->xml = simplexml_load_string($obj->geometry);
$obj->geometry = '';
foreach ($obj->xml->Polygon as $value) {
$obj->multi = 'multigeo';
}
$results[] = $obj;
}
echo json_encode($results);
Just call jsonCountries()when you need. Hope this helps!
jsonCountries()需要的时候就打电话。希望这可以帮助！
