vue中使用高德地图amap

最新推荐文章于 2024-11-20 13:21:19 发布

转载最新推荐文章于 2024-11-20 13:21:19 发布 · 336 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/guanghuizhang/p/8184280.html

文章标签：

#javascript #ViewUI

本文介绍了如何在Vue项目中集成高德地图API。具体步骤包括：安装vue-amap插件、配置高德地图API密钥、在Vue组件中创建并初始化地图实例。通过这些步骤，开发者可以轻松地为网站添加交互式地图功能。

1.安装插件:
npm install vue-amap --save
2.main.js中
import AMap from 'vue-amap'
Vue.use(AMap);
3.index.html文件中
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=c76c4e9a861fe1f715c48d893d07116b"></script>
4.加载地图的页面
<el-amap id="mapcointainer" style="height: 300px;"></el-amap>
import {lazyAmapApiLoaderInstanse} from 'vue-amap';
export default {
data () {
return {
}
},
mounted() {
this.map = new AMap.Map('mapcointainer', {
resizeEnable:true,
zoom:11,
center:[116.397428,39.90923]
})
}
}