Как связать полигон Google Maps с другим сайтом? - PullRequest
Новая
       24

Как связать полигон Google Maps с другим сайтом?

0 голосов
/ 23 октября 2018

Я создаю карту из полигонов, чтобы показать разные районы города.Каждый полигон (район) должен быть кликабельным для другого сайта (подстраница с информацией об этой области).Я уже добавил 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>

Как я уже упоминал, я не могу нажать на ссылку.

Ответы [ 2 ]

0 голосов
/ 24 октября 2018

Согласно вашему заданному коду.Я реализовал полигон в моем регионе. 

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

0 голосов
/ 23 октября 2018

С отправленным кодом я получаю ошибку javascript: 

 Uncaught ReferenceError: google is not defined

Ваш прослушиватель "щелчка" находится за пределами функции initMap, поэтому он выполняется до загрузки API Javascript API Карт Google 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" 
  });
}

подтверждение концепции скрипта

фрагмент кода: 

#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>
...