时间戳

首页 > 解决方案 > 控制悬停时显示的文本

javascript - 控制悬停时显示的文本

问题描述

我制作了一个带有 3 个红色针点的谷歌地图。当一个人将鼠标悬停在一个针点上时，就会出现 HTML 代码，这看起来不太好。来自其中一个引脚的示例：

Lorem Ipsum 3<br>. Adress 3 <br>. <a href=“####” target=“_blank”&gt;Vis vej</a>

可以在这里看到一个演示站点

是否可以在 javascript 中设置某种alt标签，以便我可以控制当一个人将鼠标悬停在针点上时显示的内容？

function initMap() {
      var center = {lat: 51.487655, lng: -0.088128};
      var locations = [

        ['Lorem Ipsum 1<br>\
        Adress 1<br>\
        <a href="####" target="_blank">Vis vej</a>',   52.192877, -0.893615],

        ['Lorem Ipsum 2<br>\
        Adress 2 <br>\
        <a href="#####" target="_blank">Vis vej</a>',   51.627608, -0.501912],

        ['Lorem Ipsum 3<br>\
        Adress 3 <br>\
        <a href="####" target="_blank">Vis vej</a>',   51.483280, -0.071244],

      ];
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 7,
        center: center
      });
    var infowindow =  new google.maps.InfoWindow({});
    var marker, count;
    for (count = 0; count < locations.length; count++) {
        marker = new google.maps.Marker({
          position: new google.maps.LatLng(locations[count][1], locations[count][2]),
          map: map,
          title: locations[count][0]
        });
    google.maps.event.addListener(marker, 'click', (function (marker, count) {
          return function () {
            infowindow.setContent(locations[count][0]);
            infowindow.open(map, marker);
          }
        })(marker, count));
      }
    }

标签： javascriptgoogle-mapsgoogle-maps-api-3

解决方案

悬停文本由标记的 title 属性设置，该属性是纯文本（无 HTML）。不要在其中放置 HTML 标记，使用您的代码，一种选择是为其分配一个仅包含文本的不同数组元素：

var locations = [
    ['Lorem Ipsum 1', 
     'Lorem Ipsum 1<br>Adress 1<br><a href="####" target="_blank">Vis vej</a>',
     52.192877, -0.893615],
    ['Lorem Ipsum 2', 
     'Lorem Ipsum 2<br>Adress 2 <br><a href="#####" target="_blank">Vis vej</a>', 
     51.627608, -0.501912],
    ['Lorem Ipsum 3', 
     'Lorem Ipsum 3<br>Adress 3 <br><a href="####" target="_blank">Vis vej</a>', 
     51.483280, -0.071244],
  ];

然后像这样创建你的标记：

for (count = 0; count < locations.length; count++) {
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[count][2], locations[count][3]),
    map: map,
    title: locations[count][0]
  });
  google.maps.event.addListener(marker, 'click', (function(marker, count) {
    return function() {
      infowindow.setContent(locations[count][1]);
      infowindow.open(map, marker);
    }
  })(marker, count));
}

概念证明小提琴

结果地图的屏幕截图

代码片段：

function initMap() {
  var center = {
    lat: 51.487655,
    lng: -0.088128
  };
  var locations = [
    ['Lorem Ipsum 1', 'Lorem Ipsum 1<br>Adress 1<br><a href="####" target="_blank">Vis vej</a>', 52.192877, -0.893615],
    ['Lorem Ipsum 2', 'Lorem Ipsum 2<br>Adress 2 <br><a href="#####" target="_blank">Vis vej</a>', 51.627608, -0.501912],
    ['Lorem Ipsum 3', 'Lorem Ipsum 3<br>Adress 3 <br><a href="####" target="_blank">Vis vej</a>', 51.483280, -0.071244],
  ];
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: center
  });
  var infowindow = new google.maps.InfoWindow({});
  var marker, count;
  for (count = 0; count < locations.length; count++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[count][2], locations[count][3]),
      map: map,
      title: locations[count][0]
    });
    google.maps.event.addListener(marker, 'click', (function(marker, count) {
      return function() {
        infowindow.setContent(locations[count][1]);
        infowindow.open(map, marker);
      }
    })(marker, count));
  }
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body,
#map {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}
<script src="https://maps.googleapis.com/maps/api/js" type="text/javascript"></script>
<div id="map"></div>

推荐阅读