vue3 引入腾讯地图解决请求接口https://apis.map.qq.com/ws/place/v1/suggestion跨域问题

试过npm i vue-jsonp不行,然后重新试了这个办法解决了

index.html 中引入

<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=自己申请的key"></script>

 重写 jsonp,就不用在项目中安装 jsonp 了

export const jsonp = function (url, data) {return new Promise((resolve, reject) => {// 1.初始化urllet dataString = url.indexOf('?') === -1 ? '?' : '&'let callbackName = `jsonpCB_${Date.now()}`;url += `${dataString}callback=${callbackName}`if (data) {// 2.有请求参数,依次添加到urlfor (let k in data) {url += `&${k}=${data[k]}`}}let scriptNode = document.createElement('script');scriptNode.src = url;// 3. callbackwindow[callbackName] = (result) => {result ? resolve(result) : reject('没有返回数据');delete window[callbackName];document.body.removeChild(scriptNode);}// 4. 异常情况scriptNode.addEventListener('error', () => {reject('接口返回数据失败');delete window[callbackName];document.body.removeChild(scriptNode);}, false)// 5. 开始请求document.body.appendChild(scriptNode)})
}

使用:

// 引入重写的jsonp文件
import { jsonp } from '../../common/jsonp/jsonp.js'// 使用
const onSearch = () => {let url = 'https://apis.map.qq.com/ws/...';jsonp(url, {key: 'key',output: 'jsonp',...}).then(res => {...})
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/582502.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于UOS python pyqt5开发声卡回路测试程式

1. 环境准备 首先&#xff0c;确保你的UOS系统中安装了Python和PyQt5。 安装Python&#xff1a;大多数Linux发行版都预装了Python。你可以通过在终端运行 python3 --version 来检查Python版本。 安装PyQt5&#xff1a;通过运行 sudo apt-get install python3-pyqt5 来安装Py…

Python入门知识点分享——(十一)if条件语句

if条件语句是一种编程语言中用于控制程序流程的结构。它根据一个条件的真假来决定执行不同的代码块。 if条件语句通常由if关键字、一个条件表达式和一个代码块组成。条件表达式可以是一个返回布尔值的表达式&#xff0c;如果条件为真&#xff0c;则执行代码块中的代码&#xf…

day30 回溯(06)【今天没做题,简单记录一下日程与感想】

day30 代码随想录 2023.12.28 今天确实事情有些多&#xff0c;项目汇报&#xff0c;还有一个C单子的交付。并且临近考试&#xff0c;本来想着现在晚上十点多打卡学习&#xff0c;但一看&#xff0c;三道有难度的题&#xff0c;时间不够了&#xff0c;直接劝退&#xff0c;所以…

数据库系统原理例题之——数据库系统概述

第一章 数据库系统概述 第一章 数据库系统概述【例题】一 、单选题二 、填空题三 、简答题 【答案&解析】一、单选题二、填空题三、简答题 【延伸知识点】【延伸知识点答案&解析】 第一章 数据库系统概述 【例题】 一 、单选题 1.数据库管理系统的英文缩写是( ) A.D…

01_软件测试

01_软件测试 学习目标 1、能复述软件测试的定义 2、能说出7种测试分类的区别 3、能说出质量模型的重点5项 4、能说出测试流程的6个步骤 5、能说出测试模板8个要素 认识软件及测试 什么是软件 软件&#xff1a;控制计算机硬件工作的工具 软件的基本组成 软件生产过程 什么是软…

vue多条数据渲染(带图片)

我在这用的为接口数据&#xff1a; 先调用接口获取需要的数据: 然后用&#xff1a;data绑定需要渲染的数据&#xff1b;&#xff08;记得包裹在<el-table>标签中&#xff09; 然后以此循环渲染数据&#xff1b;那怎么渲染出来图片呢&#xff1f; 在<el-table-column…

Vue3-25-路由-路由的基本使用

对路由的理解 路由 &#xff1a; 就是前端对页面路径的拦截&#xff0c;根据不同的路径渲染不同的组件&#xff0c; 从而实现单页应用中的页面局部刷新的功能。安装路由依赖 根据使用的不同的包管理工具采用不同的命令&#xff0c; 常见的三种包管理工具和对应的命令如下&…

day44 1228

作业1&#xff1a; #include <iostream>using namespace std;class Person {int *age;string &name; public:Person(int age,string &name):age(new int(age)),name(name){cout << "Person的构造函数" <<endl;}~Person(){delete age;cout…

【Java系列】多线程案例学习——基于阻塞队列实现生产者消费者模型

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【Java系列专栏】【JaveEE学习专栏】 本专栏旨在分享学习JavaEE的一点学习心得&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目录…

如何在Mac中设置三指拖移,这里有详细步骤

三指拖移手势允许你选择文本&#xff0c;或通过在触控板上用三指拖动窗口或任何其他元素来移动它。它可以用于快速移动或调整窗口、文件或图像在屏幕上的位置。 然而&#xff0c;这个手势在默认情况下是禁用的&#xff0c;因此在本教程中&#xff0c;我们将向你展示如何在你的…

【C++】字符串常量 与 字符数组 的区别

字符串常量&#xff1a;"abc" 字符数组&#xff1a;char a[3]{a,b,c}; 那么它们相等吗&#xff1f;它们之间的区别是什么呢&#xff1f; 答&#xff1a;不相等 区别在于 字符串常量"abc" 的本质是以空字符\0结尾的字符数组&#xff0c; 而char a[3]{a,b,…

数据库系统原理例题之——SQL 与关系数据库基本操作

SQL 与关系数据库基本操作 第四章 SQL 与关系数据库基本操作【例题】一 、单选题二 、填空题三 、简答题四 、设计题 【答案&解析】一、单选题二、填空题三、简答题四、设计题 【延伸知识点】【延伸知识点答案&解析】 第四章 SQL 与关系数据库基本操作 【例题】 一 、…

XML与Java解析

XML规范统一&#xff0c;与操作系统、编程语言的开发平台无关。 在存储数据、交换数据、数据配置方面有优势。 格式如下 <?xml version"1.0" encoding"UTF-8"?> <books><!--图书信息 --><book id"101"><author&…

springboot整合minio做文件存储

一,minio介绍 MinIO 是一个基于Apache License v2.0开源协议的对象存储服务。它兼容亚马逊S3云存储服务接口&#xff0c;非常适合于存储大容量非结构化的数据&#xff0c;例如图片、视频、日志文件、备份数据和容器/虚拟机镜像等&#xff0c;而一个对象文件可以是任意大小&…

TimeoutException(超时异常)可能的原因和解决方法

TimeoutException 通常表示一个操作在规定的时间内没有完成。以下是可能导致 TimeoutException 的一些常见原因以及相应的解决方法&#xff1a; 网络连接超时&#xff1a; 可能原因&#xff1a; 尝试与远程主机建立网络连接时&#xff0c;连接超过了指定的时间。解决方法&#…

verilog rs232串口模块

前面发了个发送模块&#xff0c;这次补齐&#xff0c;完整。 串口计数器&#xff0c;波特率适配 uart_clk.v module uart_clk(input wire clk,input wire rst_n,input wire tx_clk_en,input wire rx_clk_en,input wire[1:0] baud_sel,output wire tx_clk,output wire rx_clk )…

Kubernetes快速实战与核心原理剖析

K8S 概览 K8S 是什么 K8S 官网文档&#xff1a;https://kubernetes.io/zh/docs/home/ K8S 是 Kubernetes 的全称&#xff0c;源于希腊语&#xff0c;意为“舵手”或“飞行员”。Kubernetes 是用于自动部署、扩缩和管理容器化应用程序的开源系统。 Kubernetes 源自 Google 15 年…

知识笔记(六十三)———JavaScript 工具库 | PrefixFree给CSS自动添加浏览器前缀

为了解决这个问题&#xff0c;国外的牛人开发了了一个 -Prefix-free 的插件&#xff0c;能够自动给我们添加这些前缀&#xff0c;我们仅仅需要编写一次代码&#xff0c;无需在考虑是否兼容其他浏览器&#xff0c;而且如果后面浏览器支持这个属性了&#xff0c;我们只需要移除 -…

EDKII:第一个Helloworld

目录 0 说明 1 步骤 1.1 简介 1.2 创建新文件 1.3 创建printhelloworld.c、printhelloworld.inf&#xff1a; 1.4 修改MdeModulePkg\MdeModulePkg.dsc 1.5 修改EmulatorPkg\EmulatorPkg.dsc 1.6 运行 0 说明 上篇文章记录了如何安装UEFI环境&#xff0c;在这里将会写下…

c++ / day03

1. 定义一个Person类&#xff0c;包含私有成员&#xff0c;int *age&#xff0c;string &name&#xff0c;一个Stu类&#xff0c;包含私有成员double *score&#xff0c;Person p1&#xff0c;写出Person类和Stu类的特殊成员函数&#xff0c;并写一个Stu的show函数&#xf…