如何将Google Maps标记转化为简单的URL链接？

9 浏览

3 答案

0 Comments

问题出现的原因是，由于点击标记是一个JavaScript事件，所以只能使用location.href/window.open函数来实现标记的链接功能。如果想要使用标准的HTML链接，最好的选择是在用户点击标记时打开一个信息窗口，并将信息窗口的内容设置为HTML链接。

解决方法如下：

1. 创建一个Google Maps标记并将其添加到地图上。

var marker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  title: 'My Marker'
});

2. 创建一个信息窗口，并将其内容设置为HTML链接。

var infowindow = new google.maps.InfoWindow({
  content: 'Click here'
});

3. 当用户点击标记时，打开信息窗口。

marker.addListener('click', function() {
  infowindow.open(map, marker);
});

通过以上步骤，当用户点击标记时，将会打开一个包含HTML链接的信息窗口。用户可以点击链接以访问指定的网页。

0
0 Comments

问题的原因是想要将Google地图上的标记点转换为简单的URL链接。解决方法是使用jQuery将每个标记元素包装在<a href="..." />中。然而，问题是如何找到所有的标记，即如何确定表达式"something"。

有趣的想法。我能想到的唯一解决方法是使用jQuery将每个标记元素包装在<a href="..." />中：

$(something).wrap('<a href="..." />');

问题在于如何找到所有的标记，即"something"应该是什么表达式。不是所有的标记都是作为独立的标记，有时它们是可拖动的。

0
0 Comments

问题的出现原因是希望将Google Maps的标记（marker）转换为简单的URL链接，但是默认情况下Google Maps的标记并不支持直接转换为URL链接。

该问题的解决方法如下：

1. 将Google Map的div元素用链接包裹起来，并设置链接的href属性为"#"

2. 设置标记的鼠标悬停和鼠标移出事件，通过更新链接的href属性来实现（鼠标悬停时将链接设置为对应标记的页面，鼠标移出时将链接重新设置为"#"）

marker.addListener('mouseover', function() {
  link.href = marker.url; // 设置链接为对应标记的页面
});
marker.addListener('mouseout', function() {
  link.href = "#"; // 设置链接为"#"
});

通过这种方法，无论是中键点击、Ctrl+点击还是普通左键点击，都能达到预期的经典行为，并且开销非常有限。

需要注意的是，该解决方案适用于全屏地图，因为点击链接的“#”不会产生任何效果。如果想在一个高度超过一页的页面上使用这个解决方案，还需要为链接添加点击事件监听器，当链接的href属性设置为“#”时，阻止事件传播。

link.addEventListener('click', function(event) {
  if (link.href === "#") {
    event.stopPropagation(); // 阻止事件传播
  }
});

通过以上方法，可以将Google Maps的标记转换为简单的URL链接，实现预期的功能。

0