1. 程式人生 > >利用百度API將自定義的點標註在百度地圖上

利用百度API將自定義的點標註在百度地圖上

有時候我們需要將自定義的點的資訊標註在地圖上,正好最近用到了這個功能,網上學習百度API後,也已經實現,現在在這做一個總結。

1.實現過程

要使用百度API,我們首先需要得到一個金鑰(ak),這個可以免費申請,具體申請流程在這就不贅述了。
現在詳細介紹下實現標註的流程:
首先建立一個map例項,設定地圖中心點

var map = new BMap.Map("allmap");//建立map例項
map.centerAndZoom(new BMap.Point(100.1883,25.7794),11);//用經緯度設定地圖中心點

然後得到文字框輸入的經緯度,建立標註,並將標註新增到地圖中

var
new_point = new BMap.Point(document.getElementById("longitude").value,document.getElementById("latitude").value); var marker = new BMap.Marker(new_point); // 建立標註 map.addOverlay(marker);// 將標註新增到地圖中

建立一個標註資訊視窗

var opts = {
            width : 20,// 資訊視窗寬度
            height: 20,// 資訊視窗高度
            }

建立標註資訊視窗物件,即將文字框輸入的值顯示在標註資訊視窗中

var infoWindow = new BMap.InfoWindow('<li style="list-style-type:none;">'+'POI名稱:'+document.getElementById("name").value+'</li>'+
                                     '<li style="list-style-type:none;">'+'POI地址名稱:'+document.getElementById("address").value+'</li>',opts);  

建立一個點選事件,點選標註時,開啟標註資訊視窗

marker.addEventListener("click", function(){          
                        map.openInfoWindow(infoWindow,new_point); 
                        });//點選後開啟標註資訊視窗

2.實現結果

在文字框中輸入想要標註在地圖中的資訊,如輸入POI名稱,POI地址名稱,POI經度和POI緯度後,結果如下圖所示

這樣就將資訊點標註在地圖上了