javascript - 如何制作带有可点击区域的州 map

Question

我想制作一个州 map (例如 http://futurewiz.in/map/interactive-map-of-india.html )，具有可点击的区域并重定向到 word-press 站点中的另一个页面。任何人都可以指导任何插件或告诉我如何做到这一点。

Answer 1

我认为一种方法是为地区绘制一个区域，并为每个区域添加点击事件。

下面是绘制区域的示例:

var map;
var infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'),         {
    zoom: 15,
    center: {lat: 51.204458, lng: 4.389025},
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  // Define the LatLng coordinates for the polygon.
  var coord_antzuid = [
      {lat: 51.208340, lng: 4.383368},
      {lat: 51.204458, lng: 4.389025},
      {lat: 51.208824, lng: 4.402478},
      {lat:51.211654, lng:4.400858},
      {lat: 51.212420, lng: 4.393971},
      {lat: 51.213737, lng:4.390288}
  ];

  // Construct the polygon.
  var region = new google.maps.Polygon({
    paths: coord_antzuid,
    strokeColor: '#36688F',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#36688F',
    fillOpacity: 0.35
  });
  region.setMap(map);

  // Add a listener for the click event.
  region.addListener('click', showArrays);

  google.maps.event.addListener(region,"mouseover",function(){
   this.setOptions({fillColor: "#CC6633", strokeColor: "#CC6633"});
  }); 

  google.maps.event.addListener(region,"mouseout",function(){
    this.setOptions({fillColor: "#36688F", strokeColor: "#36688F"});
  });

  infoWindow = new google.maps.InfoWindow;
}

/** @this {google.maps.Polygon} */
function showArrays(event) {
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  var vertices = this.getPath();

  var contentString = '<h3>Antwerpen Zuid</h3>' +
      '<strong>Lorem Ipsum</strong><br>John Smith <br>Kerkstraat 01 <br>2000 <br>Antwerp <br>00 000 00 00 <br> john@smith.me'

  // Replace the info windows content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);

  infoWindow.open(map);
}

为了达到你的要求，你需要做的是，你需要获取所有区的坐标，然后为所有区循环绘制一个区域。

对于每个区域，您需要绑定(bind)点击事件，并且在点击时您需要调用一个函数(示例中给出了如何绑定(bind)点击事件)。在该功能中，您必须执行您想做的操作。

如果您需要更多有关此问题的帮助，请告诉我。

谢谢!