vue项目web端根据腾讯地图获取当前定位并通过关键字搜索地址列表

1.先去腾讯地图开放平台申请一个key 腾讯地图开放平台

在index.html页面引入这个文件，否则需要下载SDK

<script src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js "></script>

2.在vue初始化时 created函数中调用下面的方法 因为要先拿到当前城市信息比较好用 ，不拿也没关系

created() {
	this.Tmap();
},
/**
* 腾讯地图获取当前定位
* 只调用此方法就行
 */
Tmap() {
	that = this;
	var geolocation = new qq.maps.Geolocation("HFXBZ-NQSWI-ZGQGW-5URX4-WUXCF-VWFUQ", "mapqq");
	// geolocation.getIpLocation(this.showPosition, this.showErr);
	geolocation.getLocation(this.showPosition, this.showErr); //或者用getLocation精确度比较高
},
showPosition(position) {
	console.log(position);
	// this.latitude = position.lat;
	// this.longitude = position.lng;
	this.city = position.city;
},
showErr() {
	console.log("定位失败");
	this.Tmap(); //定位失败再请求定位，测试使用
},

3.然后在输入框输入关键字（标签代码我就不写了 ）要先配置跨域 不然会报错

配置跨域

module.exports = {
	dev: {
		// Paths
		assetsSubDirectory: 'static',
		assetsPublicPath: '/',
		proxyTable: {
			'/api': {
				target: 'https://apis.map.qq.com', // 你请求的第三方接口
				changeOrigin: true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
				pathRewrite: { // 路径重写，
					'^/api': '' // 替换target中的请求地址，也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api即可。
				}
			},
		},
	}

//触发关键词输入提示事件
/**
 * @param {输入值} e
 */
getsuggest: function(e) {
	that = this;
	if (e.length <= 0) {
		//用于接收地址列表的数组，在data声明
		that.addressList = []
		return;
	}
	//在执行这一步之前要配置跨域，不然会报错
	this.$axios
		.get("/api/ws/place/v1/suggestion", {
			params: {
				keyword: e,//关键字
				region: that.city,//当前城市
				key: "HFXBZ-NQSWI-Z"//你申请的key
			}
		})
		.then(res => {
		//成功返回的信息
			console.log(that.city)
			console.log(res);
			that.addressList = res.data.data;
		})
		.catch(err => {
			console.log(err)
			this.$message.error("请求超时");
		});
},

4.最终效果