如何使用 map 上的更多信息按鈕制作 map 標記

Question

在我的網站上，我有一個包含 map 的頁面，我在其中添加了 map 標記。 我想為每個重定向到另一個頁面的 map 標記添加一個“更多信息”按鈕。

我放了mapMarker2一個，但是當我單擊它時，我不知道如何放置一個鏈接以重定向到另一個頁面

var json = {
  "mapMarker1": {
    "cordX": "50",
    "cordY": "22",
    "icon": "map-marker.svg",
    "modal": {
      "title": "Statue of a standing man",
      "content": "<p>Old Kingdom, <br/>Saqqara.<br />"
    }
  },
  "mapMarker2": {
    "cordX": "52",
    "cordY": "27",
    "icon": "map-marker.svg",
    "modal": {
      "title": "Group of servant statues",
      "content": "<p>painted limestone,<br />Old Kingdom,<br />Saqqara.</p><button>More information</button>",
    }
  },
  "mapMarker3": {
    "cordX": "60",
    "cordY": "39",
    "icon": "map-marker.svg",
    "modal": {
      "title": "King Senusert",
      "content": "<p>Limestone,<br />Middle Kindom.<br /></p>"
    }
  },
  "mapMarker4": {
    "cordX": "55",
    "cordY": "42",
    "icon": "map-marker.svg",
    "modal": {
      "title": "Statue of a seated man",
      "content": "<p>Granite,<br />Middle Kingdom.</p>"
    }
  },
  "mapMarker5": {
    "cordX": "65",
    "cordY": "80",
    "icon": "map-marker.svg",
    "modal": {
      "title": "The tomb",
      "content": "<p>Coffins,<br />Anthropoid Coffin with mummy.<br />"
    }
  },
  "mapMarker6": {
    "cordX": "31",
    "cordY": "49",
    "icon": "map-marker.svg",
    "modal": {
      "title": "Head of Queen Hatshepsut",
      "content": "<p>Painted Limeston, <br />New Kingdom,<br />Luxor.</p>"
    }
  },
  "mapMarker7": {
    "cordX": "62",
    "cordY": "58",
    "icon": "map-marker.svg",
    "modal": {
      "title": "The Goddess Sekhmet",
      "content": "<p>Grantie, <br />New Kingdom,<br />Luxor.</p>"
    }
  },
  "mapMarker8": {
    "cordX": "50",
    "cordY": "57",
    "icon": "map-marker.svg",
    "modal": {
      "title": "Statue of the god Amun",
      "content": "<p>Basalt, <br />New Kingdom.</p>"
    }
  },
  "mapMarker9": {
    "cordX": "62",
    "cordY": "23",
    "icon": "map-marker.svg",
    "modal": {
      "title": "Akhenaten",
      "content": "<p>Limestone , <br />Middle Kingdom.</p>"
    }
  }
};

(function($) {
  $(document).ready(function() {
    createKBmap('KBtestmap', 'mapa.jpg');
    KBtestmap.importJSON(json);
    KBtestmap.showAllMapMarkers();
  });
})(jQuery);

Answer 1

最簡單的方法是在模態內容中添加一個a元素，該元素在單擊時重定向到目標頁面。 如有必要，您可以使用 CSS 將此元素a為看起來像按鈕：

"mapMarker1": {
  "cordX": "50",
  "cordY": "22",
  "icon": "map-marker.svg",
  "modal": {
    "title": 'Statue of a standing man',
    "content": '<p>Old Kingdom, <br/>Saqqara.<br /><a href="/foo.html">More information</a>'
  }
},