百度地图JavaScriptAPI 学习之⾃定义标注图标（⼀）
地图绘制之添加⾃定义标注图标（⼀）通过Icon 类可实现⾃定义标注的图标。官⽅提供了两种⽅法：通过参数MarkerOptions 的icon 属性进⾏设置使⽤Marker.setIcon()⽅法。
第⼀种⽅法但是，第⼆个可选参数MarkerOptions 在这⾥就可以发挥它的⽤途了。
⽤法如下： 由上图可知：由于该类没有构造函数，所以不能实例化，但是可以通过对象字⾯量形式表⽰。⽽且我们还能使⽤它的属性来标注图标，并且设置标注的位置。
注：对象字⾯量形式其实就是键值对的形式。第⼀次没看明⽩说的是什么意思？
因此，如果要使⽤⾃定义的图标进⾏标注，应该这么写：疑问：myIcon 怎么来的呢？ 答：其实在⽂章最开始时已经提到过了。那就是，通过Icon 类可实现⾃定义标注的图标。Icon 类 ——
//创建标注点，我们通常如下这样写：只传递⼀个Ponit 类型的参数，即地理位置的坐标点。省略第⼆个参数var  mk = new  BMap(point);
var  mk = new  BMap.Marker(point,{icon:myIcon});//这就是对象的字⾯量形式
分析： （1）构造函数Icon()中有3个参数：String 类型的图⽚地址
url ；Size 类型的图⽚⼤⼩；和可选参数IconOptions 。
（2）使⽤的时候，直接new ⼀下就⾏了，即实例化。var myIcon = new BMap.Icon(url,size,opts);Size 类 ——分析：
（1）构造函数Size()中有2个参数：Number 类型的矩形区域的宽和⾼。对应到标注图标就是图⽚的宽和⾼。
（2）使⽤的时候，直接new ⼀下就⾏了，即实例化。
有了以上的基础，使⽤Icon 类创建⼀个⾃定义的标注图标就轻松多了。var size = new BMap.Size(32,32)；使⽤⽅法：
⾄此，⼀个⾃定义的标注图标就创建好了。第⼀步已经完成。
第⼆步要做的就是，利⽤这个图标创建⼀个标注，并且添加在地图中。
//命名空间BMap 是使⽤所有类的前提，别忘了。var  myIcon = new  BMap.Icon('location.ico',new  BMap.Size(32,32));//这⾥先不⽤第三个参数IconOptions
var mk = new  BMap.Marker(point,{icon:myIcon});//创建标注图标
map.addOverlay(mk);//将标注添加到地图中
设置完成之后是这样的：
疑问：如何调整标注图标的位置？
答：有两种⽅法
（1）利⽤MarkerOptions类的属性来设置； （2）利⽤Icon类的属性来设置。
这⾥选⽤第⼀种⽅法来设置图标的偏移。
由上表可知，我们使⽤MarkerOptions类的offset属性来设置标注的位置偏移值。
//顺便也使⽤了title属性设置了⿏标移⼊标注的显⽰内容
var mk = new BMap.Marker(point,{offset:new BMap.Size(0,-10),icon:icon,title:'当前定位的位置是：天安门'})；设置完成之后是这样的：
为了进⼀步验证，这个标注图标是如何实现的，以及它的位置是如何偏移的。
做法：
我们只需要直接打开控制台审查元素就好了，然后对⽐⼀下标注图标偏移前后的HTML元素的CSS属性值，就可以知道了。
偏移后的：{offset:new BMap.Size(0,-10)}
未偏移的：{offset:new BMap.Size(0,0)}
结论：
icon图标库（1）span元素是图标的可视区域，并不是图标本⾝。
（2）图标本⾝是通过span元素的background属性设置的。
（3）offset属性的作⽤是：设置span元素的偏移，即整个图⽚区域的偏移量，相当于设置它的left，top属性。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。