我最近在谷歌地图上从v2迁移到v3,其中一个功能是使用文本标签,我使用第三方库(BpLabel)实现
问题:
如何在Google Maps v3中显示文本标签,其中包含“鼠标悬停”等触发事件?
注意:我不希望标记与文本标签一起显示。我只希望文字标签可见
我尝试过什么:
任何遇到过类似问题的人的帮助都将非常感激。
干杯,
Rohitesh
答案 0 :(得分:18)
我认为唯一的方法是使用标记作为标签,即将标记的形状更改为所需的标签。两个想法如何做到这一点:
1)使用带有自定义形状和文字的修改过的标记 - 例如使用Google Image Charts和Infographics生成的图片图标(例如here或here)。但the google API to create such icons is deprecated without remedy! Or isn't??有一种混乱,请参阅我的评论。
2)使用 markerwithlabel library (通过Google搜索“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: {}
});
然后您可以像使用普通标记一样使用它,即为鼠标悬停事件添加InfoWindow!
Here is the example how to use this library for what you need
竞争代码:
<!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&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>
答案 1 :(得分:2)
您可以使用InfoBox,但不能通过向地图添加事件侦听器来使用悬停事件。您可以在信息框中添加一个类(默认类是信息框),因此您应该能够使用jQuery或JavaScript直接向其添加悬停事件。这是我用来不显示带标签的标记的代码:
var regionsMarkerInfo = [{markerLabel: 'Label Name', coordinates: [50, -120], markerTranslation: "Label Name"}, { another object }, etc... ],
regionsOptions = [],
regionLabel = [];
for(var r=0; r<regionsMarkerInfo.length; r++){
regionsOptions[r] = {
content: "<a href='http://"+window.location.host+"/Destinations/Regions/" + regionsMarkerInfo[r].markerLabel + ".aspx'>"+ regionsMarkerInfo[r].markerTranslation + "</a>"
,boxStyle: {
textAlign: "left"
,fontSize: "18px"
,whiteSpace: "nowrap"
,lineHeight: "16px"
,fontWeight: "bold"
,fontFamily: "Tahoma"
}
,disableAutoPan: true
,position: new google.maps.LatLng(regionsMarkerInfo[r].coordinates[0], regionsMarkerInfo[r].coordinates[1])
,closeBoxURL: ""
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: true
,boxClass: "regionLabel"
};
regionLabel[r] = new InfoBox(regionsOptions[r]);
regionLabel[r].open(map);
}
然后你应该能够创建一个悬停事件:
$('.regionLabel').hover(function(){}, function(){});
或
document.getElementsByClassName('regionLabel).addEventListener('mouseover', ... )
如果你需要看到这个:
转到此处:http://travelalaska.dawleyassociates.com/Destinations/Regions.aspx
打开你的控制台并键入(复制/粘贴):$('。regionLabel')。hover(function(){console.log('hovered');},function(){console.log ( 'unhovered');});
将鼠标悬停在大标签上,您会在控制台中看到文字输出。
答案 2 :(得分:1)
您可以告诉Google地图使用其网址为SVG图片的图标。在大多数浏览器中,这也可以是数据URI。如果你知道如何为你想要客户端的标记生成适当的SVG,那么你可以这样做,然后使用Base64库将SVG字符串转换为Base64数据,前缀为'data:image / svg + xml; base64,'然后它可以用作数据URI。
请注意,Internet Explorer似乎更加挑剔,我发现我需要scaledSize属性以及通常的大小,原点,锚点和url属性来获取任何SVG。
此方法允许您使用完整的SVG图像,包括样式文本,这样您就可以创建带有标签的标记,其中包含您需要的任何样式。