高德地图相关总结
- 申请key
- script地址
- 创建容器并命名id值
- 创建地图
new AMap.Map('id')
//移动端：
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
map.getZoom()//获取地图级别Zoom 的数字越大 显示的越精细 越小显示的范围越大
map.setZoom()//设置地图级别
map.getCenter()//获取地图的中心点
map.setCenter([])//设置地图的中心点 放入 坐标
map.setZoomAndCenter(z,[x,y])//设置地图的层级以及中心点
map.getCity(callback(info))//获取行政区---info
map.setCity(str)//设置取行政区---
on('moveend')//地图移动结束时触发
on('zoomend')//地图级别发生改变时触发
获取地图的范围
map.getBounds().northeast//右上角坐标----json对象 toString（）
map.getBounds().southwest//左下角坐标
设置地图的范围
//首先需要生成一个Bounds对象
var myBounds = new AMap.Bounds(左下角坐标,右上角坐标);
map.setBounds(myBounds)
限制/取消限制地图的显示范围
var myBounds = new AMap.Bounds(左下角坐标的数组，右上角坐标的数组标);
map.setLimitBounds(myBounds)//但是不是特别精准，会以它觉得最好的方式去显示
取消地图范围限制
map.clearLimitBounds()
//可以通过对myBounds 对象内部的northeast southwest.p/r 赋值来更改范围，必须为Number类型；
地图的平移
panBy(x,y) x代表向左平移多少像素 / y代表向上平移多少像素
panTo([x坐标，y坐标]) 地图会直接平移到这个位置
获取鼠标的经纬度
利用事件对象
e.lnglat.lng / lat
设置地图鼠标的默认样式
setDefaultCursor('样式')
cursor : 里面所有的样式都可以
地图搜索
//加载插件 AMap.Autocomplete 地图加载完毕触发回调函数
AMap.plugin('AMap.Autocomplete',function(){
new AMap.Autocomplete().search(要搜索的内容,function(status,data){
console.log(data 搜索出来的数据)
})
})
示例：(个人)
inputSearch.oninput=function(){
ulNode.html = '';
AMap.plugin('AMap.Autocomplete', function () {
new AMap.Autocomplete()
.search(inputSearch.value, function (status, data) {
console.log(data)
if (data.tips.length === 0) return;
for (var i = 0; i < data.tips.length; i++) {
var liNode = document.createElement('li');
liNode.innerHTML = data.tips[i].name;
liNode.q = data.tips[i].location.Q;
liNode.r = data.tips[i].location.R;
ulNode.appendChild(liNode);
liNode.onclick = function () {
map.setCenter([this.r, this.q]);
inputSearch.value = this.innerHTML;
}
}
})
})
}
加载插件的方式 二
https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db3b0b6eb1ab64619e&plugin=AMap.Autocomplete
new AMap.Autocomplete({
input:'searchText'//input searchText 《-》 id名
});
POI 缩写
Point of Interest
兴趣点
AMap.service(['AMap.PlaceSearch'],function(){
new AMap.PlaceSearch({
pageSize:5, //当页一共显示多少条
pageIndex:1, //当前第几页
city:'010', //兴趣点的城市
citylimit:true, //是否限制在设定的城内搜索
map:map, //展示在哪个地图里
panel:'setCenterNode' //放在哪个元素下
})
})
必须在服务器下 不然搜索到的 图片出不来
给地图的元素加上事件,绑定plugin=AMap.Autocomplete,AMap.PlaceSearch
window.onload = function () {
var map = new AMap.Map('container', {
zoom: 10,//初始地图级别 越大越清晰
center: [116.65918, 39.878151]//中心位置
});
var searchNode=new AMap.Autocomplete({
input:'inputSearch'//id
})
var placeSearch=new AMap.PlaceSearch({
map:map//当前map
})
AMap.event.addListener(searchNode,'select',function (e) {
placeSearch.search(e.poi.name)
})
}
var js_Map = document.createElement('script');
js_Map.src = "https://webapi.amap.com/maps?v=1.4.15&key=403c2522da6c56b5d0d07dd7889dbaa6&callback=onload&plugin=AMap.Autocomplete,AMap.PlaceSearch";
document.head.appendChild(js_Map)
搜索周边
plugin=AMap.Autocomplete,AMap.PlaceSearch
new AMap.PlaceSearch({
type:'住宿', //搜索的结果的过滤 结果类型
pageSize:5,
pageIndex:1,
city:'010',
citylimit:true,
map:map, //展示在哪个地图里
panel:'setCenterNode' //放在哪个元素下
}).searchNearBy('北京',[116.379391,39.861536],1000,function(){});
标记https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png
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);
修改图标大小
.amap-icon img{width:25px;height:25px}
自定义标记图标
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
删除标记的方法
//方法一：
marker.setMap(null);
//方法二：
map.remove([marker]);
缩放比例尺控件
//引入plugin
plugin=AMap.scale,AMap.ToolBar;
//使用
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 // 可以让显示的建筑物变成动画现实
});
plugin=AMap.ControlBar;
map.addControl(new AMap.ControlBar({
showZoomBar:true, // 显示 zoom条控件
// showControlButton:true,// 可以取消 倾斜旋转角度的按钮
position:{ //控件的定位
right:'50px',
top:'30px'
}
}))
驾驶导航
//引入插件
plugin=AMap.Driving
new AMap.Driving({
map:map,
panel:'panel'
}).search([
{keyword:起点,city:'北京'},
{keyword:终点,city:'北京'}
],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);
})
步行路线的规划
AMap.Walking
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);//起点、终点
})
货车路线规划 多点
AMap.TruckDriving 引入这个插件
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([
{keyword:startNode.value,city:'北京'}, //起点
{keyword:endNode.value,city:'北京'} //终点
//不能中间有途径
],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);
})
地铁+公交的导航方式
AMap.Transfer
//关键字方法
new AMap.Transfer({
map:map,
panel:'panel'
}).search([
{keyword:起始点,city:'北京'},
{keyword:终点,city:'北京'}
//只支持数组的前两个内容
],function(status,data){
console.log(data);
})
//通过点击动态搜索
map.on("click",function(e){
var num = 0;
var arr=[];
if(num%2===1){
arr.push(e.lnglat.R,e.lnglat.P);
}
new AMap.Transfer({
map:map,
panel:'panel',
city:'北京' //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 //显示路况
}));
常用的插件
鹰眼插件 AMap.OverView 默认在地图右下角显示缩略图
比例尺插件 AMap.Scale
地图类型切换插件 AMap.MapType 用来切换几个常用上午地图图层
地图工具条插件 AMap.ToolBar用来控制地图的缩放与平移
map.addControl(new AMap.OverView({
visible:false;//隐藏，默认显示
}));
控件的添加
show()
控件的删除
hide();
事件
地图加载完成
map.on('complete',function(){
console.log('ok')
//地图加载完成会触发的函数
var text = new AMap.Text({//文字标记
text:'地图加载完成',
position:[x,y]
})
text.setMap(map);
})
地图显示等级改变开始
zoomstart//可用于事件监听
地图显示等级改变结束
zoomend
中心点移动中 不断触发
map.on('mapmove',function(){
console.log('中心点移动中.');
});
地图中心点开始移动
map.on('movestart',function(){
console.log('地图中心点开始移动');
});
地图中心点移动结束
map.on('moveend',function(){
console.log('地图中心点移动结束');
});
地图容器大小发生改变时
需要在地图设置时开启resizeEnable:true才可以触发
map.on('resize',function(){
console.log('容器大小改变中');
});
覆盖物与地图的交互
//覆盖物 Text / Marker
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],
raduis:1000
});
circle.setMap(map);
//圆形的矢量图
var rectangle = new AMap.Rectangle({
bounds:new AMap.Bounds(new AMap.LngLat(116.379391,39.861536),new AMap.LngLat(117.379391,40.861536))
});
rectangle.setMap(map);
//长方形的矢量图
hide()隐藏
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），函数）
DOM事件解除绑定
AMap.event.removeListener (要解除绑定函数名)
自定义事件
addListener/on/emit
//变量记录点击几次
var count = 0;
//点击事件
var _onClick = function(){
//事件派发 也可以说是变量的改变
map.emit('count',{count:count += 1});
};
//监听的变量发生改变时触发的函数
var _onCount = function(){
console.log(count);
};
//监听的变量发生改变时
map.on('count',_onCount);
AMap.event.addListener(map,'click',_onClick);