VUE-CLI 3.0 中配置高德地图
在项目开发中,地图组件
1、首先,需要注册高德开放平台的账号,并在【应用管理】页面【创建新应用】,为应用添加Key值
高德开放平台:https://lbs.amap.com/
2、在Vue-Cli中public下的index.html加入script 标签
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=你申请的key"></script>
3、在vue.config.js文件中配置externals
VUE-CLI 3.0 不会自动创建vue.config.js,需要手动创建,同时vue.config.js 不会触发热加载,修改之后需要重新执行npm run serve
module.exports = { configureWebpack: { externals: { 'AMap': 'AMap' } } }
4、封装作为组件使用
在src/component建立子组件,建立一个div 盒子,用于地图容器,设定id,之后通过AMap.map()函数建立新地图
<template> <div> <div id="container" :style="{width:width+'px',height:height+'px',margin:'34px auto'}" /> </div> </template> <script> import AMap from 'AMap' //引入高德地图AMap export default { name: 'GMap', props: { width: { type: Number, default: 300 }, height: { type: Number, default: 300 } }, //添加变量,方便组件复用
methods: {
//初始化地图
initMap () { let self = this let map = new AMap.Map('container', { center: [116.397428, 39.90923], resizeEnable: true, zoom: 10 }) self.map = map } },
//在mounted阶段调用(mounted可以操作DOM)
mounted () { this.initMap() } } </script>