|
1,用script 导入地图链接 吧并且附上 key (key是自己申请的)
2,使用window.onLoad 加载
3,创建map实例,
var map = new AMap('container',{//container是视图容器
zooms:[2,15],//zooms是可缩放的地图级别
zoom:3, //zoom 是默认的缩放级别
center:[126,39]// center是地图的中心点
viewMode:"3D"//viewMode是地图的模式 有2D和3D区分
resizeEnable:true,//是否监视地图容器尺寸变化
layers:[], //地图图层数组
lang:'zh_cn'
}
实时路况图层
var trafficLayer = new AMap.TileLayer.Traffic({ //实时路况图层
zIndex:10
})
map.add(trafficLayer)// 添加图层到地图
添加标记
var marker = new AMap.Marker({
position:[116,360]//位置
icon:'路径',//路径自定义图标
offset:偏移量
})
map.add(marker)//map.add(marker) 将标记添加到地图上
map.remove(marker) //删除标记
添加折线图
var lineArr= [
[116.368904, 39.913423],
[116.382122, 39.901176],
[116.387271, 39.912501],
[116.398258, 39.904600]
]
var polyLine = new AMap.Polyline({
//Polyline 折线
path:lineArr ,//数组坐标点组成路径
strokeColor:'#3366fff', 路径的填充色
strokeWeight:5,//路径的宽度
strokeStryle:'solid' //线的类别 实线
})
map.add(polyLine)//将折线添加到地图上
信息窗体
var infoWindow = new AMap.InfoWindow({
isCustom:true,//使用自定义窗体
content:'',// 带结构标签的html文本
offset:new AMap.Pixel(16,-45) // 16 代表向右 偏移 16 -45代表 向上偏移 45
})
var onMarkerClick= function(e){
infoWindow.open(map,e.target.getPosition())
}
var markerkkk = new AMap.Marker({
position:[116,39]
})
map.add(marker)
marker.on('click',onMarkerClick)
思路
先创建信息窗体 ,然后声明一个嗲年级事件唤醒窗口,创建一个点,把事件绑定在点上
求两个坐标点的距离
let lnglat1 = [116,30]
let lnglat2=[117,46]
let distance = lnglat1.distance(lnglat2)
设置 地图中心点
let position = [216,39]
map.setCenter(position)
获取地图中心
let center= map.getCenter()
设置 地图缩放比例
map.setZoom(13)
获取地图 缩放比
var currentZoom =map.getZoom()
同时设置缩放比和中心点
map.setZoomAndCenter(14,[215,36])
地图加载完毕
map.on('complete',function(){
console.log('加完'
})
map.destroy()//销毁地图
匹配视野的合适范围
map.setFitView()//自动匹配视野的合适范围
map.setFitView(a,b) //根据a,b元素匹配视野范围(a,b)都在视野中显示 |
|