Google地图v3上的文字标签

Question

Google地图v3上的文字标签

Roh*_*esh 17 javascript google-maps google-maps-api-3 google-maps-markers

我最近在谷歌地图上从v2迁移到v3,其中一个功能是使用文本标签,我使用第三方库(BpLabel)实现

地图中的文字标签

问题:
如何在Google Maps v3中显示文本标签,其中包含"鼠标悬停"等触发事件？注意:我不希望标记与文本标签一起显示.我只希望文字标签可见

我试过的:

使用InfoWindow,但它太混乱,需要显式关闭叠加,而我需要在鼠标指针悬停在它上方时关闭叠加层
使用InfoBox,它不像InfoWindow那样杂乱,但是它也没有像mouseover这样的事件触发器

任何遇到类似问题的人都会给予任何帮助,我们将非常感激.

干杯,
罗希特

Answer 1

TMS*_*TMS 19

我认为唯一的方法是使用标记作为标签,即将标记的形状更改为所需的标签.两个想法如何做到这一点:

1)使用具有自定义形状和文本的修改标记 - 例如使用Google 图表图表和信息图表生成的图像图标(如此处或此处).但是,用于创建此类图标的Google API已弃用,无需补救!或者不是？有一个混乱,请看我的评论.

2)使用markerwithlabel库(通过谷歌搜索"google maps text in marker"轻松找到).使用此库,您可以使用带或不带标记图标的标签定义标记.如果您不想要标记图标,只需设置icon: {}:

 var marker = new MarkerWithLabel({
   position: homeLatLng,
   draggable: true,
   raiseOnDrag: true,
   map: map,
   labelContent: "$425K",
   labelAnchor: new google.maps.Point(22, 0),
   labelClass: "labels", // the CSS class for the label
   icon: {}
 });

Run Code Online (Sandbox Code Playgroud)

然后您可以像使用普通标记一样使用它,即为鼠标悬停事件添加InfoWindow!

以下是如何将此库用于所需内容的示例.

竞争代码:

                             <!DOCTYPE html>
<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>MarkerWithLabel Mouse Events</title>
 <style type="text/css">
   .labels {
     color: red;
     background-color: white;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 10px;
     font-weight: bold;
     text-align: center;
     width: 40px;
     border: 2px solid black;
     white-space: nowrap;
   }
 </style>
 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<!-- <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/src/markerwithlabel.js"></script>-->
 <script type="text/javascript" src="markerwithlabel.js"></script>
 <script type="text/javascript">
   function initMap() {
     var latLng = new google.maps.LatLng(49.47805, -123.84716);
     var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);

     var map = new google.maps.Map(document.getElementById('map_canvas'), {
       zoom: 12,
       center: latLng,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     });

     var marker = new MarkerWithLabel({
       position: homeLatLng,
       draggable: true,
       raiseOnDrag: true,
       map: map,
       labelContent: "$425K",
       labelAnchor: new google.maps.Point(22, 0),
       labelClass: "labels", // the CSS class for the label
       icon: {}
     });

     var iw = new google.maps.InfoWindow({
       content: "Home For Sale"
     });

var ibOptions = {
    content: 'content'
    // other options
};

var ib = new google.maps.InfoWindow(ibOptions);

ib.open(map, this);
     google.maps.event.addListener(marker, "mouseover", function (e) { ib.open(map, this); });
     google.maps.event.addListener(marker, "mouseout", function (e) { ib.close(map, this); });


   }

 </script>
</head>
<body onload="initMap()">
<p>Try interacting with the marker (mouseover, mouseout, click, double-click, mouse down, mouse up, drag) to see a log of events that are fired. Events are fired whether you are interacting with the marker portion or the label portion.</p>
 <div id="map_canvas" style="height: 400px; width: 100%;"></div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	11 年，12 月前
查看次数：	41293 次
最近记录：	10 年，5 月前