在地图中显示临近景点

现在的位置: 首页 > 综合 > 正文

RSS

在地图中显示临近景点

2012年10月14日 ⁄ 综合 ⁄ 共 944字 ⁄ 字号小中大 ⁄ 评论关闭

昨天已经可以在页面中列出临近的景点及其相隔距离。

今天把这些景点及其距离在百度地图中标注出来。

1、百度Maker和Label覆盖物

“Marker：标注表示地图上的点，可自定义标注的图标。
Label：表示地图上的文本标注，您可以自定义标注的文本内容。"

根据百度API文档中的描述，选择Maker作为当前位置的标注，Label作为周围景点的标注（因为可以定义文本的内容，因此可以讲距离写到label上）

Marker的用法：

var map = new BMap.Map("position");
var point = new BMap.Point(${currentLocation.longitude}, ${currentLocation.latitude});
map.centerAndZoom(point, 19);
var marker = new BMap.Marker(point);
map.addOverlay(marker);

Label的用法：

var map = new BMap.Map("container");
var point = new BMap.Point(108.977055,34.217921); 
map.centerAndZoom(point, 17); 
var label1 = new BMap.Label("50m");
label1.setPosition(new BMap.Point(108.977055,34.217921));
label1.setOffset(new BMap.Size(-100,-20));
label1.setStyle({
backgroundColor:"#003366",
color:"white"
});
map.addOverlay(label1);