vue引入高德地图 vue.js

【vue引入高德地图】1、先去高德地图开放平台申请key： https://console.amap.com/dev/key/app
下方是我微信公众号的二维码，可以扫码关注以下，后期博文推送主要在公众号上面，有什么问题也可以通过公众号跟我发消息哦~

文章图片

2、在根目录下的 index.html 引入高德地图及 key

="text/javascript" src="http://img.readke.com/220913/1349253003-1.jpg'申请的key">

3、
如果是vue-cli2 版本，则：在 build —> webpack.base.conf.js，在module.exports中添加 externals: { “AMap”: “AMap” }

文章图片

如果是vue-cli3版本，则：在 vue.config.js 文件中修改webpack配置

// vue.config.js module.exports = { configureWebpack: { externals: { 'AMap': 'AMap' } } }

文章图片

4、使用：
一、IP城市定位：

文章图片

（1）因为使用城市定位，所以在index.html中引入地图时，地址后面要拼接上 &plugin=AMap.CitySearch

="text/javascript" src="http://img.readke.com/220913/1349253003-1.jpg'申请的key&plugin=AMap.CitySearch">

（2）在页面中使用

> export default { created() { }, mounted() { this.showCityInfo(); }, methods: { showCityInfo() { let map = new AMap.Map('container', { resizeEnable: true, center: [116.397428, 39.90923], zoom: 13 }); map.plugin(['AMap.Weather', 'AMap.Scale', 'AMap.ToolBar'], function () { map.addControl(new AMap.Scale()); // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺 map.addControl(new AMap.ToolBar()); // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件//创建天气查询实例 conat weather = new AMap.Weather(); //执行实时天气信息查询 weather.getLive('武汉市', function (err, data) { console.log(err, data); }); }); let citysearch = new AMap.CitySearch(); //获取用户IP，返回当前城市 citysearch.getLocalCity(function (status, result) { if (status === 'complete' && result.info === 'OK') { if (result && result.city && result.bounds) { let cityInfo = result.city; let cityBounds = result.bounds map.setBounds(cityBounds) } } else { alert(result.info) } }) } } }

二、通过地址定位
1、封装公用地图组件 BaseMap.vue

// BaseMap.vue> export default { prop: { mapPosition: '' }, // 地理编码包含正向地理编码和逆向地理编码两种： // 正向地理编码：将地址描述信息转换成地理坐标（经纬度），对应为AMap.Geocoder的getLocation方法 // 逆向地理编码：将地理坐标（经纬度）转换成地址描述信息，对应为AMap.Geocoder的getAddress方法 methods: { markLocation(mapId, address) { let that = this AMap.plugin('AMap.Geocoder', function () { var geocoder = new AMap.Geocoder(); geocoder.getLocation(address, function (status, result) { if (status === 'complete' && result.info === 'OK') { // 经纬度 var lng = result.geocodes[0].location.lng; var lat = result.geocodes[0].location.lat; // 地图实例 var map = new AMap.Map(mapId, { resizeEnable: true, // 允许缩放 center: [lng, lat], // 设置地图的中心点 zoom: 15// 设置地图的缩放级别，0 - 20 }); // 添加标记 var marker = new AMap.Marker({ map: map, position: new AMap.LngLat(lng, lat),// 经纬度 }); } else { console.log('定位失败！'); } }); }); } } } ='less' scoped> .map-container { width: 100%; height: 350px; }

2、使用：引入组件 + 触发组件BaseMap.vue中的markLocation方法定位

文章图片

> import { getInfo } from '@/apis/apis' import BaseMap from '@/components/BaseMap' export default { data() { return { dataList: {}, }; }, components: { BaseMap }, created() { this.getList(); }, methods: { // 地址信息 getList() { getInfo({ data: { id: this.$route.query.id } }).then(res => { if (res.code === 0) { this.dataList = res.data; this.$nextTick(() => { this.$refs.mapDom.markLocation("container", this.dataList.address) }) } else { this.$message.error(res.message) } }) }, } }