如何使用 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>'
  }
},