vue项目中高德地图的注册及使用

1.创建应用

点击进入高德地图个人开发的注册：https://lbs.amap.com/dev/id/personal

然后可以登录支付宝进行认证。

注册完毕之后，点击右上角的控制台

点击右上角的创建应用

创建好之后我们点击添加，我们以web端为例。选择之后提交。

2.地图使用

打开使用文档

接下来在vue项目中导入高德地图。

文档地址：https://developer.amap.com/api/javascript-api/guide/abc/quickstart

创建第一个地图：

//第一步 使用异步导入js文件的方式window.onLoad  = function(){var map = new AMap.Map('container');}var url = 'https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&callback=onLoad';var jsapi = doc.createElement('script');jsapi.charset = 'utf-8';jsapi.src = url;document.head.appendChild(jsapi);

紧接着在dom中创建一个id为container的元素，这是后地图就会根据你的ip自动定位到你的位置。

创建的同时还可以给地图设置中心点，级别，显示模式，自定义样式等属性。
如果不配置中心默认显示你当前的所在城市

 var map = new AMap.Map('container', {zoom:11,//级别center: [116.397428, 39.90923],//中心点坐标viewMode:'3D'//使用3D视图});

3.插件的使用

1.先在url参数后面加载插件

var url =`https://webapi.amap.com/maps?v=1.4.15&key=${key}&callback=onLoad&plugin=AMap.ToolBar`;

2.在onload函数里面调用插件

  window.onLoad = function () {var map = new AMap.Map("container",{zoom:11,center:[116.397428,39.90923],//中心点坐标viewMode:'3D'});//初始化toolbar插件  这是一个拖动地图的插件var toolbar = new AMap.ToolBar();//调用插件map.addControl(toolbar);};

4.点标记

点标记是用来标示某个位置点信息的一种地图要素。

// 创建一个 Marker 实例：
var marker = new AMap.Marker({position: new AMap.LngLat(116.39, 39.9),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]title: '北京'
});// 将创建的点标记添加到已有的地图实例：
map.add(marker);
//如果是要标记多个点，则可以创建多个点实例，然后加入到数组当中，最后使用map.add([])的方式载入多个标记点。
// 移除已创建的 marker
map.remove(marker);

5.自定义标记内容

可以为标记添加icon实例也可以添加dom节点。设置了content会覆盖icon属性。

var content = '<div class="marker-route marker-marker-bus-from"></div>';var marker = new AMap.Marker({content: "<div style='width=20px;height=20px;background:red;'>1</div>",,  // 自定义点标记覆盖物内容position:  [116.397428, 39.90923], // 基点位置offset: new AMap.Pixel(-17, -42) // 相对于基点的偏移位置
});map.add(marker);

会发现之前的标记物被自定义标记物给覆盖了。

6.使用阿里图标

将选择的图标添加入库，然后选择font class 生成下面的链接。

将链接添加入Link标签中。
在html标签中加入类名 iconfont 以及对应的图标类名iconxxx;

7.路线规划

路线规划时注意需要关联到map对象

 var driving = new AMap.Driving({// 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式policy: AMap.DrivingPolicy.LEAST_TIME,map,})var points = [{ keyword: '中北大学',city:'太原' },{ keyword: '武宿机场',city:'太原' }]driving.search(points, function (status, result) {// 未出错时，result即是对应的路线规划方案})

动态的修改关键字和城市形成路线。