显示大陆地图和缩放显示国家/地区

Question

在我在CONTACT部分的网页上我想添加交互式谷歌地图。想法是，在加载用户可以看到与各大洲的所有地图

当用户点击大陆时，地图会自动放大

用户可以点击这个国家的任何一个来获得一些事件（在我的示例警报中）

这就是我这样做的方式，但我不知道如何分开大陆和计数并放大

// 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 = [
    {
        "featureType": "administrative",
        "elementType": "all",
        "stylers": [
            {
                "color": "#a8a8a8"
            }
        ]
    },
    {
        "featureType": "administrative.country",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "administrative.country",
        "elementType": "geometry.stroke",
        "stylers": [
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "administrative.country",
        "elementType": "labels",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "administrative.country",
        "elementType": "labels.text",
        "stylers": [
            {
                "visibility": "simplified"
            }
        ]
    },
    {
        "featureType": "administrative.country",
        "elementType": "labels.text.fill",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "administrative.country",
        "elementType": "labels.icon",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "administrative.province",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "administrative.province",
        "elementType": "geometry",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "administrative.locality",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "administrative.neighborhood",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "administrative.land_parcel",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "landscape",
        "elementType": "all",
        "stylers": [
            {
                "saturation": -100
            },
            {
                "lightness": 60
            },
            {
                "visibility": "on"
            },
            {
                "color": "#e2e2e2"
            }
        ]
    },
    {
        "featureType": "poi",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "poi.park",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#b6c54c"
            },
            {
                "lightness": 40
            },
            {
                "saturation": -40
            }
        ]
    },
    {
        "featureType": "road",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#ef8c25"
            },
            {
                "lightness": 40
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "geometry.stroke",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "road.local",
        "elementType": "all",
        "stylers": [
            {
                "saturation": -100
            },
            {
                "lightness": 40
            },
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "transit",
        "elementType": "all",
        "stylers": [
            {
                "saturation": -100
            },
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "water",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "simplified"
            },
            {
                "lightness": 30
            },
            {
                "color": "#ffffff"
            },
            {
                "saturation": "16"
            }
        ]
    },
    {
        "featureType": "water",
        "elementType": "labels",
        "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: '#a8a8a8',
          strokeOpacity: 1,
          strokeWeight: 0.3,
          fillColor: '#a8a8a8',
          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() {
          if(this.name =="Brazil"){  
          alert("Brazil");
          };
          if(this.name =="Croatia"){  
          alert("Croatia");
          };
         if(this.name =="Russia"){
          alert("Russia");
          };
        });

        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);

#map-canvas {
    height: 600px;
    width: 800px;
  }

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

这是工作jsfiddle

这是我找到想法AMCHARTS但我需要免费和自定义解决方案的地方

而且，在我的代码中，你可以找到它

 google.maps.event.addListener(country, 'click', function() {
      if(this.name =="Brazil"){  
      alert("Brazil");
      };
      if(this.name =="Croatia"){  
      alert("Croatia");
      };
     if(this.name =="Russia"){
      alert("Russia");
      };
    });

为什么在这里，如果我添加ELSEcode不工作

 google.maps.event.addListener(country, 'click', function() {
      if(this.name =="Brazil"){  
      alert("Brazil");
      };
      if(this.name =="Croatia"){  
      alert("Croatia");
      };
     if(this.name =="Russia"){
      alert("Russia");
      };
     else{
      alert("Send Us mail");
     }
    });

Answer 1

在点击事件上，您可以设置map.setZoom(4);以使地图放大。

你可以查看if (geometries) {}，我认为它的线条将被抽出。如果你发表评论说明这​​些行会消失。在孔MAP上设置点击事件而不像现在那样设置COUNTRY。并设置类似if(map.zoom === 4){ //add the country lines};的东西。希望这能指导您在某个方向上更接近答案。

if语句是错误的。如果这样的语句将其更改为else：

if(this.name =="Brazil"){ 
    alert("Brazil"); 
} else if(this.name =="Croatia"){ 
    alert("Croatia"); 
} else if(this.name =="Russia"){ 
    alert("Russia"); 
} else { 
    alert("Send Us mail"); 
}