高德地图总结笔记

地图初始化
信息点坐标
路线规划与导航

大概就这么些，因为之前没接触过这方面一直都觉得挺复杂的实际开发感觉还算ok，全程干货走起。

1.地图初始化

1.1创建项目Key

想使用高德的API首先一定要申请【 key 】这个很重要因为没有key你就无法调用高德的接口

右上角自己的头像》应用管理》创建新应用》添加key

服务平台那个根据项目情况来选，萌芽这里选择web端。可用服务那里表示这个服务下你可以使用的API手册。名称随意。

点击提交后你就能看到自己的key了。这个有了key我们就能干很多事情啦～

1.2创建地图

萌芽在这里放上地图的API，详细的使用方法可以进去看里面有很多实例。萌芽这里就讲一些重点的东西。

https://lbs.amap.com/api/javascript-api/summary

继续，创建一个地图的实例，这个是必须要有的。

<div id="container"></div>
//    上下对应
var map = new AMap.Map('container');

第一个参数是告诉他容器在哪儿，此处为ID，第二个参数代表一些配置，比如说初始中心点啊，地图层级这些，不写的话就是默认定位你当前位置。注意啦往后的map都代表着这个地图实例哦！

<!doctype html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"><link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /><title>地图显示</title><style>html,body,#container {width: 100%;height: 100%;}</style>
</head>
<body>
<div id="container"></div>
<!-- 加载地图JSAPI脚本 -->
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script>var map = new AMap.Map('container', {resizeEnable: true, //是否监控地图容器尺寸变化zoom:11, //初始化地图层级center: [116.397428, 39.90923] //初始化地图中心点});
</script>
</body>
</html>

2.信息点坐标

2.1自定义标记样式

要知道不管啥东西默认的总是没那么好看是吧，而且项目当中他的UI图肯定也是不一样的，这个时候咱们就需要做自定义了！

      let content = `<div>点标记</div>`;var marker = new AMap.Marker({content: content,                 // 点标记覆盖物内容position: item.position,          // 位置offset: new AMap.Pixel(-14, -14), // 相对于基点的偏移位置});添加到页面上：map.add(marker);
从页面上移除：map.remove(marker);

这里萌芽用的是html自定义点标记，其中那三个是必须的，第一个代表是什么样的点，第二个是这个点所处的位置，第三个是偏移。萌芽这里好好讲一下偏移。

2.2偏移

这里萌芽画了张简单粗暴的图，一般他的点默认在左上角，如果不去便宜的话他的位置就会基于左上角去钉死，但是这样给客户的体验就很差，你可以自己试试感觉就好像定位有毛病一样，这个时候我们把他的点调整到下面的位置看起来就舒服很多，根据需求如果是圆形信息点的话可以将中心偏移到圆点的中间，AMap.Pixel缩写：[ x , y ]

然后我们通过add方式将刚刚创建的信息点添加到地图上，踩坑注意！！！

关于remove实际上并不好用！这里他删除的是你创建的这个对象，而且他不知道是哪个对象，在图标很多的时候你总不能创建好多个变量去装啊而且你也不能一个坐标对象绑定一个remove方法。更可怕的是你点的快了他可能会绑定不上！反正体验极差，如果大家想做那种点击筛选展示坐标点（大量点标记）功能的时候建议使用：

map.clearMap();  //删除所有覆盖物

当然你也可以直接替换图片啊这些都是可以的。

3.路线规划与导航

3.1路径规划

重头戏来咯，高德地图提供五种导航方式分别是（驾车，公交，货车，骑行，步行）【ps.这个表好神奇居然能复制过来诶

名称	说明	是否插件
AMap.Driving	驾车路线规划服务，提供可带途经点的起点、终点的驾车导航路线查询功能	是
AMap.TruckDriving	货车路线规划服务，提供可带途经点的起点、终点之间的货车导航路线查询功能	是
AMap.Transfer	公交换乘服务，提供起、终点公交路线规划服务，整合步行方式	是
AMap.Walking	步行导航服务，提供起、终点步行路线规划服务	是
AMap.Riding	骑行路径规划服务，提供起、终点骑行路线规划服务	是

这里我们用驾车路线导航举个栗子：

构建导航类的时候map代表地图容器，panel代表着他的路线结果输出的位置，这个你可以用也可以不用。不用的话在result里面可以看到他的所有路线结果，你可以在search里面自定义一些更好看点儿的方法。

高德地图H5开发总结笔记相关推荐

高德地图H5 定位失败报错 geolocation time out. Get ipLocation failed解决方案
高德地图H5 定位失败报错 geolocation time out. Get ipLocation failed的解决方法. 前言:此坑踩得我挺难受的,搞了三天需求:进入页面,获取用户具体经纬度并 ...
【高德地图WEB开发】入门篇（地图/搜索/经纬度/缩放层级）
前言本篇文章是高德地图web开发入门篇,实现地图搜索等基本功能,后续会继续更新地图标记点.驾车.骑行.货车等单地点\多地点导航.公交路线.兴趣周边点.及其他地图功能开发文章,所有功能均使用js实现, ...
ios html调起高德地图,iOS开发笔记调起本地地图导航(百度、高德、腾讯、苹果自带)...
地图从自己的APP跳转到用户本地的APP进行导航.首先,要先查看用户都安装了哪些地图类APP. 下面分3种情况进行分析: 1.用户没有安装第三方的地图,只有苹果自带的地图应用. 2.用户安装一款第三 ...
[iOS]高德地图SDK开发--准备篇
本文是对高德地图SDK使用的总结,对于高德地图不做过多介绍,可直接登录其官网开放平台进行了解; PS: 这里主要是讲解地图使用的准备工作,最后,以显示地图并定位到当前位置来验证;对于其他的使用,可参看 ...
Android高德地图基本开发/在线高德离线地图开发/断网使用离线地图（Assets文件夹的使用）
文章目录高德SDK基本使用前置操作需求一:显示地图,并以当前所在位置为中心权限申请布局功能代码活动功能代码效果展示需求二:离线地图(直接添加到应用端项目内) 需求三 :点击数据后以数据 ...
记录高德地图H5导航
打开高德地图的H5 lng: 经度 lat: 维度 name: 地点名称 https://uri.amap.com/marker?position=${lng},${lat}&name=${n ...
基于高德地图SDK开发之地图显式
显示高德地图 1..Framlayout帧布局直接在屏幕上开辟出一块空白区域,添加的所有组件都放置在区域左上角. 大小由最大子控件决定. 前景图像:永远处于帧布局最顶的,直接面对用户的图像(不会被覆 ...
高德地图Amap开发实践
一.简介: 高德开放平台是国内技术领先的LBS(Location Based Services,基于位置的服务)服务提供商,拥有先进的数据融合技术和海量的数据处理能力.高德开放平台向广大开发者提供覆盖 ...
html5唤醒百度高德地图,H5内唤醒百度、高德APP
前几天,联合黑卡反馈了一个需求,需要在H5中打开百度APP或者是高德APP,于是我在网上查了相关文档,下面放上链接: 1.高德地图 2.百度地图具体思路就是点击选择地图的时候,先去请求APP链接,8 ...

高德地图H5开发总结笔记

高德地图总结笔记

1.地图初始化

2.信息点坐标

3.路线规划与导航

高德地图H5开发总结笔记相关推荐

最新文章

热门文章