如何将 Google Maps Polygon 链接到另一个网站？答案

【问题标题】：How to link a Google Maps Polygon to another website?如何将 Google Maps Polygon 链接到另一个网站？
【发布时间】：2018-10-23 17:26:24
【问题描述】：

我正在用多边形创建地图，以显示城市的不同区域。每个多边形（区域）都应该可以点击到另一个网站（包含该区域信息的子页面）。我已经添加了一个 add.listener ，当我将鼠标悬停在多边形上时，我可以看到多边形后面有一个链接，但它不可点击。

这是迄今为止我对一个多边形的了解：

<body>
<h1>Headline</h1>
<div id="map"></div>
<script>
function initMap() {

var map = new google.maps.Map(document.getElementById('map'), {

      zoom: 12,
      center:{lat:52.516754,lng:13.415202},
      mapTypeId: 'terrain'
    });


//Define the LatLng coordinates for the polygon's path DistrictOne
var DistrictOneCoords = [
    {lat:52.528198300, lng:13.424935300},
    {lat:52.527989500, lng:13.423905300},
    {lat:52.525065200, lng:13.420386300},
    {lat:52.522819700, lng:13.426480300},
    {lat:52.521148500, lng:13.429141000},
    {lat:52.519111700, lng:13.427596100},
    {lat:52.528198300, lng:13.424935300}

];

// Construct the polygon.
    var DistrictOne = new google.maps.Polygon({
      paths: DistrictOneCoords,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35
    });
    DistrictOne.setMap(map);
  }

// link
  google.maps.event.addListener(DistrictOne, "click", function(event) { window.location.href = "https://www.berlin.de" });
</script>

正如我已经提到的，我无法点击该链接。

【问题讨论】：

标签： javascript google-maps-api-3 dom-events polygon

【解决方案1】：

使用发布的代码，我收到一个 javascript 错误：

 Uncaught ReferenceError: google is not defined

您的“点击”侦听器位于 initMap 函数之外，因此它在 Google Maps Javascript API v3 加载之前执行。

如果在 initMap 函数内，则移动：

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center:{lat:52.516754,lng:13.415202},
    mapTypeId: 'terrain'
  });

  //Define the LatLng coordinates for the polygon's path DistrictOne
  var DistrictOneCoords = [
    {lat:52.528198300, lng:13.424935300},
    {lat:52.527989500, lng:13.423905300},
    {lat:52.525065200, lng:13.420386300},
    {lat:52.522819700, lng:13.426480300},
    {lat:52.521148500, lng:13.429141000},
    {lat:52.519111700, lng:13.427596100},
    {lat:52.528198300, lng:13.424935300}
  ];

  // Construct the polygon.
  var DistrictOne = new google.maps.Polygon({
    paths: DistrictOneCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  DistrictOne.setMap(map);
  // link
  google.maps.event.addListener(DistrictOne, "click", function(event) {
    window.location.href = "https://www.berlin.de" 
  });
}

proof of concept fiddle

代码 sn-p：

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<script>
  function initMap() {

    var map = new google.maps.Map(document.getElementById('map'), {

      zoom: 12,
      center: {
        lat: 52.516754,
        lng: 13.415202
      },
      mapTypeId: 'terrain'
    });


    //Define the LatLng coordinates for the polygon's path DistrictOne
    var DistrictOneCoords = [{
        lat: 52.528198300,
        lng: 13.424935300
      },
      {
        lat: 52.527989500,
        lng: 13.423905300
      },
      {
        lat: 52.525065200,
        lng: 13.420386300
      },
      {
        lat: 52.522819700,
        lng: 13.426480300
      },
      {
        lat: 52.519111700,
        lng: 13.427596100
      },
      {
        lat: 52.521148500,
        lng: 13.429141000
      },
      {
        lat: 52.528198300,
        lng: 13.424935300
      }

    ];

    // Construct the polygon.
    var DistrictOne = new google.maps.Polygon({
      paths: DistrictOneCoords,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35
    });
    DistrictOne.setMap(map);
    // link
    google.maps.event.addListener(DistrictOne, "click", function(event) {
      console.log('click, set window.location.href = "https://www.berlin.de"');
      // uncomment the line below to make it redirect
      // window.location.href = "https://www.berlin.de"
    });
  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>

【讨论】：

如果这回答了您的问题，请accept it

【解决方案2】：

根据您给定的代码。我在本地实现了多边形。

<script>
    function initMap() {

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 12,
            center:{lat:52.516754,lng:13.415202},
            mapTypeId: 'terrain'
        });


        //Define the LatLng coordinates for the polygon's path DistrictOne
        var DistrictOneCoords = [
            {lat:52.528198300, lng:13.424935300},
            {lat:52.527989500, lng:13.423905300},
            {lat:52.525065200, lng:13.420386300},
            {lat:52.522819700, lng:13.426480300},
            {lat:52.521148500, lng:13.429141000},
            {lat:52.519111700, lng:13.427596100},
            {lat:52.528198300, lng:13.424935300}
        ];

        // Construct the polygon.
        var DistrictOne = new google.maps.Polygon({
          paths: DistrictOneCoords,
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: '#FF0000',
          fillOpacity: 0.35
        });
    DistrictOne.setMap(map);
    addEventFunction(DistrictOne);
}

// link
function addEventFunction(DistrictOne) {
    google.maps.event.addListener(DistrictOne, "click", function(event) { window.location.href = "https://www.berlin.de" });    
}


initMap();

【讨论】：