什么原因会出现跨域问题呢？我们常常说的跨域，只会出现在浏览器中，因为浏览器同源策略的限制而导致的。同源策略是浏览器最核心也是最基本的安全功能，它会阻止一个域的 javascript 脚本和另一个域的内容进行交互，当双方的 url 不同源（协议、域名、端口三者之一不同）时，就会出现跨域问题。

那么我们在 uniapp 中引入腾讯地图后，当需要请求其中的接口时，如果在微信开发者工具中运行，那么是可以正常请求到的；但当我们需要运行在 H5 端进行调试时，浏览器会出现跨域问题，那么我们如何解决呢？

1. 安装 vue-jsonp

npm install --save vue-jsonp

2. 在 main.js 中使用

import { VueJsonp } from 'vue-jsonp';
Vue.use(VueJsonp);

3. 在需要的组件中使用

methods: {
    xxx() {
        var url = 'https://apis.map.qq.com/ws/...';
        this.$jsonp(url, {
            key: '申请的key',
            output: 'jsonp',
            // 以下填写需要携带的参数（有几个写一个）
            ...
        }).then(res => {
            // 请求成功后的数据
            ...
        })
    }
}

示例：

以“关键字提示”功能为例，需要注意的是：

• 下载相应的 SDK，并引入到项目中
• 在腾讯地图开发平台中申请自己的 key
• 腾讯地图开发平台地址：微信小程序JavaScript文档地址

<template>
    <view>
        <!--绑定输入事件-->
        <input style="border:1px soild black;" v-model="value" @input="getsuggest" />
        <!--关键词输入提示列表渲染-->
		<!--关键词输入提示列表渲染-->
		<view v-for="(item,index) in suggestion" :key="index">
		    <!--根据需求渲染相应数据-->
		    <view>
		    	<!--渲染地址title-->
		    	<view @tap="backfill" :id="index">{{item.title}}</view>
		    	<!--渲染详细地址-->
		    	<view>{{item.addr}}</view>
		    </view>
		</view>
    </view>
</template>

<script>
    // 引入SDK核心类
	var QQMapWX = require('../../common/lib/qqmap-wx-jssdk.min.js');
	// 实例化API核心类
	var qqmapsdk = new QQMapWX({
	    key: '自己申请的key' // 必填
	});
    export default {
		data() {
		    return {
		        suggestion: [],
		        value: '',
			}
		},
        methods: {
            //触发关键词输入提示事件
			getsuggest(e) {
				console.log("e",e.detail.value)
				let url = 'https://apis.map.qq.com/ws/place/v1/suggestion/?keyword=';
				this.$jsonp(url, {
					key: 'YC5BZ-FWFWH-NNEDJ-W7NVF-IN6RH-XPFOA',
					keyword: e.detail.value,
					output: 'jsonp'
				}).then(res => {
					console.log("jsonp", res)
					var sug = [];
					for (var i = 0; i < res.data.length; i++) {
						sug.push({ // 获取返回结果，放到sug数组中
							title: res.data[i].title,
							id: res.data[i].id,
							addr: res.data[i].address,
							city: res.data[i].city,
							district: res.data[i].district,
							latitude: res.data[i].location.lat,
							longitude: res.data[i].location.lng
						});
					}
					this.suggestion = sug
				})
            }，
            //数据回填方法
			backfill(e) {
				// console.log("backfill",e)
				let id = e.currentTarget.id;
				console.log("id",id)
				for (let i = 0; i < this.suggestion.length;i++){
				  if(i == id){
					this.value = this.suggestion[i].title
				  }  
				}
			}
        }
    }
</script>