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即是对应的路线规划方案
})
动态的修改关键字和城市形成路线。