欢迎访问响应式个人博客!
男生版
女生版
初遇时,她的微笑,她往日的深情、承诺和傻劲,两个人共度的美丽时刻,一一印在回忆里,今天的感情已经比不上从前,但是我爱着恋着往日的她,舍不得离开!
排行
详情
您当前的位置>首页 > 正文
Google地图自定义mark样式的方法
2017-08-21 10:40:00   来源:博主个人总结   评论:0 点击:

在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
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关热词搜索:google 地图 mark

上一篇:Heatmap.js – 最强大的 Web 动态热图
下一篇:javascript中的深拷贝和浅拷贝?

收藏