在地图中显示临近景点

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

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

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);

2、编写用于在地图上显示的结构体

要在地图上标示出临近的景点及其距离，需要知道三个参数：经度、维度、距离。

工程中虽然有String、String、int的结构体组合，但是是用在别处的，因此为了业务清晰，要定义一个结构体，如下：

3、理清展现层的链接关系

4、编写jsp页面和相应的servlet

在jsp里面用EL表达式给js赋值，编译器还是依旧报错但可以运行。

5、结果

后记：

如果用图片做label的背景，需要使用绝对路径，这个就比较纠结了。