web 高德地圖輸入提示並實現搜尋,並修改點標記的窗體資訊、實時路況、衛星圖層、右鍵選單
阿新 • • 發佈:2019-02-11
//輸入提示,並實現搜尋開始========= AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'],function(){ var autoOptions = { city: "", //城市,預設全國 input: "searchipt"//使用聯想輸入的input的id }; autocomplete= new AMap.Autocomplete(autoOptions); var placeSearch = new AMap.PlaceSearch({ map:'' //map:map }); AMap.event.addListener(autocomplete, "select", function(e){ //TODO 針對選中的poi實現自己的功能 //placeSearch.search(e.poi.name); //預設搜尋功能 //重寫搜尋點及其提示資訊begin===== placeSearch.setCity(e.poi.adcode); if (e.poi && e.poi.location) { map.setZoom(17); map.setCenter(e.poi.location); } placeSearch.search(e.poi.name, checkD); //關鍵字查詢查詢 var searchInfoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(105, -8), isCustom:true }); function checkD(status, result) { if (status === 'complete' && result.info === 'OK') { for(var h=0;h<result.poiList.pois.length;h++){//返回搜尋列表迴圈繫結marker var jy=result.poiList.pois[h]['location'];//經緯度 var name=result.poiList.pois[h]['name'];//地址 var searchmarker=new AMap.Marker({ //加點 map: map, position: jy, icon: new AMap.Icon({ image: localIcon }) }); searchmarker.extData = {'getLng':jy['lng'],'getLat':jy['lat'],'name':name,'address':result.poiList.pois[h]['address']};//自定義想傳入的引數 searchmarker.on("click",function(e) { var hs=e.target.extData; var content = searchContent(hs['name'],hs['address'],hs['getLng'],hs['getLat']); searchInfoWindow.setContent(content);//點選以後視窗展示的內容 searchInfoWindow.open(map, e.target.getPosition()); }); } } } //重寫搜尋點及其提示資訊end===== }); }); //輸入提示,並實現搜尋結束========= //點選搜尋按鈕 開始========= $('#searchbtn').on('click', function () { var searchVal = $('#searchipt').val(); var flag = false; var searchPPOI; if(lineArr.length > 0){ for(var j=0;j<lineArr.length;j++){ var data = lineArr[j]; if(String(data[0]).indexOf(searchVal) > -1){ flag = true; searchPPOI = data[1]; break; } } } if(flag){ map.setCenter(searchPPOI); map.setZoom(17); var searchInfoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(75, -8), isCustom:true }); var searchmarker=new AMap.Marker({ //加點 map: map, position: searchPPOI, icon: new AMap.Icon({ image: localIcon }) }); searchmarker.extData = {'getLng':searchPPOI[0],'getLat':searchPPOI[1],'name':searchVal,'address':''};//自定義想傳入的引數 searchmarker.on("click",function(e) { var hs=e.target.extData; var content = searchContent(hs['name'],hs['address'],hs['getLng'],hs['getLat']); searchInfoWindow.setContent(content);//點選以後視窗展示的內容 searchInfoWindow.open(map, e.target.getPosition()); }); }else{ var autoOptions_btn = { city: "" //城市,預設全國 }; var searchInfoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(105, -8), isCustom:true }); var autocomplete_btn = new AMap.Autocomplete(autoOptions_btn); autocomplete_btn.search(searchVal, function(status, result){ if (status === 'complete' && result.info === 'OK') { map.setCenter(result.tips[0]['location']); map.setZoom(17); for(var h=0;h<result.tips.length;h++){//返回搜尋列表迴圈繫結marker var jy=result.tips[h]['location'];//經緯度 var name=result.tips[h]['name'];//地址 var searchmarker=new AMap.Marker({ //加點 map: map, position: jy, icon: new AMap.Icon({ image: localIcon }) }); searchmarker.extData = {'getLng':jy['lng'],'getLat':jy['lat'],'name':name,'address':result.tips[h]['address']};//自定義想傳入的引數 searchmarker.on("click",function(e) { var hs=e.target.extData; var content = searchContent(hs['name'],hs['address'],hs['getLng'],hs['getLat']); searchInfoWindow.setContent(content);//點選以後視窗展示的內容 searchInfoWindow.open(map, e.target.getPosition()); }); } } }); } }); //點選搜尋按鈕 結束========= //構造地點查詢類,隨便點選某一個點 開始====== var placeSearch = new AMap.PlaceSearch(); var infoWindow=new AMap.AdvancedInfoWindow({}); map.on('hotspotclick', function(result) { placeSearch.getDetails(result.id, function(status, result) { if (status === 'complete' && result.info === 'OK') { placeSearch_CallBack(result); } }); }); //回撥函式 function placeSearch_CallBack(data) { //infoWindow.open(map, result.lnglat); var poiArr = data.poiList.pois; createContent(poiArr[0]); } function createContent(poi) { //資訊窗體內容 var info = []; info.push(searchContent(poi.name,poi.address,poi.location.lng,poi.location.lat)); infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(102, 20), isCustom:true, content: info.join('<br>') //使用預設資訊窗體框樣式,顯示資訊內容 }); infoWindow.open(map, poi.location); } //構造地點查詢類,隨便點選某一個點 結束====== //實時路況圖層begin==== var trafficLayer = new AMap.TileLayer.Traffic({ zIndex: 10 }); trafficLayer.setMap(map); trafficLayer.hide();//第一次進來不顯示 var isVisible = false; AMap.event.addDomListener(document.getElementById('lukuang'), 'click', function() { if (isVisible) { trafficLayer.hide(); isVisible = false; } else { trafficLayer.show(); isVisible = true; } }, false); //實時路況圖層end==== //衛星圖層begin==== var satelliteLayer = new AMap.TileLayer.Satellite({ zIndex:11 }); satelliteLayer.setMap(map); satelliteLayer.hide();//第一次進來不顯示 var isVisible = false; AMap.event.addDomListener(document.getElementById('weixing'), 'click', function() { if (isVisible) { satelliteLayer.hide(); isVisible = false; } else { satelliteLayer.show(); isVisible = true; } }, false); //衛星圖層end==== //右鍵選單begin============ var contextMenu = new AMap.ContextMenu(); //建立右鍵選單 //右鍵新增Marker標記 contextMenu.addItem("設為起點", function(e) { var marker = new AMap.Marker({ icon:localIcon, map: map, position: contextMenuPositon //基點位置 }); }, 3); //右鍵新增Marker標記 contextMenu.addItem("設為終點", function(e) { var marker = new AMap.Marker({ map: map, icon:localIcon, position: contextMenuPositon //基點位置 }); }, 3); //地圖繫結滑鼠右擊事件——彈出右鍵選單 map.on('rightclick', function(e) { contextMenu.open(map, e.lnglat); contextMenuPositon = e.lnglat; }); //右鍵選單end============