google 地图初始化maker 显示label，title不能自动显示，使用label解决

最新推荐文章于 2024-01-16 09:29:42 发布

转载最新推荐文章于 2024-01-16 09:29:42 发布 · 2.1k 阅读

google地图专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何通过MarkerWithLabel.js库在Google Maps API中显示带标签的地图标记，并提供了具体的HTML和JavaScript代码示例，展示了如何创建可拖动的带有价格标签的房屋销售标记。

1 首先要引入markerwithlabel.js

链接：https://pan.baidu.com/s/1XMltPrY_KeeMhytxfs_TOA 密码：s3m4

2使用js 显示地图


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>MarkerWithLabel Example</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.google.cn/maps/api/js?region=cn&language=zh-CN&key=AIzaSyAo1MCgc64al7C7XkvKxYrvhzbkCjFTKmA"></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,
       map: map,
       labelContent: "$425K",
       labelAnchor: new google.maps.Point(22, 0),
       labelClass: "labels", // the CSS class for the label
       labelStyle: {opacity: 0.75}
     });

     var marker2 = new MarkerWithLabel({
       position: new google.maps.LatLng(49.475, -123.84),
       draggable: true,
       map: map,
       labelContent: "$395K",
       labelAnchor: new google.maps.Point(22, 0),
       labelClass: "labels", // the CSS class for the label
       labelStyle: {opacity: 0.75}
     });
     var iw = new google.maps.InfoWindow({
       content: "Home For Sale"
     });
     var iw2 = new google.maps.InfoWindow({
       content: "Another Home For Sale"
     });
     google.maps.event.addListener(marker, "click", function (e) { iw.open(map, marker); });
     google.maps.event.addListener(marker2, "click", function (e) { iw2.open(map, marker2); });
   };
 </script>
</head>
<body onload="initMap()">
<p>A basic example of markers with labels. Note that an information window appears whether you
click the marker portion or the label portion of the MarkerWithLabel. The two markers shown here
are both draggable so you can easily verify that markers and labels overlap as expected.</p>
 <div id="map_canvas" style="height: 60%; width: 100%"></div>
 <div id="log"></div>
</body>
</html>

3.
效果图  csdn传不上去了