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

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

yhy0901

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

阅读量2k

点赞数 1

分类专栏： google地图

google地图专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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传不上去了