【问题标题】:Google Maps JS: How do I get the small tooltip marker on hover AND the normal info window on click?Google Maps JS:如何在悬停时获得小工具提示标记,在点击时获得正常信息窗口?
【发布时间】:2011-11-09 20:55:32
【问题描述】:

因此请检查任何类似这样的谷歌地图结果:http://g.co/maps/htdva

如果您将鼠标悬停在标记上,您会看到工具提示。如果你点击它,你会得到很大的信息窗口。我的信息窗口工作得很好:this stackoverflow answer

这是迷你工具提示和信息窗口的图片:

这是一个 jsFiddle 演示:http://jsfiddle.net/3VMPL/

【问题讨论】:

    标签: javascript google-maps google-maps-api-3


    【解决方案1】:

    将标记的标题属性设置为您想要的工具提示。

    var tooltip = "some text";
    marker = new google.maps.Marker({map:map, position:position, title:tooltip});
    

    【讨论】:

    • 恐怕我不知道你想在这里做什么。你介意分享一个 jsFiddle:jsfiddle.net/3VMPL
    • 您会在鼠标悬停时弹出一个带有文本的标记框。我在这里编辑了你的jsfiddle.net/so1connor/APTYA
    • 谢谢,但我不是在谈论标准的 html 标题工具提示。请查看 OP 中的附加图片... Dairy Queen 工具提示是我感兴趣的(查看此链接:g.co/maps/htdva)。在更多地探索谷歌地图之后,似乎这可能不是地图 API 的一部分,但他们正在实现另一个工具提示 js
    【解决方案2】:

    我想你想要的可以在这里找到:

    https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

    // This example displays a marker at the center of Australia.
    // When the user clicks the marker, an info window opens.
    
    function initialize() {
      var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
      var mapOptions = {
        zoom: 4,
        center: myLatlng
      };
    
      var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    
      var contentString = '<div id="content">'+
          '<div id="siteNotice">'+
          '</div>'+
          '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
          '<div id="bodyContent">'+
          '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
          'sandstone rock formation in the southern part of the '+
          'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
          'south west of the nearest large town, Alice Springs; 450&#160;km '+
          '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
          'features of the Uluru - Kata Tjuta National Park. Uluru is '+
          'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
          'Aboriginal people of the area. It has many springs, waterholes, '+
          'rock caves and ancient paintings. Uluru is listed as a World '+
          'Heritage Site.</p>'+
          '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
          'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
          '(last visited June 22, 2009).</p>'+
          '</div>'+
          '</div>';
    
      var infowindow = new google.maps.InfoWindow({
          content: contentString
      });
    
      var marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title: 'Uluru (Ayers Rock)'
      });
      google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
      });
    }
    
    google.maps.event.addDomListener(window, 'load', initialize);
    

    【讨论】:

    • 请在此处添加代码的相关部分,因为将来可能会出现链接...
    • @Naruto 确定我现在已经使用 Google 地图文档中提供的代码编辑了我的评论 :)
    【解决方案3】:

    您可以仅使用 CSS 来实现,但请注意,如果 Google 更改其标记,它会非常麻烦,并且可能随时停止工作:

    .gmnoprint[title] {
      overflow: visible !important;
      opacity: 1 !important;
    }
    
    .gmnoprint[title]:after {
      content: attr(title);
      /* Style your tooltip */
    }

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2017-10-30
      • 1970-01-01
      • 2020-07-22
      • 1970-01-01
      • 2018-07-29
      • 2013-08-14
      • 2019-08-22
      • 2015-05-02
      相关资源
      最近更新 更多