前言
相信在 web 开发中有不少项目都用到过地图,那么我们怎么在自己的项目中引入第三方地图呢?
提示:以下是本篇文章正文内容,下面案例可供参考
一、申请 地图api开发者key
这里以高德地图为例
1、到 高德地图开发平台 注册账号申请一个key
应用创建成功就可以看到自己的key和密钥了
二、在vue项目安装高德地图的包
npm安装包
npm i @amap/amap-jsapi-loader --save
具体操作看在vue中使用高德地图
三、使用
1、在自己的组件中引入高德地图类
代码如下(示例):
import AMapLoader from '@amap/amap-jsapi-loader'
2、编写初始化函数
具体配置可以参考官方文档
initMap(){
AMapLoader.load({
key:"", // 申请好的Web端开发者Key,首次调用 load 时必填
version:"2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins:[''], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
}).then((AMap)=>{
this.map = new AMap.Map("container",{ //设置地图容器id
viewMode:"3D", //是否为3D地图模式
zoom:5, //初始化地图级别
center:[105.602725,37.076636], //初始化地图中心点位置
});
}).catch(e=>{
console.log(e);
})
},
在 monted 中调用初始化函数
3.添加插件
这里的插件就好比vue里面页面中的主键一样,这个插件就像是地图的组件 如比例尺等等
1、同步加载插件
//在初始化函数中有一个plugins的配置给他穿入插件的名字即可
//如
plugins: ['AMap.ToolBar','AMap.Scale', 'AMap.HawkEye','AMap.MapType','AMap.Geolocation','AMap.AutoComplete','AMap.PlaceSearch']
1.2、实例化你所添加的插件到地图中
//使用 map实例中的 addControl()方法添加到地图中
this.map.addControl(new AMap.Scale()) //这里的AMap.Scale就是上述在plugins中添加的插件名
更多插件可以查看
插件的使用
2异步添加插件
//AMap.plugin的第一个参数使用数组即可同时加载引入多个插件。
AMap.plugin(['AMap.ToolBar','AMap.Driving'],function(){//异步同时加载多个插件
var toolbar = new AMap.ToolBar();
map.addControl(toolbar);
var driving = new AMap.Driving();//驾车路线规划
driving.search(/*参数*/)
});