在地圖中顯示臨近景點

昨天已經可以在頁面中列出臨近的景點及其相隔距離。

今天把這些景點及其距離在百度地圖中標註出來。

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的背景，需要使用絕對路徑，這個就比較糾結了。