//輸入提示,並實現搜索開始=========
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============
web 高德地圖輸入提示並實現搜索,並修改點標記的窗體信息、實時路況、衛星圖層、右鍵菜單
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.