昨天已经可以在页面中列出临近的景点及其相隔距离。
今天把这些景点及其距离在百度地图中标注出来。
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的背景,需要使用绝对路径,这个就比较纠结了。