网站内页的设计,室内设计学校前十,简单的html网页模板,南充营销型网站建设目录
第一章 前言
第二章 准备工作
2.1 账号注册
2.2 高德地图开发平台文档
2.3 创建应用
第三章 使用地图
3.1 地图使用步骤
3.2 理解几个地图基础控件
3.3 基础类理解 第一章 前言
小编都是在vue项目中使用高德地图的#xff0c;每一个功能都会亲测可用之后才会…目录
第一章 前言
第二章 准备工作
2.1 账号注册
2.2 高德地图开发平台文档
2.3 创建应用
第三章 使用地图
3.1 地图使用步骤
3.2 理解几个地图基础控件
3.3 基础类理解 第一章 前言
小编都是在vue项目中使用高德地图的每一个功能都会亲测可用之后才会留下笔记而且会用通俗的语言让看到小编的笔记的大家也能熟练使用高德地图在项目中的使用如有不同的理解也欢迎大家在评论留言。
第二章 准备工作
2.1 账号注册
自行注册 2.2 高德地图开发平台文档 高德开放平台 | 高德地图API 文档与支持 - 选择JS API 点击进入后是高德地图2.0的API接口文档 概述-地图 JS API 2.0 | 高德地图API 这是高德地图1.x的API接口文档 小编建议两个文档可以对比看 概述-地图 JS API | 高德地图API 但是使用的还是最新的高德地图所以我们需要有一下几个注意点(小编使用过程中遇到的当然如果还要别的欢迎评论区留言小编也会添加上大家相互进步)
安全密钥本地项目定位到当前位置只在IE上有用 2.3 创建应用 控制台 - 我的应用 - 创建新应用 点击创建新应用根据需求选择即可 创建成功 添加key -- 解释一下不要被刚进来的填写方式吓到了这个填写内容是针对uniapp项目的app安卓端的至于上面的名称怎么获取小编也有自己的uniapp完整开发流程如下: app软件开发、uniapp、uni-admin使用独立开发app,相关技术一体化很完整小编实践过的一这套uniapp相关技术_❆VE❆的博客-CSDN博客 -- 说明一下不同的平台获取key的方式也不是不同的 以web服务为例JS API -- 填写好信息之后提交即可 创建成功 注意 第三章 使用地图
官方文档基本上都是js用法用法类似但是还是有区别的为了大家能直接上手就在项目中实践了
教程参考 JS API 结合 Vue 使用-基础-进阶教程-地图 JS API 2.0 | 高德地图API 3.1 地图使用步骤
1、引入方式使用npm方式安装使用 loader
npm i amap/amap-jsapi-loader --save 2、创建地图组件 3、创建地图容器地图组件中创建 div 标签作为地图容器
templatedivdiv idcontainer refamap/div/div
/template 4、设置地图容器样式
style langless scoped
#container {padding: 0px;margin: 0px;width: 100%;height: 900px;
}
/style
5、引入JS API Loader
script
import AMapLoader from amap/amap-jsapi-loader
/script
6、地图初始化
methods:{
initAMap() {const _this thisAMapLoader.load({key: 365c***********155b, // 申请好的Web端开发者Key首次调用 load 时必填version: 2.0, // 指定要加载的 JSAPI 的版本缺省时默认为 1.4.15plugins: [] // 需要使用的的插件列表如比例尺AMap.Scale等如果是地图控件必须再 map.addControl添加}).then((AMap) {const map new AMap.Map(container, {// 设置地图容器idviewMode: 3D, // 默认2d地图模式zoom: 12, // 初始化地图级别zooms: [5, 30], // 地图缩放范围// 可以设置初始化当前位置center: [116.397428, 39.90923] // 初始化地图位置})// 添加控件AMap.plugin([AMap.ElasticMarker,AMap.Scale,AMap.ToolBar,AMap.HawkEye,AMap.MapType,AMap.Geolocation,],() {map.addControl(new AMap.ElasticMarker()) // map.addControl为地图添加对应的控件map.addControl(new AMap.Scale())map.addControl(new AMap.ToolBar())map.addControl(new AMap.HawkEye())map.addControl(new AMap.MapType())map.addControl(new AMap.Geolocation())})_this.map map}).catch((e) {console.log(e)})
},
}
3.2 理解几个地图基础控件
AMap.ElasticMarker灵活点标记可以随着地图级别改变样式和大小的 Marker关注点在演示中的小汽车在随着地图的缩放也在缩放 AMap.Scale比例尺显示当前地图中心的比例尺根据下图演示左下角的比例理解 AMap.ToolBar工具条控制地图的缩放。具体看下图演示 AMap.HawkEye鹰眼显示缩略图方便大范围移动通过缩略图可以控制地图的移动通过移动地图也能让缩略图跟着移动 AMap.MapType图层切换用于几个常用图层切换显示右上角标准图与卫星图的切换路网与路况选择会在地图上更加明显的显示 AMap.Geolocation获取用户当前位置、所在城市的并定位到当前位置 谷歌、火狐浏览器 IE浏览器
注意在小编的初步了解下也可以说是踩坑下本篇内容的控件添加方式只支持下图框的这一类。 更多控件的使用小编后续会一一说明 插件的使用-入门-教程-地图 JS API | 高德地图API 3.3 基础类理解 基础类-入门-教程-地图 JS API | 高德地图API AMap.LngLat经纬度new AMap.LngLat(经度, 纬度)这里有两种写法都代表着经纬度而且都表示位置但是小编也是推荐用官方文档的写法尽管麻烦了点我们规范自己在以后会对自己有帮助。经纬度的有效范围为经度-180度到180度纬度大约-85度到85度。
const position new AMap.LngLat(116, 39);//标准写法const position [116, 39]; //简写var map new AMap.Center(conatiner,{center:position
}) 当我们需要绘制路径时就需要使用多个经纬度对于使用到经纬度数组的时候比如创建一个折线的路径写法如下注意写法格式是数组里嵌套的经纬度组成的数组的集合形式 var path [new AMap.LngLat(116,39), new AMap.LngLat(116,40), new AMap.LngLat(117,39)] //标准写法var path [ [116,39], [116,40], [117,39] ]; //简写var polyline new AMap.Polyline({path : path,})map.add(polyline); 计算使用经纬度类型可以进行一些简单的位置计算比如点与点、点与线的距离根据距离差计算另一个经纬度等如果是一些行程距离或者复杂的距离不用担心一般不需要计算接口会给我们返结果
var lnglat1 new AMap.LngLat(116, 39);
var lnglat2 new AMap.LngLat(117, 39);
var distance lnglat1.distance(lnglat2);//计算lnglat1到lnglat2之间的实际距离(m)// offset(w:Number,s:Number) 当前经纬度坐标值经度移动w纬度移动s得到新的坐标。经度向右移为正值纬度向上移为正值单位为米。
var lnglat3 lnglat1.offset(100,50)//lnglat1向东100m向北50m的位置的经纬度AMap.Pixel偏移量像素点由x和y两个分量组成通常用来描述地图的容器坐标、地理像素坐标 (平面像素坐标)、点标记和信息窗体的的锚点等。使用方式如下小编理解该方法的主要作用就是控制marker节点在地图上相对地点的位置可以微调 var offset new AMap.Pixel(-16,-30);var marker new AMap.Marker({offset:offset,icon:xxx.png,});map.add(marker);
AMap.Size像素尺寸像素尺寸由width和height两个分量构成通常用来描述具有一定大小的对象比如地图的尺寸图标的尺寸可以设置尺寸也可以获取尺寸 var mapSize map.getSize();//获取地图大小返回的是地图容器的像素大小var width mapSize.width;var height mapSize.height;var marker new AMap.Marker({position: [116.405467, 39.907761],icon: new AMap.Icon({ size: new AMap.Size(40, 50), //图标的大小image: https://webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png,imageOffset: new AMap.Pixel(0, -60)}) });map.add(marker)
AMap.Bounds经纬度矩形边界看文档AMap.ArrayBounds经纬度路径边界看文档 参数列表查看 基础类-参考手册-地图 JS API | 高德地图API
