使用Google Maps API的可点击国家/地区

Question

我刚开始涉足Google Maps API，但我已经陷入困境。我正在寻找一种方式来重新创建this类型的地图与谷歌地图。我需要删除所有标签，获取空白背景（我尝试使用地图样式，但这对我来说不起作用，下面的代码示例），并在我将鼠标悬停在其上时点亮这些国家。

是否有任何教程，我似乎错过了我的搜索，可以帮助我或任何人都可以指向正确的方向？ :)

var _mapstyle = [ 
    { 
    featureType: "all", 
    elementType: "labels", 
    stylers: [ 
     { visibility: "off" } 
    ] 
    } 
]; 

function create_map() 
{ 
    _map = new google.maps.Map(document.getElementById("eyewebz-map"), 
    { 
     zoom: 2, 
     center: new google.maps.LatLng(20, 0), 
     navigationControl: true, 
     navigationControlOptions: { 
      style: google.maps.NavigationControlStyle.DEFAULT 
     }, 
     mapTypeControl: true, 
     mapTypeControlOptions: { 
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
     }, 
     scaleControl: true, 
     mapTypeIds: ['_mapstyle'] 
    }); 

    _display.setMap(_map); 
    _display.setPanel(document.getElementById("NavigationText")); 
} 

编辑 这就是地图将用于：我已经在我的生活游历了一下，希望做的是多了很多。自从我第一次旅行以来，我一直在写博客。我现在已经开发了一个新博客，并且希望让我去过的国家可以点击并点击一个URL。理想的情况是，当我点击一个国家时，它会带我到一个页面，只有那个特定的国家在地图上显示，并带有一些标记（要访问的地方）。一旦你点击这些标记，它应该显示一个特定的帖子/一些信息。

Answer 1

这样的事情可以吗？复制并粘贴到HTML页面主体（JSFiddler here）中。

<style type="text/css"> 
    #map-canvas { 
    height: 600px; 
    width: 800px; 
    } 
</style> 

<script type="text/javascript" 
    src="https://maps.google.com/maps/api/js?sensor=false"></script> 

<script type="text/javascript"> 
    // the map 
    var map; 

    function initialize() { 
    var myOptions = { 
     zoom: 2, 
     center: new google.maps.LatLng(10, 0), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    // initialize the map 
    map = new google.maps.Map(document.getElementById('map-canvas'), 
     myOptions); 

    // these are the map styles 
    var styles = [ 
     { 
      stylers: [ 
      { hue: "#00ffe6" }, 
      { saturation: -20 } 
      ] 
     }, 
     { 
      featureType: "landscape", 
      stylers: [ 
      { hue: "#ffff66" }, 
      { saturation: 100 } 
      ] 
     },{ 
      featureType: "road", 
      stylers: [ 
      { visibility: "off" } 
      ] 
     },{ 
      featureType: "administrative.land_parcel", 
      stylers: [ 
      { visibility: "off" } 
      ] 
     },{ 
      featureType: "administrative.locality", 
      stylers: [ 
      { visibility: "off" } 
      ] 
     },{ 
      featureType: "administrative.neighborhood", 
      stylers: [ 
      { visibility: "off" } 
      ] 
     },{ 
      featureType: "administrative.province", 
      stylers: [ 
      { visibility: "off" } 
      ] 
     },{ 
      featureType: "landscape.man_made", 
      stylers: [ 
      { visibility: "off" } 
      ] 
     },{ 
      featureType: "landscape.natural", 
      stylers: [ 
      { visibility: "off" } 
      ] 
     },{ 
      featureType: "poi", 
      stylers: [ 
      { visibility: "off" } 
      ] 
     },{ 
      featureType: "transit", 
      stylers: [ 
      { visibility: "off" } 
      ] 
     } 
     ]; 

    map.setOptions({styles: styles}); 

    // Initialize JSONP request 
    var script = document.createElement('script'); 
    var url = ['https://www.googleapis.com/fusiontables/v1/query?']; 
    url.push('sql='); 
    var query = 'SELECT name, kml_4326 FROM ' + 
     '1foc3xO9DyfSIF6ofvN0kp2bxSfSeKog5FbdWdQ'; 
    var encodedQuery = encodeURIComponent(query); 
    url.push(encodedQuery); 
    url.push('&callback=drawMap'); 
    url.push('&key=AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ'); 
    script.src = url.join(''); 
    var body = document.getElementsByTagName('body')[0]; 
    body.appendChild(script); 
    } 

    function drawMap(data) { 
    var rows = data['rows']; 
    for (var i in rows) { 
     if (rows[i][0] != 'Antarctica') { 
     var newCoordinates = []; 
     var geometries = rows[i][1]['geometries']; 
     if (geometries) { 
      for (var j in geometries) { 
      newCoordinates.push(constructNewCoordinates(geometries[j])); 
      } 
     } else { 
      newCoordinates = constructNewCoordinates(rows[i][1]['geometry']); 
     } 
     var country = new google.maps.Polygon({ 
      paths: newCoordinates, 
      strokeColor: '#ff9900', 
      strokeOpacity: 1, 
      strokeWeight: 0.3, 
      fillColor: '#ffff66', 
      fillOpacity: 0, 
      name: rows[i][0] 
     }); 
     google.maps.event.addListener(country, 'mouseover', function() { 
      this.setOptions({fillOpacity: 0.4}); 
     }); 
     google.maps.event.addListener(country, 'mouseout', function() { 
      this.setOptions({fillOpacity: 0}); 
     }); 
     google.maps.event.addListener(country, 'click', function() { 
      alert(this.name); 
     }); 

     country.setMap(map); 
     } 
    } 
    } 

    function constructNewCoordinates(polygon) { 
    var newCoordinates = []; 
    var coordinates = polygon['coordinates'][0]; 
    for (var i in coordinates) { 
     newCoordinates.push(
      new google.maps.LatLng(coordinates[i][1], coordinates[i][0])); 
    } 
    return newCoordinates; 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

<div id="map-canvas"></div> 

这是本 Fusion Tables Layer Example: Mouseover Map Styles的修改版本。

您还应该看看Styled Maps。

您可能感兴趣的另一件事是Natural Earth Data。这在你需要一个多边形数据源的情况下。这里有一个使用它的例子GViz API Example: Fusion Tables Data Source。