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