在Vue中使用高德开发工具非常简单,只需要在你的public
中的index.html
中,导入一条链接即可。
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
一般使用高德地图中,里面有各种各样的插件,你可以直接在链接上跟上插件名,直接同步加载插件。
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.ToolBar,AMap.Driving"></script>
具体可以看下官方文档,讲的很详细
https://lbs.amap.com/api/javascript-api/guide/abc/plugins
然后在在vue.config.js
中加入高德的配置,如果没有这个js文件,你可以在项目根目录新建一个就好了
module.exports = {
configureWebpack(config) {
config.externals = {
'AMap': 'AMap', // 高德地图配置
}
}
}
使用的时候
<template>
<div class="map_box">
<div
class="map"
id="map"
>
</div>
</div>
</template>
<script>
import AMap from "AMap"
var map
export default {
mounted() {
this.MapInit();
},
methods: {
//初始化高德地图
MapInit() {
mapObj = new AMap.Map("mapId", {
zoom: 12, //缩放级别
center: [116.39, 39.9], //地图中心点
});
//然后你还可以加载高德的一些插件,加载插件的时候注意下作用域问题,绑在那个变量里面,因为要保证后面一些事件调用这些插件
AMap.plugin(["AMap.ToolBar", "AMap.Driving"], function() {
//异步同时加载多个插件
var toolbar = new AMap.ToolBar();
mapObj.addControl(toolbar);
var driving = new AMap.Driving(); //驾车路线规划
driving.search(/*参数*/);
});
},
},
};
</script>
<style>
.map {
width: 100%;
height: 600px;
}
</style>
这个时候就可以使用了
个人水平有限,有问题欢迎大家留言指导,仅供学习和参考。
学海无涯!努力二字,共勉!