Question

我制作了一张带有3个红色定位点的Google地图。当一个人将鼠标悬停在某个点上时，将出现HTML代码，这看起来不太好。引脚之一的示例：

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

一个演示站点可以是seen here

是否可以在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));
      }
    }

Answer 1

悬停文本由标记的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));
}

proof of concept fiddle

代码段：

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>

控制悬停时显示的文字

1 个答案: