Google Map作为矢量地图 [英] Google Map as a Vector Map
问题描述
我搜索了每个地方的这个，我发现的最接近的地方并不是很令人满意（ this ），有没有办法让Google地图看起来像 jvectormap ？通过代理我的意思是可悬停的国家等，通过看我的意思是矢量地图的干净的外观。
我的评论，你可以检查风格地图：$ b https://developers.google.com/maps/documentation/javascript/styling
这可以帮助你了解它是如何工作的，并最终让你建立你自己的：
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
关于 Fusion Tables ，一旦找到适当的数据集（有很多，有些不完整，或多或少，几何级别详细信息可能因组而异），您可以将其下载为CSV格式，并且可以使用rt it to your DB。从那里，你可以查询你的数据库并为每个国家创建多边形。我会稍后用一些代码更新我的答案，以帮助您开始使用。
编辑：这是我用于我的一个数据集项目。也许它可以帮助你。它只包含我感兴趣的领域，但具有与每个国家相关的随机颜色。 http://www.sendspace.com/file/plgku3
https://www.dropbox.com/s/ 7o5y26gfim1asf0 / gmaps_countries.sql？dl = 0
编辑2：以下是 JavaScript ：
var g = google.maps;
var countries = [];
函数jsonCountries（）{
$ .ajax（{
url：'get_countries.php'，
cache：true，
dataType：'json'，
async：true，
成功：函数（数据）{
if（data）{
$ .each（data，function（id，country）{
var countryCoords;
var ca;
var co;
如果（'multi'in country）{
var ccArray = [];
for（var'in country ['xml'] ['Polygon']）{$ b'b
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（）;
}
}
}）;
函数createCountry（coords，country）{
var currentCountry = new g.Polygon（{
paths：coords，
strokeColor：'white'，
strokeOpacity：1，
strokeWeight：1，
fillColor：country ['color']，
fillOpacity：.6
}）;
countries.push（currentCountry）;
函数toggleCountries（）{
for（var i = 0; i< countries.length; i ++）{
if（countries [i] .getMap（）！== null）{
countries [i] .setMap（null）;
} else {
countries [i] .setMap（map）;
}
}
}
这里是 get_countries.php ：
$ results = array（）;
$ sql =SELECT * from gmaps_countries;
$ result = $ db->查询（$ sql）或死（$ db->错误）;
while（$ obj = $ result-> fetch_object（））{
$ obj-> xml = simplexml_load_string（$ obj-> geometry）;
$ obj-> geometry ='';
foreach（$ obj-> xml->多边形作为$ value）{
$ obj-> multi ='multigeo';
}
$ results [] = $ obj;
}
echo json_encode（$ results）;
只要在需要时调用 jsonCountries（） 。希望这有助于！
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.
As suggested in my comment, you can check how to style the map:
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
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.
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/plgku3
https://www.dropbox.com/s/7o5y26gfim1asf0/gmaps_countries.sql?dl=0
Edit 2: Here is the 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:
$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!
这篇关于Google Map作为矢量地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
