vue 调用腾讯地图 https://apis.map.qq.com/ws/place/v1/suggestion/

vue 调用腾讯地图

1.先安装依赖
npm install jsonp
2. 新建一个jsonp.js 文件
3. 以下代码放到jsonp.js文件里
exports.install = function(Vue,options){
// 参数：method（API名），data（请求参数对象）
Vue.prototype.jsp = function(method,data){
// baseUrl就是服务器地址
const baseUrl = ‘https://apis.map.qq.com/’; // 这一步可以不用 直接写在文件里
let url = ${baseUrl}${method}?;
// jsonp请求参数和get方法类似，都是params的方式拼接
for(let item in data){
url += &${item}=${data[item]};
}
return this.$jsonp(url);
};
}
4.在main.js 里面引入
import jsonp from ‘./api/jsonp.js’
Vue.use(jsonp);
5.在需要调用的.vue文件里面使用即可
onChange() {
this.jsp(“ws/place/v1/suggestion/”, {
region: ‘限制城市范围’,
keyword: ‘用户输入的关键字’,
key: “xxxxxxxxx”, // 需要申请的密钥
output: “jsonp” //请求方式
}).then(res => {
// 获取出来的数据 根据自己的业务处理逻辑
})
.catch(err => {
console.log(err);
});
},