查看: 90|回复: 1

高德地图 基础使用

[复制链接]

1

主题

3

帖子

3

积分

新手上路

Rank: 1

积分
3
发表于 2022-12-11 16:35:38 | 显示全部楼层 |阅读模式
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)都在视野中显示
回复

使用道具 举报

2

主题

9

帖子

17

积分

新手上路

Rank: 1

积分
17
发表于 3 天前 | 显示全部楼层
啥玩应呀
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表