Vue3项目调用腾讯地图服务(地址解析 地址转坐标)及使用axios的跨域问题

news2024/11/25 2:42:21

一,需求

根据传入的文本地址 将其转换为坐标 显示地图点位在腾讯地图上

二,使用axios发送请求

import axios from 'axios'; //引入axios
           axios({
                url:'https://apis.map.qq.com/ws/geocoder/v1',
                method:'get'
                //参数 地址和key值
            }).then((data)=>{
                   console.log(data)
            });

但是使用完报跨域错误

(二)解决跨域问题:

经过一番查找,找到了一个方法。使用插件 vue-jsonp,解决跨域问题。

1,安装vue-jsonp,

npm install vue-jsonp

2,直接在使用页面引入使用
import { jsonp } from "vue-jsonp";
  jsonp('http://apis.map.qq.com/ws/geocoder/v1', {
            address: sonTaskItemObj.address,
            key: "VUFBZ-SRPCA-REEK7-CQKQP-PDLYV-V4BH5",
            output: "jsonp"
        }).then(data => {
                
        })

这样我传入的是 xx市xx区xx路 尽量详细  然后会给你返回坐标地址

4,腾讯地图默认的请求是json,在请求的时候需要加 output:"jsonp"

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

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

相关文章

猫咪瘦弱的原因是什么?适合给消瘦猫咪长肉吃的猫罐头分享

很多小猫咪吃得很多,但是还是很瘦,这让很多猫主人感到困惑,猫咪瘦弱的原因是什么呢?铲屎那么多年,还是有点子养猫知识在身上的。那么,小猫咪瘦弱的原因是什么呢?让我们看看是不是这些原因导致的…

为什么有些程序员宁愿在国内 35 岁被辞退,也不愿意去国外工作?

我发现IT圈和电竞圈有一个共性:菜是原罪。 为什么有些程序员35岁就会被辞退?因为菜。 为什么有些程序员不愿意去国外工作?因为菜。 当然,我这里指的菜不是烂泥扶不上墙的那种菜,而是不够拔尖。那么这个问题也就分为了三…

【项目日记(一)】高并发内存池项目介绍

💓博主CSDN主页:杭电码农-NEO💓   ⏩专栏分类:项目日记-高并发内存池⏪   🚚代码仓库:NEO的学习日记🚚   🌹关注我🫵带你学习C   🔝🔝 项目日记 1. 前言2. 什么是高并发内存池…

基于ssm vue个人需求和地域特色的外卖推荐系统源码和论文

首先,论文一开始便是清楚的论述了系统的研究内容。其次,剖析系统需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确系统的需求。然后在明白了系统的需求基础上需要进一步地设计系统,主要包罗软件架构模式、整体功能模块、数据库设计。本项…

9种伪原创工具推荐,快速提升创作效率

如何让自己的文章在海量信息中脱颖而出,成为一个备受关注的焦点,成为许多创作者迫切思考的问题。在这篇文章中,我将向大家介绍9种伪原创工具,这些工具可以让你的文章轻松升级,更具创意和吸引力。 1.Spinbot&#xff08…

simulink中 Data store memory、write和read模块及案例介绍

目录 1.Data store memory模块 2.data store write模块 3.data store read模块 4.仿真分析 4.1简单使用三个模块 4.2 模块间的调用顺序剖析 1.Data store memory模块 向右拖拉得到Data store read模块,向左拉得到Data write模块 理解:可视为定义变量…

C++ 函数详解

目录 函数概述 函数的分类 函数的参数 函数的调用 函数的嵌套调用 函数的链式访问 函数声明和定义 函数递归 函数概述 函数——具有某种功能的代码块。 一个程序中我们经常会用到某种功能,如两数相加,如果每次都在需要用到时实现,那…

矩阵学习相关——(待完善)

线性代数基础知识之–矩阵(Matrix) 矩阵概念————(基础知识) 矩阵理论基础知识 矩阵理论基础知识 矩阵入门 写给有编程基础的人 初学讲义之高中数学二十七:矩阵和行列式 直观理解!你一定要读…

C++多态(详解)

一、多态的概念 1.1、多态的概念 多态:多种形态,具体点就是去完成某个行为,当不同的对象去完成时会产生出不同的状态。 举个例子:比如买票这个行为,当普通人买票时,是全价买票;学生买票时&am…

JavaScript实现手写签名,可触屏手写,支持移动端与PC端双端保存

目录 1.HTML模板 2.获取DOM元素和定义变量 3.创建两个canvas元素,并设置它们的宽度和高度 4.绑定触摸事件:touchstart, touchmove, touchend和click 5.实现触摸事件回调函数:startDrawing, draw和stopDrawing 6.实现绘制线段的函数&…

C# WPF上位机开发(带配置文件的倒计时软件)

【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing 163.com】 前面我们写了倒计时软件,但是不知道大家有没有发现,这个软件起始有一个缺点,那就是倒计时的起始时间都是硬编码…

stl库之map与例题

map是一种关联式容器&#xff0c;它允许将键&#xff08;key&#xff09;映射到值&#xff08;value&#xff09;&#xff0c;所以我们习惯称map为映射 每个元素都是一个键值对&#xff0c;其中键是唯一的 创建map map<key类型, value类型> 变量名; 创建一个键为int&…

11.7QT界面制作

#include "widget.h"Widget::Widget(QWidget *parent): QWidget(parent) {this->resize(881,550);this->setStyleSheet("backgroud-color:rgb(33,35,40)");this->setWindowFlag(Qt::FramelessWindowHint);//标签类QLabel *l1 new QLabel(this);/…

深入理解Flexbox:构建灵活的布局系统

由于篇幅限制&#xff0c;我将提供一个详细的文章大纲和部分内容。您可以根据这个大纲扩展文章内容&#xff0c;以满足3000字的要求。 深入理解Flexbox&#xff1a;构建灵活的布局系统 引言 在现代web设计中&#xff0c;创建灵活且响应式的布局是非常重要的。Flexbox&#xf…

通达OA inc/package/down.php接口存在未授权访问漏洞

声明 本文仅用于技术交流&#xff0c;请勿用于非法用途 由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;文章作者不为此承担任何责任。 一. 产品简介 通达OA&#xff08;Office Anywhere网络智能办公系统&am…

List的元素覆盖问题

问题场景 在备课底层JDBC链接链接数据库时&#xff0c;将读取的数据封装到对象中并添加到list集合中出现了问题。 错误逻辑 代码编写的考量为减少对象占用内存。想通过一个对象完成数据的传递和保存。 核心问题 List集合存储的是每一个对象的引用地址&#xff0c;如果引用的…

perl脚本获取Windows系统常用路径信息

windows系统常用的路径,比如临时目录、资源文件夹、字体保存目录、应用程序数据存放目录等等。在日常操作的时候寻找略有不便。这里用perl写一个脚本&#xff0c;并把这些目录信息格式化为json&#xff0c;方便查找。如下是perl代码&#xff1a; #! /usr/bin/perl use v5.14; …

机器学习---环境准备

一、pySpark环境准备 1、window配置python环境变量 window安装python&#xff0c;配置python环境变量。安装python后,在环境变量path中加入安装的路径&#xff0c;cmd中输入python&#xff0c;检验python是否安装成功。 注意&#xff1a;如果使用的是anaconda安装的python环境…

Elaticsearch 学习笔记

文章目录 Elaticsearch 学习笔记一、什么是 Elaticsearch &#xff1f;二、Elaticsearch 安装1 es 安装2 问题解决3 数据格式 三、索引操作1 PUT 请求&#xff1a;在postman中&#xff0c;向 ES 服务器发 PUT 请求&#xff08;PUT请求相当于创建的意思&#xff09;2 GET 请求&a…

Unity3D实现鼠标悬浮UI或物体上显示文字信息

系列文章目录 Unity工具 文章目录 系列文章目录前言最终效果一、UI事件显示文字1-1 ui事件需要引用命名空间using UnityEngine.EventSystems;1-2 IPointerEnterHandler 接口1-3 IPointerExitHandler 接口1-4 IPointerMoveHandler 接口 二、场景搭建2-1 实现如下 三、代码实现3…