当我将鼠标悬停在Google地图上的标记上时,如何添加文字? [英] How do I add text when I hover over my markers on Google maps?

查看:104
本文介绍了当我将鼠标悬停在Google地图上的标记上时,如何添加文字?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

当我将鼠标悬停在这张地图上的每个标记上时,我一直试图让标记出现,描述这里是什么以及为什么要访问这些地方,但我不知道如何。有谁知道如何实现这一目标?



我尝试过的事情:



这就是我一直在使用的东西。由于我不知道标签出现热,所以它们不在代码中。



I've been trying to have a tag occur when I hover over each of the markers on this map, describing what Is here and why to visit these places, but I don't know how. Does anybody know how to make this happen?

What I have tried:

This is what I've been working with. Since I don't know hot to make the tags appear, they are not in the code.

<!DOCTYPE html>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Assignment 10 Part 2

#map {
  height: 100%;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {lat: 40.699448, lng: -74.010264, zoom: 11}
  });
  var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  var markers = locations.map(function(location, i) {
    return new google.maps.Marker({
      position: location,
      label: labels[i % labels.length]
    });
  });
  // Add a marker clusterer to manage the markers.
  var markerCluster = new MarkerClusterer(map, markers,
    {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
  }
  var locations = [
    {lat: 40.689290, lng: -74.044490},
    {lat: 40.711475, lng: -74.012650},
    {lat: 40.782832, lng: -73.966986}
  ]

推荐答案

信息窗口  |  Google Maps JavaScript API  |  Google Developers [ ^ ]



参见样本。创建新标记时,您可以设置的属性之一是标题,这是HTML中工具提示的标准属性...
Info windows  |  Google Maps JavaScript API  |  Google Developers[^]

See the sample. When creating a new marker, one of the attributes you can set is 'title', which is the standard attribute in HTML for tooltip...


这篇关于当我将鼠标悬停在Google地图上的标记上时,如何添加文字?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆