Question

我想制作一个状态图（例如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);
}

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

对于每个区域，您需要绑定click事件，然后单击您需要调用的函数（在示例中给出如何绑定click事件）。在该功能中，您必须执行您想要执行的操作。

如果您需要更多帮助，请与我们联系。

谢谢！

如何使用可点击的区域制作州地图

1 个答案: