创建高德地图
功能真的很好很强大，有图有证据！
@H_404_8@
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 = ,{ zoom:16],});
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 = (){ var bounds = map.getBounds(); bounds.northeast.R = Number(xNode.value); bounds.southwest.R = Number(yNode.value); map.setLimitBounds(bounds); };
通过事件解除显示限制
clear.onclick = (){
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 =(){
map.panTo([xNode.value,yNode.value])
};
获取鼠标的经纬度
longitude 经度 / latitude 纬度
map.on('click',(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',1)">(){
new AMap.Autocomplete().search(要搜索的内容,1)">(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>
-------------
});
地图搜索与POI（兴趣点）结合1
AMap.service(['AMap.PlaceSearch'],1)">(){
AMap.PlaceSearch({
pageSize:5,1)">当页一共显示多少条
pageIndex:1,1)">当前第几页
city:'010',1)">兴趣点的城市
citylimit:true,1)">是否限制在设定的城内搜索
map:map,1)">展示在哪个地图里
panel:'setCenterNode' 放在哪个元素下
})
})
地图搜索与POI（兴趣点）结合2
var searchNode = AMap.Autocomplete({ input:'searchIpt' }); var placeSearch = AMap.PlaceSearch({ map:map }); AMap.event.addListener(searchNode,'select',1)">(e){ placeSearch.search(e.poi.name) });
AMap.PlaceSearch({ type:'住宿',1)">搜索的结果的过滤 结果类型 pageSize:5'010'true展示在哪个地图里 panel:'setCenterNode' 放在哪个元素下 }).searchNearBy('北京',[116.379391,39.861536],1000,1)">function(){});
设置标记
var marker = AMap.Marker({ icon:'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',1)">标记的图标 position:[e.lnglat.lng,e.lnglat.lat],1)">标记的坐标 offset:new AMap.Pixel(-25,-25) 像素的偏差值 }); marker.setMap(map);
设置多个标记
AMap.Marker({ icon:'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',1)">标记的图标 position:[116.379391,1)">标记的坐标 offset:new AMap.Pixel(-50,-500) // 像素的偏差值 }); var marker2 = 标记的图标 position:[116.378391,39.825536],1)"> }); map.add([marker,marker2])
var mk1 = AMap.Icon({ size:new AMap.Size(500,500),1)">图标大小 image:'./1.jpg',1)">图片地址 imageSize:new AMap.Size(100,100) 最终在map里面显示的大小 imageOffset:new AMap.Pixel(-50,-50) //裁剪 偏差值 }); AMap.Marker({ position:[116.379391,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( AMap.scale());
map.addControl(new AMap.ToolBar());
3d地图
90viewmode:'3D',1)">变成了3d 地图了 buildingAnimation:true 可以让显示的建筑物变成动画现实 }); map.addControl( AMap.ControlBar({ showZoomBar: 显示 zoom条控件 showControlButton:true,// 可以取消 倾斜旋转角度的按钮 position:{ 控件的定位 right:'50px' } }))
驾驶导航
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db3b0b6eb1ab64619e&plugin=AMap.Driving,AMap.Autocomplete"></script>
AMap.Driving({
map:map,panel:'panel'
}).search([
{keyword:起点,city:'北京'},{keyword:终点,1)">}
],data){
console.log(data);
})
通过鼠标点击获取起始点和终点，规划驾车路线
var num = 0,arr = []; map.on('click',1)">(e){ num++; if(num%2 == 1){ arr = [e.lnglat.R,e.lnglat.P]; } else{ AMap.Driving({ map:map,1)"> }).search(new AMap.LngLat(arr[0],arr[1]),1)">new AMap.LngLat(e.lnglat.R,e.lnglat.P),data){ console.log(data); }) } });
通过经纬度 来进行导航
}).search(new AMap.LngLat(startX,startY),1)">new AMap.LngLat(endX,endY),data){ console.log(data); })
步行路线的规划
AMap.Walking({
map:map,data){
console.log(data);
})
步行路线的坐标规划
}).search([x,y],[x,data){
console.log(data);
})
货车路线规划（多点）-坐标
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db3b0b6eb1ab64619e&plugin=AMap.TruckDriving,1)"> AMap.TruckDriving({
map:map,city:'beijing',1)">城市
size:1 大小
}).search([{lnglat:[116.379391,39.861536]},{lnglat:[116.979391,39.161536]},{lnglat:[116.579391,40.861536]}],data){
console.log(data);
});
货车路线规划（多点）-位置
大小 }).search([{ keyword:'起点' },{ keyword:'途径点' } { keyword:'途径点' } { keyword:'终点' }],data){ console.log(data); });
骑行路线规划
new AMap.Riding({
map:map,
panel:'panel'
}).search(new AMap.LngLat(startX,new AMap.LngLat(endX,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>
AMap.Autocomplete({
input:'startNode' AMap.Autocomplete({
input:'endNode'
});
btn.onclick = AMap.Riding({
map:map,1)">
}).search([
{keyword:startNode.value,{keyword:endNode.value,1)">}
],data){
console.log(data);
})
};
根据鼠标点击录入起始点和目标，规划骑行路线
点击一次时将起始点计入数组 第二次点击时开始规划路线 AMap.Riding({ map:map,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>
AMap.Transfer({
map:map,1)">
}).search([
{keyword:起始点,1)">}
只支持数组的前两个内容
],data){
console.log(data);
})
根据鼠标点击录入起始点和目标，规划公交路线
AMap.Transfer({
map:map,data){
console.log(data);
})
}
});
地图类型的切换
AMap.MapType 引入这个插件
map.addControl( AMap.MapType({ defaultType:1,1)">0 默认 1代表的是卫星 showRoad:显示路况 }));
<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());
<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 = AMap.OverView({
visible:默认显示和隐藏
var oS = AMap.Scale();
var oT = AMap.ToolBar()
map.addControl(oV);
map.addControl(oS);
map.addControl(oT);
let yyNode = gjtNode = blcNode = ;
鹰眼（点击对应的控制鹰眼按钮）
yy.onclick = if(yyNode == ){
oV.hide();
}
{
oV.show();
};
yyNode = !yyNode
};
工具条
gjt.onclick = if(gjtNode == ){
oT.hide();
}
{
oT.show();
};
gjtNode = !gjtNode
};
比例尺
blc.onclick = if(blcNode == ){
oS.hide();
}
{
oS.show();
};
blcNode = !blcNode
}
地图加载完成事件 complete
map.on('complete',1)">(){
var text = AMap.Text({
text:'地图加载完成'116.379391,1)">]
}).on('mousemove',1)">(){
console.log(1)
});
text.setMap(map);
});
console.log('地图未加载');
地图显示等级改变事件
map.on('zoomstart',1)">(){
console.log('地图等级改变开始');
});
map.on('zoomend',1)">(){
console.log('地图等级改变结束');
});
中心点移动事件
map.on('mapmove',1)">(){
console.log('中心点移动中.');
});
map.on('movestart',1)">(){
console.log('地图中心点开始移动');
});
map.on('moveend',1)">(){
console.log('地图中心点移动结束');
});
地图容器大小发生改变事件
map.on('resize',1)">(){
console.log('容器大小改变中');
});
覆盖物与地图的交互
覆盖物 AMap.Text({ text:'覆盖物事件'] }); 鼠标移入覆盖物 text.on('mouSEOver',1)">(){ console.log('覆盖物移入'); }); 鼠标移出覆盖物 text.on('mouSEOut',1)">(){ console.log('覆盖物移出'鼠标在覆盖物上移动 text.on('mousemove',1)">(){ console.log('覆盖物上移动鼠标'); });
插入圆形的矢量图
var circle = AMap.Circle({ center:[116.379391,radius:10 }); circle.setMap(map);
插入长方形的矢量图
var rectangle = AMap.Rectangle({ bounds:new AMap.Bounds(new AMap.LngLat(116.379391,39.861536),1)">new AMap.LngLat(116.379491,39.861636)) }); rectangle.setMap(map);
hide()隐藏
show()显示
circle.hide();
rectangle.show();
右键菜单事件
创建一个右键菜单 var contextmenu = AMap.ContextMenu(); 右键的第一个菜单 contextmenu.addItem('放大一级',1)">(){ map.zoomIn(); },0); 右键的第二个菜单 contextmenu.addItem('缩小一级',1)">(){ map.zoomOut(); },1给地图绑定右键 map.on('rightclick',1)">(e){ 打开右键 map 在哪个地图里 参数2 - 位置 contextmenu.open(map,e.lnglat); setTimeout((){ contextmenu.close(); },3000); 关闭右键菜单 });
DOM事件绑定
AMap.event.addDomListener （绑定的元素，绑定的事件名（click、mousedown），函数） var lis1 = AMap.event.addDomListener(button1,'click',1)">(){ map.zoomIn(); });
DOM事件解除绑定
AMap.event.removeListener (要解除绑定函数名)
AMap.event.addDomListener(button2,'click',1)">(){
AMap.event.removeListener(lis1);
});
自定义事件 addListener/on/emit
变量记录点击几次 var count = 0; 点击事件 var _onClick = count事件：事件派发 也可以说是变量的改变 map.emit('count',{count:count += 1}); }; 监听的变量发生改变时触发的函数 var _onCount = (){ console.log(count); }; 监听的变量发生改变时 map.on('count'
