vue项目web端根据腾讯地图获取当前定位并通过关键字搜索地址列表
1.先去腾讯地图开放平台申请一个key腾讯地图开放平台2.在vue初始化时 created函数中调用下面的方法 因为要先拿到当前城市信息比较好用 ,不拿也没关系created() {this.Tmap();},/*** 腾讯地图获取当前定位* 只调用此方法就行*/Tmap() {that = this;var geolocation = new qq.maps.Geolocation("HFXBZ
·
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.最终效果
更多推荐
已为社区贡献1条内容
所有评论(0)