Google地图自定义mark样式的方法 - 首页

在google v3里面取消了marker的label方法，所以要自己定义叠加层来使用带文字标签的标注，但是自定义的话非常繁琐，故引用现成的markerwithlabel.js即可以实现对标注添加label。在使用过程中发生这么一个问题：marker标注的图标虽然显示出来了，但是都是集中在一个点（貌似是最后一个marker的位置）,下面是博主写的案列，插件API接口如下：

<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>MarkerWithLabel Exampletitle>
 <style type="text/css">
   .labels {
     color: #000;
     font-weight: 900;
     font-size: 10px;
     text-align: center;
     white-space: nowrap;
   }
 style>
 <script type="text/javascript" src="http://maps.google.cn/maps/api/js?key=AIzaSyANKFJ6sPjtLzB81kkGdb8bmCsL5S_C1X8&libraries&sensor=false">script>
    
 <script type="text/javascript" src="../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 marker1 = new MarkerWithLabel({
       icon:"circle.png", //mark标记的文字样式
       position: homeLatLng, //mark标记的经纬度
       map: map,
       labelContent: "我是内容
我是数字", //添加的文字
       labelAnchor: new google.maps.Point(65, 60),//参数为x轴y轴的坐标
       labelClass: "labels", // the CSS class for the label
       labelStyle: {opacity: 1} //设置文字的透明度
     });
      var marker2 = new MarkerWithLabel({
        icon:"circle.png",
        position: new google.maps.LatLng(49.475, -123.84), //mark标记的经纬度
        draggable: true,//是否可以拖拽（默认为false不可拖拽）
        raiseOnDrag: true, //mark是否可以跳动
        map: map,
        labelContent: "$395K",//添加的文本内容
        labelAnchor: new google.maps.Point(65, 60),
        labelClass: "labels", //设置labels的样式
        labelStyle: {opacity: 1.0} //设置文字的透明度
      });
      var iw1 = new google.maps.InfoWindow({
        content: "我是mark弹出来的内容1"
      });
      var iw2 = new google.maps.InfoWindow({
        content: "我是mark弹出来的内容2"
      });
     google.maps.event.addListener(marker1, "click", function (e) { iw1.open(map, this); }); //点击mark触发事件弹出内容
     google.maps.event.addListener(marker2, "click", function (e) { iw2.open(map, this); });///点击mark触发事件弹出内容
   }
 script>
head>
<body onload="initMap()">
<div id="map_canvas" style="height: 400px; width: 100%;">div>
body>
html>

这样我们就可以随意的改变地图mark的标记样式了，当然也可以动态加入我们需要的内容，希望能帮到大家！
文中用到的插件markerwithlabel.js可下载，
链接：点击下载密码：y1ot
版权声明：本文为博主原创文章，未经博主允许不得转载。