vue-city - 城市选择器
vue-region-picker - 选择中国的省份市和地区
地图
vue-amap - 基于Vue 2和高德地图的地图组件
vue-google-maps - 带有双向数据绑定Google地图组件
vue-baidu-map- 基于 Vue 2的百度地图组件库
vue-cmap - Vue China map可视化组件
1. 在 public 文件夹下的 index.html 中加入
///<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=你申请的key"></script>
2. 在 vue.config.js 文件中配置 externals
///module.exports = {
devServer: {
port: 57103 // 端口号配置
},
configureWebpack: {
externals: {
'AMap': 'AMap' // 高德地图配置
} }}
注： vue.config.js 文件要自己创建，vue-cli 3.0 不会自动生成此文件。 此外，修改 vue.config.js 不会触发热加载，也就是修改之后你需要重新 run 一下你的项目，它才能生效。
3.加载地图
地图容器要给他一个宽高。
注：init() 方法请在 mounted 生命周期中调用，因为如果在 created 阶段调用，会找不到 html 元素 div#container
注2:若中途遇到 'map' is assigned a value but never used
可找到package.json中找到rules:{} 添加 "no-unused-vars":0
最终效果
高德API：https://developer.amap.com/api/javascript-api/guide/map/map-style
腾讯地图暂时官方没有在npm上放置，但是有个人的两三年前的依赖，所以我选用百度地图来做。
1.安装依赖
2.main.js里面引入并填写你的百度地图key
3.你需要的vue页面引入
4.html
5.methods里面
如果想用动态渲染地图则核心是先把{BMap, map} 这两个东东挂在data然后再使用,要不然报错BMap, map undefind
