創建高德地圖
功能真的很好很強大，有圖有證據！
1.申請key值 去官網
2.https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db3b0b6eb1ab64619e
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db3b0b6eb1ab64619e"></script>
3.有個div容器
4.創建地圖 new AMap.Map('容器的名字')；
初始化地圖（默認設定）
<div id="container"></div>
<script type="text/javascript">
new AMap.Map('container');
</script>
初始化地圖（簡單自定義設定）
var map = new AMap.Map('container',{ zoom:16, center:[116.379391,39.861536], });
getZoom() 獲取地圖的級別
getCenter(); 獲取地圖的中心位置
Zoom 的數字越大 顯示的越精細 越小顯示的范圍越大
setZoom 可以手動去設定地圖級別
map.setZoom(15);
setCenter([]) 設定中心點，放入 坐標
map.setCenter([121.222,30]);
中心點和層級一起設定
map.setZoomAndCenter(12,[121.22,30])
獲取級別和中心點
console.log(map.getZoom());
console.log(map.getCenter().toString());
on('moveend') //地圖移動結束時
on('zoomend') //地圖級別發生改變時
獲取行政區
map.getCity(function(info){
info 當前中心點的行政區
});
map.getCity(function(info){ setCenterNode.innerHTML = info.province+','+info.district });
設定行政區
map.setCity('字串') 想讓地圖到達該地區的中心點
map.setCity('天津市');
獲取地圖的范圍
console.log(map.getBounds().northeast.toString());//右上角的坐標 console.log(map.getBounds().southwest.toString());//左下角的坐標
通過事件來設定顯示限制
btn.onclick = function(){ var bounds = map.getBounds(); bounds.northeast.R = Number(xNode.value); bounds.southwest.R = Number(yNode.value); map.setLimitBounds(bounds); };
通過事件解除顯示限制
clear.onclick = function(){ map.clearLimitBounds(); };
設定地圖的顯示范圍
var myBounds = new AMap.Bounds([88.379391,20.861536],[117.379391,41.861536]) map.setBounds(myBounds); //但是不是特別精準，會以它覺得最好的方式去顯示
地圖的平移
panBy(x,y) x代表向左平移多少像素 / y代表向上平移多少像素
panTo([x坐標，y坐標]) 地圖會直接平移到這個位置
<input type="" name="" id='xNode'>
<input type="" name="" id='yNode'>
btn.onclick =function(){
map.panTo([xNode.value,yNode.value])
};
獲取滑鼠的經緯度
longitude 經度 / latitude 緯度
map.on('click',function(e){
//xyNode.innerHTML = e.lnglat.lng + ',' + e.lnglat.lat;
map.setCenter([e.lnglat.lng,e.lnglat.lat])
});
設定地圖滑鼠的默認樣式
setDefaultCursor('樣式')
cursor : 里面所有的樣式都可以
map.setDefaultCursor('-webkit-grabbing');
地圖搜索
AMap.plugin('AMap.Autocomplete',function(){
new AMap.Autocomplete().search(要搜索的內容,function(status,data){
console.log(data 搜索出來的資料)
})
})
案例：輸入地址出現下拉串列，點擊可切換地圖
<div id="container"></div>
<div id='setCenterNode'>
<!-- 搜索框 -->
<input type="" name="" id='searchText'>
<!-- 下拉串列內容顯示位置 -->
<ul id='node'></ul>
</div>
---------
new AMap.Autocomplete({
input:'searchText'
});
加載插件的方式有兩種
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db3b0b6eb1ab64619e&plugin=AMap.Autocomplete"></script>
-------------
new AMap.Autocomplete({
input:'searchText'
});
地圖搜索與POI（興趣點）結合1
AMap.service(['AMap.PlaceSearch'],function(){ new AMap.PlaceSearch({ pageSize:5, //當頁一共顯示多少條 pageIndex:1, //當前第幾頁 city:'010', //興趣點的城市 citylimit:true, //是否限制在設定的城內搜索 map:map, //展示在哪個地圖里 panel:'setCenterNode' //放在哪個元素下 }) })
地圖搜索與POI（興趣點）結合2
var searchNode = new AMap.Autocomplete({ input:'searchIpt' }); var placeSearch = new AMap.PlaceSearch({ map:map }); AMap.event.addListener(searchNode,'select',function(e){ placeSearch.search(e.poi.name) });
地圖搜索與POI（興趣點）結合3--搜索周邊
new AMap.PlaceSearch({ type:'住宿', //搜索的結果的過濾 結果型別 pageSize:5, pageIndex:1, city:'010', citylimit:true, map:map, //展示在哪個地圖里 panel:'setCenterNode' //放在哪個元素下 }).searchNearBy('北京',[116.379391,39.861536],1000,function(){});
設定標記
var marker = new AMap.Marker({ icon:'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', //標記的圖示 position:[e.lnglat.lng,e.lnglat.lat], //標記的坐標 offset:new AMap.Pixel(-25,-25) // 像素的偏差值 }); marker.setMap(map);
設定多個標記
var marker = new AMap.Marker({ icon:'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', //標記的圖示 position:[116.379391,39.861536], //標記的坐標 // offset:new AMap.Pixel(-50,-500) // 像素的偏差值 }); var marker2 = new AMap.Marker({ icon:'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', //標記的圖示 position:[116.378391,39.825536], //標記的坐標 // offset:new AMap.Pixel(-50,-500) // 像素的偏差值 }); map.add([marker,marker2])
自定義標記圖示
var mk1 = new AMap.Icon({ size:new AMap.Size(500,500), //圖示大小 image:'./1.jpg', //圖片地址 imageSize:new AMap.Size(100,100) //最終在map里面顯示的大小 // imageOffset:new AMap.Pixel(-50,-50) //裁剪 偏差值 }); var marker = new AMap.Marker({ position:[116.379391,39.861536], icon:mk1 }); map.add([marker])
洗掉標記
marker.setMap(null); map.remove([marker]);
縮放比例尺控制元件
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db3b0b6eb1ab64619e&plugin=AMap.Scale,AMap.ToolBar"></script>
map.addControl(new AMap.scale());
map.addControl(new AMap.ToolBar());
3d地圖
var map = new AMap.Map('container',{ zoom:17, pitch:90, center:[116.379391,39.861536], viewMode:'3D', //變成了3d 地圖了 buildingAnimation:true // 可以讓顯示的建筑物變成影片現實 }); map.addControl(new AMap.ControlBar({ showZoomBar:true, // 顯示 zoom條控制元件 // showControlButton:true,// 可以取消 傾斜旋轉角度的按鈕 position:{ //控制元件的定位 right:'50px', top:'30px' } }))
駕駛導航
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db3b0b6eb1ab64619e&plugin=AMap.Driving,AMap.Autocomplete"></script>
new AMap.Driving({
map:map,
panel:'panel'
}).search([
{keyword:起點,city:'北京'},
{keyword:終點,city:'北京'}
],function(status,data){
console.log(data);
})
通過滑鼠點擊獲取起始點和終點，規劃駕車路線
var num = 0, arr = []; map.on('click',function(e){ num++; if(num%2 == 1){ arr = [e.lnglat.R,e.lnglat.P]; } else{ new AMap.Driving({ map:map, panel:'panel' }).search(new AMap.LngLat(arr[0],arr[1]),new AMap.LngLat(e.lnglat.R,e.lnglat.P),function(status,data){ console.log(data); }) } });
通過經緯度 來進行導航
new AMap.Driving({ map:map, panel:'panel' }).search(new AMap.LngLat(startX,startY),new AMap.LngLat(endX,endY),function(status,data){ console.log(data); })
步行路線的規劃
new AMap.Walking({ map:map, panel:'panel' }).search([ {keyword:起點,city:'北京'}, {keyword:終點,city:'北京'} ],function(status,data){ console.log(data); })
步行路線的坐標規劃
new AMap.Walking({ map:map, panel:'panel' }).search([x,y],[x,y],function(status,data){ console.log(data); })
貨車路線規劃（多點）-坐標
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db3b0b6eb1ab64619e&plugin=AMap.TruckDriving,AMap.Autocomplete"></script>
new AMap.TruckDriving({
map:map,
panel:'panel',
city:'beijing',//城市
size:1 //大小
}).search([{lnglat:[116.379391,39.861536]},{lnglat:[116.979391,39.161536]},{lnglat:[116.579391,40.861536]}],function(status,data){
console.log(data);
});
貨車路線規劃（多點）-位置
new AMap.TruckDriving({ map:map, panel:'panel', city:'beijing',//城市 size:1 //大小 }).search([{ keyword:'起點' }, { keyword:'途徑點' } { keyword:'途徑點' } { keyword:'終點' }],function(status,data){ console.log(data); });
騎行路線規劃
new AMap.Riding({
map:map,
panel:'panel'
}).search(new AMap.LngLat(startX,startY),new AMap.LngLat(endX,endY),function(status,data){
console.log(data);
})
<div id="container"></div>
<div id='panel'></div>
<div id='search'>
起點:<input type="" name="" id='startNode'><br>
終點:<input type="" name="" id='endNode'><br>
<button id='btn'>開始導航</button>
</div>
var map = new AMap.Map('container',{
zoom:11,
center:[116.379391,39.861536],
});
new AMap.Autocomplete({
input:'startNode'
});
new AMap.Autocomplete({
input:'endNode'
});
btn.onclick = function(){
new AMap.Riding({
map:map,
panel:'panel'
}).search([
{keyword:startNode.value,city:'北京'},
{keyword:endNode.value,city:'北京'}
],function(status,data){
console.log(data);
})
};
根據滑鼠點擊錄入起始點和目標，規劃騎行路線
var num = 0, arr = []; map.on('click',function(e){ num++; // 點擊一次時將起始點計入陣列 if(num%2 == 1){ arr = [e.lnglat.R,e.lnglat.P]; }else{ // 第二次點擊時開始規劃路線 new AMap.Riding({ map:map, panel:'panel' }).search(new AMap.LngLat(arr[0],arr[1]),new AMap.LngLat(e.lnglat.R,e.lnglat.P),function(status,data){ console.log(data); }) } });
地鐵+公交的導航方式
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db3b0b6eb1ab64619e&plugin=AMap.Transfer,AMap.Autocomplete"></script>
new AMap.Transfer({
map:map,
panel:'panel'
}).search([
{keyword:起始點,city:'北京'},
{keyword:終點,city:'北京'}
//只支持陣列的前兩個內容
],function(status,data){
console.log(data);
})
根據滑鼠點擊錄入起始點和目標，規劃公交路線
var num = 0, arr = []; map.on('click',function(e){ num++; if(num%2 == 1){ arr = [e.lnglat.R,e.lnglat.P]; } else{ new AMap.Transfer({ map:map, panel:'panel', city:'北京' }).search(new AMap.LngLat(arr[0],arr[1]),new AMap.LngLat(e.lnglat.R,e.lnglat.P),function(status,data){ console.log(data); }) } });
地圖型別的切換
AMap.MapType 引入這個插件
map.addControl(new AMap.MapType({ defaultType:1,//0 默認 1代表的是衛星 showRoad:true //顯示路況 }));
常用的插件 鷹眼插件 OverView
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db3b0b6eb1ab64619e&plugin=AMap.OverView"></script>
map.addControl(new AMap.OverView());
控制元件的添加show()
控制元件的洗掉hide()
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db3b0b6eb1ab64619e&plugin=AMap.OverView,AMap.Scale,AMap.ToolBar"></script>
var oV = new AMap.OverView({
visible:true //默認顯示和隱藏
});
var oS = new AMap.Scale();
var oT = new AMap.ToolBar()
map.addControl(oV);
map.addControl(oS);
map.addControl(oT);
let yyNode = gjtNode = blcNode = true;
// 鷹眼（點擊對應的控制鷹眼按鈕）
yy.onclick = function(){
if(yyNode == true){
oV.hide();
}
else{
oV.show();
};
yyNode = !yyNode
};
// 工具條
gjt.onclick = function(){
if(gjtNode == true){
oT.hide();
}
else{
oT.show();
};
gjtNode = !gjtNode
};
// 比例尺
blc.onclick = function(){
if(blcNode == true){
oS.hide();
}
else{
oS.show();
};
blcNode = !blcNode
}
地圖加載完成事件 complete
map.on('complete',function(){
var text = new AMap.Text({
text:'地圖加載完成',
draggable:true,
position:[116.379391,39.861536]
}).on('mousemove',function(){
console.log(1)
});
text.setMap(map);
});
console.log('地圖未加載');
地圖顯示等級改變事件
map.on('zoomstart',function(){
console.log('地圖等級改變開始');
});
map.on('zoomend',function(){
console.log('地圖等級改變結束');
});
中心點移動事件
map.on('mapmove',function(){
console.log('中心點移動中.');
});
map.on('movestart',function(){
console.log('地圖中心點開始移動');
});
map.on('moveend',function(){
console.log('地圖中心點移動結束');
});
地圖容器大小發生改變事件
map.on('resize',function(){
console.log('容器大小改變中');
});
覆寫物與地圖的互動
//覆寫物 var text = new AMap.Text({ text:'覆寫物事件', position:[116.379391,39.861536] }); //滑鼠移入覆寫物 text.on('mouseover',function(){ console.log('覆寫物移入'); }); //滑鼠移出覆寫物 text.on('mouseout',function(){ console.log('覆寫物移出'); }); //滑鼠在覆寫物上移動 text.on('mousemove',function(){ console.log('覆寫物上移動滑鼠'); });
插入圓形的矢量圖
var circle = new AMap.Circle({ center:[116.379391,39.861536], radius:10 }); circle.setMap(map);
插入長方形的矢量圖
var rectangle = new AMap.Rectangle({ bounds:new AMap.Bounds(new AMap.LngLat(116.379391,39.861536),new AMap.LngLat(116.379491,39.861636)) }); rectangle.setMap(map);
hide()隱藏
show()顯示
circle.hide();
rectangle.show();
右鍵選單事件
//創建一個右鍵選單 var contextmenu = new AMap.ContextMenu(); //右鍵的第一個選單 contextmenu.addItem('放大一級',function(){ map.zoomIn(); },0); //右鍵的第二個選單 contextmenu.addItem('縮小一級',function(){ map.zoomOut(); },1); //給地圖系結右鍵 map.on('rightclick',function(e){ //打開右鍵 //map 在哪個地圖里 //引數2 - 位置 contextmenu.open(map,e.lnglat); setTimeout(function(){ contextmenu.close(); },3000); // 關閉右鍵選單 });
DOM事件系結
AMap.event.addDomListener （系結的元素，系結的事件名（click、mousedown），函式） var lis1 = AMap.event.addDomListener(button1,'click',function(){ map.zoomIn(); });
DOM事件解除系結
AMap.event.removeListener (要解除系結函式名) AMap.event.addDomListener(button2,'click',function(){ AMap.event.removeListener(lis1); });
自定義事件 addListener/on/emit
//變數記錄點擊幾次 var count = 0; //點擊事件 var _onClick = function(){ //count事件：事件派發 也可以說是變數的改變 map.emit('count',{count:count += 1}); }; //監聽的變數發生改變時觸發的函式 var _onCount = function(){ console.log(count); }; //監聽的變數發生改變時 map.on('count',_onCount); AMap.event.addListener(map,'click',_onClick);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/18225.html
標籤：HTML5