伴隨著移動互聯(lián)網(wǎng)的快速普及，地圖應(yīng)用成為了人們出行、旅游、生活不可或缺的一部分。在網(wǎng)頁中嵌入交互地圖，也是當(dāng)前網(wǎng)頁設(shè)計(jì)中不可或缺的組成部分。而Javascript作為前端開發(fā)的主要語言，自然少不了在地圖交互中發(fā)揮作用。接下來我們將詳細(xì)介紹Javascript在交互地圖中的應(yīng)用。

在交互地圖中，常見的一種應(yīng)用場景是標(biāo)點(diǎn)與文本的交互，比如手機(jī)APP上的某個(gè)景點(diǎn)地圖，我們點(diǎn)擊一個(gè)標(biāo)點(diǎn)圖標(biāo)后可以顯示有關(guān)景點(diǎn)的詳細(xì)信息。在Javascript中，我們可以通過創(chuàng)建一個(gè)地圖對象，然后在這個(gè)地圖上添加多個(gè)標(biāo)點(diǎn)對象來實(shí)現(xiàn)標(biāo)點(diǎn)與文本的交互。下面我們就來看一下代碼示例：

//創(chuàng)建地圖對象
var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
//標(biāo)注物增加監(jiān)聽事件
function addClickHandler(content,marker){
marker.addEventListener("click",function(e){
openInfo(content,e)}
);
}
//打開信息窗口
function openInfo(content,e){
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(content,{title:"",width:200,height:100});
map.openInfoWindow(infoWindow,point);
}
//添加自定義標(biāo)注物
function addMarker(point,content){
var marker = new BMap.Marker(point);
map.addOverlay(marker);
marker.setAnimation(BMAP_ANIMATION_BOUNCE);
addClickHandler(content,marker);
}
var point = new BMap.Point(116.404,39.915);
var marker = new BMap.Marker(point);  // 創(chuàng)建標(biāo)注
var content = "地址：北京市海淀區(qū)中關(guān)村";
map.addOverlay(marker);               // 將標(biāo)注添加到地圖中
addClickHandler(content,marker);

在代碼示例中，我們通過實(shí)例化一個(gè)BMap.Map對象來創(chuàng)建一個(gè)地圖，然后在地圖上添加標(biāo)注物，當(dāng)鼠標(biāo)點(diǎn)擊標(biāo)注物時(shí)，彈出一個(gè)信息窗口顯示對應(yīng)的內(nèi)容。由于Javascript處理交互事件的能力較強(qiáng)，因此在地圖的交互過程中可以自定義界面及事件，增強(qiáng)用戶體驗(yàn)。

除了標(biāo)點(diǎn)與文本的交互，地圖的搜索功能也是比較常見的一個(gè)應(yīng)用。比如用戶想要查找某個(gè)餐廳的位置，通過Javascript框架與地圖API的結(jié)合，我們可以創(chuàng)建一個(gè)搜索框并實(shí)現(xiàn)搜索功能。下面是一段搜索代碼示例：

//創(chuàng)建百度地圖對象
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(113.266780,23.131919), 12);
map.enableScrollWheelZoom();
//創(chuàng)建一個(gè)搜索框
var ac = new BMap.Autocomplete(    //建立一個(gè)自動完成的對象
{"input" : "searchBox"
,"location" : map
});
//添加監(jiān)聽事件，執(zhí)行搜索操作
ac.addEventListener("onconfirm", function(e) {    //鼠標(biāo)點(diǎn)擊下拉列表后的事件
var _value = e.item.value;
var myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
alert(myValue);
setPlace();
});
//搜索操作
function setPlace(){
map.clearOverlays();    //清除地圖上所有覆蓋物
var local = new BMap.LocalSearch(map, { //智能搜索
onSearchComplete: function(results){
if (local.getStatus() == BMAP_STATUS_SUCCESS){
var s = [];
for (var i = 0; i < results.getCurrentNumPois(); i ++){
s.push(results.getPoi(i).title);
var point = new BMap.Point(results.getPoi(i).point.lng, results.getPoi(i).point.lat);
var marker = new BMap.Marker(point);  // 創(chuàng)建標(biāo)注
map.addOverlay(marker);               // 將標(biāo)注添加到地圖中
}
alert(s.join("<br>"));
}
}
});
local.search(myValue);
}

在代碼示例中，我們首先創(chuàng)建了一個(gè)BMap.Map對象，然后創(chuàng)建了一個(gè)搜索框，當(dāng)用戶在搜索框中輸入地址信息后，執(zhí)行setPlace函數(shù)，根據(jù)輸入的地址信息在地圖上進(jìn)行搜索，并將搜索結(jié)果返回給用戶，并在地圖上標(biāo)出相關(guān)位置的標(biāo)注。

total JS的GIS開發(fā)框架、OpenLayers API等也是常用的GIS地圖框架，也促進(jìn)了交互地圖應(yīng)用的發(fā)展。

總之，Javascript在交互地圖應(yīng)用中發(fā)揮了越來越重要的作用，目前國內(nèi)外對于地圖API的研發(fā)也越來越成熟，未來地圖應(yīng)用必將成為更加豐富、便捷的手機(jī)APP及網(wǎng)頁應(yīng)用。