当前位置: 首页 > news >正文

react中使用腾讯地图

腾讯文档

申请好对应key

配置限额

https://lbs.qq.com/service/webService/webServiceGuide/webServiceQuota

代码

用到的服务端接口
1.逆地址解析
2.关键词输入提示

import React, { Component } from 'react';
import styles from './map.less'
import { Form, Row, Col, Input, Select, Spin, message } from 'antd';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import axios from 'axios'
import debounce from 'lodash/debounce';
import createItem from '@/components/form/ItemList/createItem';
let key = 'your tengxun key';@createItem()
@connect((merchantsFile) => ({...merchantsFile,
}))export default class mapControl extends Component {componentDidMount() {// this.props.onRef && this.props.onRef(this);this.initMap();this.fetchUser = debounce(this.fetchUser, 800);}static propTypes = {editable: PropTypes.bool,optionKey: PropTypes.string,options: PropTypes.array,addBlankOption: PropTypes.bool,type: PropTypes.oneOf(['dropdown', 'radio', 'group', 'searchQuery', 'menu']),value: PropTypes.any,valueType: PropTypes.oneOf(['object', 'array']),onChange: PropTypes.func,menuData: PropTypes.array,term: PropTypes.string,}static defaultProps = {dispatch: PropTypes.dispatch,}constructor(props) {super(props);// this.qqMap = {};this.state = {inputValue: undefined,// 展示中心经纬度和默认Marker经纬度(没啥用)center: '',fetching: false,loading: false,lnglatObj: {lat: '',lng: ''},data: []};}// 创建TMap方法  核心代码TMap = key => {return new Promise(function (resolve, reject) {window.init = function () {resolve(qq);};var script = document.createElement('script');script.type = 'text/javascript';script.src = 'http://map.qq.com/api/js?v=2.exp&callback=init&key=' + key;script.onerror = reject;document.head.appendChild(script);});}initMap = () => {//设置中心坐标this.TMap(key).then(qq => {//设置地图属性let myOptions = {zoom: 16,mapTypeId: qq.maps.MapTypeId.ROADMAP,viewMode: '2D',disableDefaultUI: true};//创建地图,绑定domthis.map = new qq.maps.Map(document.getElementById('myMap'), myOptions);// 获取当前位置if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(position => {const { latitude, longitude } = position.coords;const currentLocation = new qq.maps.LatLng(latitude, longitude);this.setMapMarker(currentLocation)});}});}// 设置地图点位以及将该点位移入中心位置setMapMarker = (myLatlng) => {// let latObj = { lat: 30, lng: 80 }this.map.setCenter(myLatlng);//现实已经存在的点 qq已挂载在window下面let markerlast = new qq.maps.Marker({position: myLatlng,map: this.map,draggable: true});qq.maps.event.addListener(markerlast, 'dragend', this.changeAddress);}// 拖曳点位并且获取地址 逆地址编码changeAddress = (location) => {this.setState({ loading: true })// 根据拖曳的坐标调取接口获取位置const { dispatch } = this.propsdispatch({type: "后端接口",payload: {path: 'ws/geocoder/v1/',method: 'GET',param: {location: location.latLng.lat + ',' + location.latLng.lng,}}}).then(res => {this.setState({ loading: false })if (res.code !== 20000) {message.error(res.data.message);return} else {this.setState({ lnglatObj: res.data.result.location })this.setInputValue(res.data.result.address)}});}handleChange = (chageValue, twoValue) => {const { form } = this.propsconst { children, data } = twoValue.propsthis.setState({inputValue: children,lnglatObj: data.location}, () => {// console.log(this.state.lnglatObj, 'lnglatObj')const { lat, lng } = data.locationconst locationObj = new qq.maps.LatLng(lat, lng)this.setValueFather()// 地图点位联动this.setMapMarker(locationObj)})}// 触发父组件赋值setValueFather = () => {const { inputValue, lnglatObj } = this.statethis.props.onChange((!inputValue && !lnglatObj)? undefined: [inputValue && inputValue.valueOf(), lnglatObj && lnglatObj.valueOf()]);}setInputValue = (e) => {// 当输入框值为空清空经纬度和默认地址if (!e) {this.setState({lnglatObj: { lng: null, lat: null },})}this.setState({inputValue: e,}, () => {this.setValueFather()})}// 获取模糊查询fetchUser = value => {const { dispatch } = this.propsthis.setState({ loading: true })dispatch({type: "后端接口",payload: {enableCache: true,path: 'ws/place/v1/suggestion',method: 'GET',param: {keyword: value}}}).then(res => {this.setState({ loading: false })if (res.code === 20000) {message.success(res.message);this.setState({ data: res.data.data });} else {message.error(res.message);}});};render() {const { inputValue, fetching, data, loading } = this.stateconst { valueMap } = this.propsconst options = this.state.data.map(d => <Option key={d.id} data={d}>{d.address}</Option>);return (<><SelectshowSearch{...this.props}value={inputValue ? inputValue : valueMap}placeholder='请输入详细地址'filterOption={false}onSearch={this.fetchUser}onChange={this.handleChange}notFoundContent={fetching ? <Spin size="small" /> : null}style={{ marginBottom: 16, width: '100%' }}loading={loading}>{options}</Select><div id="myMap" className={styles.myMap}></div></>);}
}

map.less

.myMap {/*地图(容器)显示大小*/width: 100%;height: 215px;
}.rowmap {margin-bottom: 24px;
}.mapcon {height: 215px;
}

相关文章:

react中使用腾讯地图

腾讯文档 申请好对应key 配置限额 https://lbs.qq.com/service/webService/webServiceGuide/webServiceQuota 代码 用到的服务端接口 1.逆地址解析 2.关键词输入提示 import React, { Component } from react; import styles from ./map.less import { Form, Row, Col, I…...

deepin23beta中SQLite3数据库安装与使用

SQLite 是一个嵌入式 SQL 数据库引擎&#xff0c;它实现了一个自包含、无服务器、零配置、事务性 SQL 数据库引擎。 SQLite 的代码属于公共领域&#xff0c;因此可以免费用于任何商业或私人目的。 SQLite 是世界上部署最广泛的数据库&#xff0c;其应用程序数量之多&#xff0c…...

前后端分离项目环境搭建

1. 使用到的技术和工具 springboot vue项目的搭建 工具 idea&#xff0c;mavennodejs 2. 后端框架搭建 利用maven创建springboot项目 3. 前端项目搭建 1. 安装相关工具 nodejs&#xff1a; 一个开源、跨平台的 JavaScript 运行时环境&#xff0c;可以理解成java当中需要…...

HTML静态网页成品作业(HTML+CSS)——家乡漳州介绍设计制作(1个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有1个页面。 二、作品演示 三、代…...

世界第二对海信到底有多重要?

作者 | 辰纹 来源 | 洞见新研社 不久前&#xff0c;全球权威市场研究机构Omdia公布了2023年全球电视销量排名&#xff0c;数据显示TCL电视全球销量达到了2526万台&#xff0c;位居全球第二&#xff0c;中国第一。 可是&#xff0c;同样是根据Omdia的数据&#xff0c;海信的官…...

多站合一的音乐搜索下载助手PHP源码l亲测

源码获取方式 回复&#xff1a;031601 搭建教程&#xff1a; 将源码下载上传至宝塔面板&#xff0c;直接运行即可~ 说明&#xff1a; 该源码进行测试&#xff0c;测试成功源码无加密优化相关其他采集问题。...

webserver烂大街?还有必要做么?

目录 什么是 Web Server&#xff1f; 如何提供 HTTP 服务&#xff1f; HTTP协议 简介 工作原理 工作步骤 HTTP请求报文格式 HTTP响应报文格式 HTTP请求方法 HTTP状态码 ​总结 都说webserver是C选手人手必备的烂大街项目&#xff0c;那么webserver 还有必要做么&…...

3.Redis命令

Redis命令 Redis 根据命令所操作对象的不同&#xff0c; 可以分为三大类&#xff1a; 对 Redis 进行基础性操作的命令&#xff0c;对 Key 的操作命令&#xff0c;对 Value 的操作命令。 1.1 Redis 首先通过 redis-cli 命令进入到 Redis 命令行客户端&#xff0c;然后再运行下…...

xray问题排查,curl: (35) Encountered end of file(已解决)

经过了好几次排查&#xff0c;都没找到问题&#xff0c;先说问题的排查过程&#xff0c;多次确认了user信息&#xff0c;包括用户id和alterid&#xff0c;都没问题&#xff0c;头大的一逼 问题排查过程 确保本地的xray服务是正常的 [rootk8s-master01 xray]# systemctl stat…...

【数据库】Oracle内存结构与参数调优

Oracle内存结构与参数调优 Oracle 内存结构概览oracle参数配置概览重要参数&#xff08;系统运行前配置&#xff09;:次要参数&#xff08;可在系统运行后再优化调整&#xff09;: Oracle数据库服务器参数如何调整OLTP内存分配操作系统核心参数配置Disabling ASMM&#xff08;禁…...

PS学习-抠图-蒙版-冰块酒杯等透明物体

选中图&#xff0c;ctrlA 全选 ctrlC复制 创建一个蒙版图层 选中蒙版Alt 点击进入 ctrlv 复制 ctrli 反转 原图层 ctrldelete填充为白色 添加一个背景&#xff0c;这个方法通用 首选创建一个 拖到最底部 给它填充颜色 这个可能是我图片的原因。视频是这样做的...

绝赞春招拯救计划 -- 操作系统,组成原理,计网

进程和线程 进程 一个在内存中运行的应用程序。每个进程都有自己独立的一块内存空间&#xff0c;一个进程可以有多个线程 线程 进程中的一个执行任务&#xff08;控制单元&#xff09;&#xff0c;负责当前进程中程序的执行。一个进程至少有一个线程&#xff0c;一个进程可以…...

c语言:于龙加

于龙加 任务描述 于龙同学设计了一个特别的加法规则&#xff0c;加法被重新定义了&#xff0c;我们称为于龙加。 两个非负整数的于龙加的意义是将两个整数按前后顺序连接合并形成一个新整数。 于龙想编程解决于龙加问题&#xff0c;可是对下面的程序他没有思路&#xff01; …...

AcWing 790:数的三次方根 ← 浮点数二分

【题目来源】https://www.acwing.com/problem/content/792/【题目描述】 给定一个浮点数 n&#xff0c;求它的三次方根。【输入格式】 共一行&#xff0c;包含一个浮点数 n。【输出格式】 共一行&#xff0c;包含一个浮点数&#xff0c;表示问题的解。 注意&#xff0c;结果保留…...

【LLM】LLama2模型(RMSNorm、SwiGLU、RoPE位置编码)

note 预训练语言模型除了自回归&#xff08;Autoregressive&#xff09;模型GPT&#xff0c;还有自编码模型&#xff08;Autoencoding&#xff09;BERT[1]、编-解码&#xff08;Encoder-Decoder&#xff09;模型BART[67]&#xff0c;以及融合上述三种方法的自回归填空&#xf…...

【力扣白嫖日记】1934.确认率

前言 练习sql语句&#xff0c;所有题目来自于力扣&#xff08;https://leetcode.cn/problemset/database/&#xff09;的免费数据库练习题。 今日题目&#xff1a; 1934.确认率 表&#xff1a;Signups 列名类型user_idinttime_stampdatetime User_id是该表的主键。每一行都…...

TinTin Web3 动态精选:以太坊坎昆升级利好 Layer2,比特币减半进入倒计时

TinTin 快讯由 TinTinLand 开发者技术社区打造&#xff0c;旨在为开发者提供最新的 Web3 新闻、市场时讯和技术更新。TinTin 快讯将以周为单位&#xff0c; 汇集当周内的行业热点并以快讯的形式排列成文。掌握一手的技术资讯和市场动态&#xff0c;将有助于 TinTinLand 社区的开…...

PCL 高斯投影反算:高斯投影坐标转大地坐标(C++详细过程版)

目录 一、算法原理二、代码实现三、结果展示四、测试数据PCL 高斯投影反算:高斯投影坐标转大地坐标(C++详细过程版)由CSDN点云侠原创。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫。 一、算法原理...

解决:IDEA编译Java程序时报编译失败

1、问题展示&#xff1a; 2、解决方法&#xff1a;...

vue+vite根据版本号清空用户浏览器缓存

项目生产环境发布新版本之后&#xff0c;用户可能会因为一些本地缓存的数据不一样而导致页面报错。这时候可以根据版本号去清空用户缓存。 1、在package.json文件中有一个管理版本号属性&#xff1a;version&#xff0c;在每次打包部署之前修改当前版本号。 2、在main.js文件中…...

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

stm32G473的flash模式是单bank还是双bank?

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

智慧医疗能源事业线深度画像分析(上)

引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

(转)什么是DockerCompose?它有什么作用?

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

在 Spring Boot 项目里,MYSQL中json类型字段使用

前言&#xff1a; 因为程序特殊需求导致&#xff0c;需要mysql数据库存储json类型数据&#xff0c;因此记录一下使用流程 1.java实体中新增字段 private List<User> users 2.增加mybatis-plus注解 TableField(typeHandler FastjsonTypeHandler.class) private Lis…...

鸿蒙(HarmonyOS5)实现跳一跳小游戏

下面我将介绍如何使用鸿蒙的ArkUI框架&#xff0c;实现一个简单的跳一跳小游戏。 1. 项目结构 src/main/ets/ ├── MainAbility │ ├── pages │ │ ├── Index.ets // 主页面 │ │ └── GamePage.ets // 游戏页面 │ └── model │ …...