腾讯WebService Api 跨域调用

监听input输入,腾讯地图webservice关键词输入提示跨域问题

官方地址链接https://lbs.qq.com/service/webService/webServiceGuide/webServiceSuggestion

$('body').on('input', '#search',
function(e) {
    var search = $('#search').val() $.ajax({
        type: "get",
        url: "https://apis.map.qq.com/ws/place/v1/suggestion",
        data: {
            'keyword': search,
            'region': '北京',
            'key': 'OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77',
            'output': 'jsonp'
        },
        //key换成自己的
        dataType: "jsonp",
        jsonp: "callback",
        jsonpCallback: "QQmap",
        headers: {
            'Content-Type': 'application/json'
        },
        success: function(response) {
            console.log(response)
        }
    });
})

参考https://blog.csdn.net/weixin_34242509/article/details/87986005

当你使用 Vue.js 开发前端应用时,可以通过 `jsonp` 库来发送跨域请求获取腾讯地图的数据。以下是一个示例代码: 1. 首先,确保你已经安装了 Vue.js 和 jsonp 库。可以使用以下命令进行安装: ``` npm install vue jsonp ``` 2. 创建一个 Vue 组件,比如 `MapSearch.vue`,然后在组件内部编写以下代码: ```vue <template> <div> <input type="text" v-model="keyword" placeholder="请输入关键词" /> <button @click="search">搜索</button> <ul> <li v-for="item in suggestions" :key="item.id">{{ item.title }}</li> </ul> </div> </template> <script> import jsonp from 'jsonp'; export default { data() { return { keyword: '', suggestions: [] } }, methods: { search() { const url = 'https://apis.map.qq.com/ws/place/v1/suggestion/'; const params = { keyword: this.keyword, key: 'YOUR_API_KEY' // 替换为你的腾讯地图 API 密钥 }; jsonp(url, params, (err, data) => { if (err) { console.error(err); } else { this.suggestions = data.data; } }); } } } </script> ``` 在上述代码中,我们通过 `jsonp` 函数发送 JSONP 请求到腾讯地图API 地址,并传递关键词和 API 密钥作为查询参数。返回的结果将会更新到 `suggestions` 数组中,然后在模板中使用 `v-for` 指令渲染搜索建议列表。 请注意,你需要将 `'YOUR_API_KEY'` 替换为你自己的腾讯地图 API 密钥,你可以在腾讯地图开放平台申请一个密钥。 这是一个简单的示例,你可以根据自己的需求进行修改和扩展。希望可以帮助到你!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值