vue+elementUI 使用腾讯地图

效果如下

引入地图qqmap

刚开始我是直接用 npm install qqmap，但是好像只有v1版本的，我需要用v2版本的，所以直接使用script标签加载API服务。

文件：/public/index.html

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>

v参数是引用的版本号，目前腾讯地图提供两个版本，分别是v=1，v=2.exp，推荐使用2.exp，可以获得最新最快的支持。key参数YOUR_KEY是Key鉴权中申请的key。

参考文档：# 腾讯位置服务API #

创建自定义组件

文件：/components/MapSelect.vue

<template><el-dialogtitle="选择地址":visible.sync="isShowDialog"width="1000px"top="50px"><div class="search"><el-input placeholder="请输入搜索地址信息" v-model="keyword" clearable><el-button slot="append" icon="el-icon-search" @click="searchAddress"></el-button></el-input></div><div id="mapContainer" style="width: 100%; height: 350px"></div><div class="address"><span>当前选点：</span><b>{{nowAddress ? (nowAddress.addressComponents.province + nowAddress.addressComponents.city + nowAddress.addressComponents.district + nowAddress.addressComponents.streetNumber) : '尚未选点'}}</b><el-button v-if="nowAddress" @click="selectAddress(nowAddress, 1)" type="text">【确认选择】</el-button></div><el-tablehighlight-current-row:data="nearPointList"height="300"style="width: 100%"class="table"><el-table-column prop="address" label="附近推荐地点"><template slot-scope="scope">{{scope.row.address}}{{scope.row.name}}</template></el-table-column><el-table-column label="操作" width="100" align="center"><template slot-scope="scope"><el-button @click.native.prevent="selectAddress(scope.row, 2)" type="text">确认选择</el-button></template></el-table-column></el-table></el-dialog>
</template>
<script>export default {data() {return {keyword: '', // 搜索关键词nearPointList: [], // 附近地址isShowDialog: false, // 是否显示弹窗markersArray: [],geocoder: null,nowAddress: null, // 选择的地点geocoderLocation: null,};},mounted() {},methods: {// 搜索地址searchAddress() {if (!this.keyword) {return this.$message.error("请输入搜索地址信息");}this.setLocationByAddress(this.keyword);},// 初始化地图initMap() {let that = this;let latLon = new qq.maps.LatLng(39.916527, 116.397128);var map = new qq.maps.Map(document.getElementById("mapContainer"), {zoom: 13,center: latLon,mapTypeId: qq.maps.MapTypeId.ROADMAP,});var listener = qq.maps.event.addListener(map, 'click', function(event) {that.setLocationByLatLng(event.latLng.getLat(),event.latLng.getLng());});// 经纬度解析类回调函数this.geocoder = new qq.maps.Geocoder({complete: function (result) {console.log(result.detail);that.nowAddress = result.detail;that.nearPointList = result.detail.nearPois;map.setCenter(result.detail.location);// 标记点let marker = new qq.maps.Marker({map: map,position: result.detail.location,});that.markersArray.push(marker);if (that.markersArray.length > 1) {for (let i = 0; i < that.markersArray.length - 1; i++) {that.markersArray[i].setMap(null); // 清除标记}}},});// 地址解析回调函数that.geocoderLocation = new qq.maps.Geocoder({complete: function (result) {// 查找附近的点let latLng = new qq.maps.LatLng(result.detail.location.lat,result.detail.location.lng);that.geocoder.getAddress(latLng);},});},// 选择地址事件selectAddress(item, type) {if(type === 1) {let addressInfo = item.addressComponents;this.$emit("on-select",addressInfo.province + addressInfo.city + addressInfo.district + addressInfo.streetNumber,item.location.lat,item.location.lng);this.isShowDialog = false;}if(type === 2) {this.$emit("on-select",item.address + item.name,item.latLng.lat,item.latLng.lng);this.isShowDialog = false;}},// 显示地图show() {this.isShowDialog = true;setTimeout(() => {this.keyword = '';this.initMap();})},// 根据地址信息进行定位setLocationByAddress(address) {setTimeout(() => {this.geocoderLocation.getLocation(address);})},// 根据经纬度进行定位setLocationByLatLng(lat, lng) {setTimeout(() => {let latLng = new qq.maps.LatLng(lat, lng);this.geocoder.getAddress(latLng);})},},
};
</script><style scoped lang="scss">
.search {margin-bottom: 15px;margin-top: -20px;
}
.address {margin-top: 15px;margin-bottom: 10px;.el-button {padding: 0;}
}
.table {.el-button {padding: 0;}
}
</style>

页面调用

<template><div><el-input placeholder="请选择地址" v-model="mainForm.address" readonly><el-button slot="append" icon="el-icon-location" @click="openMap()"></el-button></el-input><MapSelect ref="ms" @on-select="selectAddress" /></div>
</template><script>
import MapSelect from '@/components/Common/MapSelect'export default {components: {MapSelect},data() {return {mainForm: {address: '',lat: '',lng: '',},}},methods: {// 打开地图弹窗openMap() {this.$refs.ms.show();// 根据省市区设置初始值// this.$refs.ms.setLocationByAddress(this.mainForm.address);// 根据经纬度设置初始值this.$refs.ms.setLocationByLatLng(this.mainForm.lat, this.mainForm.lng);},// 地址选择后的回调函数selectAddress(address, lat, lng) {this.mainForm.address = address;this.mainForm.lat = lat;this.mainForm.lng = lng;},}
}
</script>

vue+elementUI 使用腾讯地图相关推荐

vue中使用腾讯地图选择地址
腾讯地图选择地址引发的一系列问题 2019/12/14更新修复了自治区/直辖市无法选择的bug(比如上海之类的城市) 采用更加友好的方式来选择地址新的文章链接:vue中使用腾讯地图选择地址(二) ...
在vue中使用腾讯地图绘制围栏功能
首先,先看效果图里面包含了自定义多边形绘制围栏.圆形绘制以及矩形等方式,以及清除围栏经纬度的方法和获取围栏经纬度的方法. 首先在项目的index.html中引入腾讯地图 <script cha ...
在vue中使用腾讯地图
1. 引入腾讯地图在 index.html 中插入 <script charset="utf-8" src="https://map.qq.com/api/glj ...
vue项目使用腾讯地图获取定位
一.注册成为腾讯地图开发者 https://lbs.qq.com/ 创建新秘钥 https://lbs.qq.com/dev/console/key/manage 根据页面提示填写相关信息复制你 ...
vue仅使用腾讯地图根据城市名称获取经纬度
方式一: 下载插件 1.下载 npm install qqmap --save 1 2.使用 // 2.1引入 import maps from 'qqmap' export default { ...
vue中加载腾讯地图（html形式）
vue中引入腾讯地图,目前根据网上的方式有一种 qqmap组件,但是本人才疏学浅,未能探究如何使用,于是乎,就曲线救国,用另一种方式实现了,在vue中引入iframe,然后在iframe中引入html ...
vue项目中加载使用腾讯地图
在vue-cli脚手架搭建的vue项目里使用到了腾讯地图.看了腾讯地图的官方给出的API(https://lbs.qq.com/javascript_v2/index.html)敲了一遍代码,才有点感 ...
vue PC 端使用腾讯地图定位
vue PC 端使用腾讯地图定位需求:希望网站显示当前城市腾讯前端定位组件解决的方法定义一个文件,加载定位js 在vue页面中使用需求:希望网站显示当前城市腾讯前端定位组件 key的申请, ...
html调用腾讯地图定位当前位置,vue web项目中调用腾讯地图API获取当前位置的经纬度...
vue web项目中调用腾讯地图API获取当前位置的经纬度 vue web项目中调用腾讯地图API获取当前位置的经纬度在main.js 中添加一下代码 import axios from 'axio ...