Label

2021-08-02  本文已影响0人  懒懒猫

该文章取自百度地图官方文档

Labbel:文本标注

一,创建基本地图
    var map = new BMapGL.Map("allmap");    // 创建Map实例
    map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
二,向地图中添加文本标注
var point = new BMapGL.Point(116.404, 39.915);
var content = "label";
var label = new BMapGL.Label(content, {       // 创建文本标注
    position: point,                          // 设置标注的地理位置
    offset: new BMapGL.Size(10, 20)           // 设置标注的偏移量
})  
map.addOverlay(label);                        // 将标注添加到地图中
三,修改文本标注样式

通过setStyle类可实现自定义文本标注的样式,其参数为一个表示样式的JavaScript对象常量。如果不设置就是默认样式
注意:如果css的属性名中包含连字符,需要将连字符去掉并将其后的字母进行大写处理

label.setStyle({                              // 设置label的样式
    color: '#000',
    fontSize: '30px',
    border: '2px solid #1E90FF'
})
四,监听标注事件
JSAPI支持监听覆盖物的事件。
label.addEventListener("click", function(){  
    alert("您点击了标注");  
});

Marker:绘制点标注

Marker的构造函数的参数为Point和MarkerOptions(可选)。当您使用自定义图标时,标注的地理坐标点将位于标注所用图标的中心位置,您可通过Icon的offset属性修改标定位置。

一,参考展示地图创建基本地图
二,向地图中添加标注
var point = new BMapGL.Point(116.404, 39.915);   
var marker = new BMapGL.Marker(point);        // 创建标注   
map.addOverlay(marker);                     // 将标注添加到地图中
三,向地图中添加标注

定义标注图标 :下面示例通过参数MarkerOptions的icon属性进行设置,您也可以使用marker.setIcon()方法。

var myIcon = new BMapGL.Icon("markers.png", new BMapGL.Size(23, 25), {   
    // 指定定位位置。  
    // 当标注显示在地图上时,其所指向的地理位置距离图标左上   
    // 角各偏移10像素和25像素。您可以看到在本例中该位置即是  
    // 图标中央下端的尖角位置。   
    anchor: new BMapGL.Size(10, 25),   
    // 设置图片偏移。  
    // 当您需要从一幅较大的图片中截取某部分作为标注图标时,您  
    // 需要指定大图的偏移位置,此做法与css sprites技术类似。   
    imageOffset: new BMapGL.Size(0, 0 - 25)   // 设置图片偏移   
});     
    // 创建标注对象并添加到地图  
var marker = new BMapGL.Marker(point, {icon: myIcon});   
map.addOverlay(marker); 
 #####四,监听标注事件
JSAPI支持监听覆盖物的事件。

marker.addEventListener("click", function(){   
    alert("您点击了标注");   
});

Marker与Label区别

用label制作的房产标注,不是正规标注marker,而是文字标签label

var infoWindow = new BMap.InfoWindow("<p style='font-size:12px;lineheight:1.8em;'>我是lable打开的信息窗口  <img src='http://dev.baidu.com/wiki/static/static/img/new.gif' /></p>");  // 创建信息窗口对象
myLabel.addEventListener("click", function(){  
    map.openInfoWindow(infoWindow, point);  
});  
上一篇下一篇

猜你喜欢

热点阅读