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;
}

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

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

相关文章

Go 语言中的 Cond 机制详解

概述 在并发编程中&#xff0c;条件同步是一个常见的需求。Go 语言提供了 sync.Cond 类型来满足这一需求。sync.Cond 基于互斥锁&#xff08;sync.Mutex&#xff09;提供了条件变量的同步机制&#xff0c;允许一组 goroutine 在满足某个条件时进行阻塞等待&#xff0c;或者在条…

python接口自动化之DDT数据驱动测试

一、简单介绍 DDT&#xff08;Date Driver Test&#xff09;&#xff0c;所谓数据驱动测试&#xff0c;简单来说就是由数据的改变从而驱动自动化测试的执行&#xff0c;最终引起测试结果的改变。通过使用数据驱动测试的方法&#xff0c;可以在需要验证多组数据测试场景中&…

C#混淆心得

C#混淆心得 近期遇到混淆C#代码的需求&#xff0c;在网上找了很多办法&#xff0c;在此记录一下。 混淆的本质就是让代码变丑&#xff0c;让别人看不懂。 为什么要混淆&#xff1a; 1.保护核心代码 可以在一定程度上避免别人偷代码&#xff0c;从而保护重要的部分&#xf…

postman---postman参数化

我们在做接口测试的过程中&#xff0c;都会遇到同一个接口不同的数据&#xff0c;每次去一个个填写数据就太麻烦了&#xff0c;今天我们一起学习下如何通过postman进行参数化 一、参数化 参数化就是1个接口请求不同的数据&#xff0c;我们可以通过把请求的数据放入到一个文件…

滑动窗口和螺旋矩阵

209. 长度最小的子数组 题目 给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其总和大于等于 target 的长度最小的 连续 子数组 [numsl, numsl1, ..., numsr-1, numsr] &#xff0c;并返回其长度**。**如果不存在符合条件的子数组&#xff0c;返回…

LInux 进程替换(理解系统调用)

目录 一、替换原理 二、替换函数 1、exec函数 2、命名理解 3、返回值 4、使用execl/lp、execv/vp 5、执行自定义命令 Makefile编译多个文件 命令行程序mycmd.c 传入自己的可执行文件 7、子进程都继承父进程环境变量 8、execle/ve修改子进程环境变量 9、exece函数为…

编写测试用例的方法,这个是真的很好用

大家测试过程中经常用的等价类划分、边界值分析、场景法等&#xff0c;并不能覆盖所有的需求&#xff0c;我们之前讲过很少用到的因果图法&#xff0c;下面就来讲另一种不经常用到但又非常重要的测试用例编写方法——测试大纲法。 测试大纲法适用于有多个窗口&#xff0c;每个…

SpringBoot 过滤器

SpringBoot 过滤器简介 SpringBoot 是一种广泛使用的 Java 框架&#xff0c;用于创建微服务和企业级应用程序。它提供了许多功能&#xff0c;包括用于处理 HTTP 请求和响应的过滤器。在 SpringBoot 中&#xff0c;过滤器是一种组件&#xff0c;它允许您在请求到达控制器之前和…

2024批量导出公众号所有文章生成目录,这下方便找文章了

公众号历史文章太多&#xff0c;手机上翻起来太费劲&#xff0c;怎么快速找到某一天的文章呢&#xff1f;比如深圳卫健委这个号从2014到2024发布近万篇文章。 公众号历史文章太多&#xff0c;手机上翻起来太费劲&#xff0c;怎么快速找到某一天的文章&#xff1f; 如果要找2020…

wsl-oraclelinux 安装 cuda

wsl-oraclelinux 安装 cuda 1. 安装 cuda2. 安装 cuDNN3. 配置环境变量 1. 安装 cuda wget https://developer.download.nvidia.com/compute/cuda/12.4.0/local_installers/cuda_12.4.0_550.54.14_linux.run sudo sh cuda_12.4.0_550.54.14_linux.run2. 安装 cuDNN sudo dnf …

第十四届蓝桥杯省赛真题 Java C 组【原卷】

文章目录 发现宝藏【考生须知】试题 A \mathrm{A} A : 求和试题 B: 分糖果试题 C: 三国游戏试题 D : \mathrm{D}: D: 平均试题 E \mathrm{E} E : 填充试题 F : \mathrm{F}: F: 棋盘试题 G: 子矩阵试题 H: 公因数匹配试题 I: 异或和之差试题 J : \mathrm{J}: J: 太阳 发现宝…

总结linux常用命令

Linux常用命令总结如下&#xff1a; 文件与目录操作&#xff1a; ls&#xff1a;列出目录内容cd&#xff1a;改变当前目录pwd&#xff1a;显示当前工作目录mkdir&#xff1a;创建新目录cp&#xff1a;复制文件或目录rm&#xff1a;删除文件或目录mv&#xff1a;移动或重命名文件…

命令模式在量化交易系统开发中的应用

文章目录 一、命令模式的特点及优点二、命令模式在量化交易系统的应用 一、命令模式的特点及优点 命令模式是一种行为设计模式&#xff0c;它将请求封装成一个对象&#xff0c;从而使得可以使用不同的请求、队列或者日志来参数化其他对象。命令模式的特点和优点如下&#xff1a…

如何重置iPhone的网络设置?这里提供详细步骤

前言 本文介绍如何重置iPhone上的网络设置。该信息适用于iPhone 12到iPhone 6以及iOS 14到iOS 8。 如何在iPhone上重置网络设置 采取以下步骤重置iPhone上的网络设置&#xff1a; 1、在iPhone上&#xff0c;打开设置应用程序。 2、单击通用。 3、滚动到屏幕底部&#xff…

eplan新建符号及符号向量(实现新建符号旋转)

建符号之前先建符号库,这里直接新建符号 选择变量A,写符号名(英文字母),点确定 这时会打开一个空白页面,新建的符号在这里编辑 从原有的符号中插入过来直接编辑(也可自己画,最关键是自动引出线要加中断点) 插入进来后进行编辑: 编辑后: 符号向量A编辑完成后(保持符号编辑页面…

构建灵活可配置的JavaScript插件系统

在现代软件开发中&#xff0c;插件系统为应用程序提供了巨大的灵活性和可扩展性。它们允许开发者在不修改核心代码的情况下扩展和定制应用程序的功能。本文将详细介绍如何构建一个灵活的JavaScript插件系统&#xff0c;包括插件的注册、配置、安装、执行和卸载。 一、插件系统…

基于springboot实现酒店客房管理系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现酒店客房管理平台系统演示 摘 要 随着人们的物质水平的提高&#xff0c;旅游业和酒店业发展的速度越来越快。近年来&#xff0c;市面上酒店的数量和规模都在不断增加&#xff0c;如何提高酒店的管理效率和服务质量成为了一个重要的问题。伴随着信息技术的发…

2核4G服务器够用吗?性能测评自己看

腾讯云轻量2核4G5M带宽服务器支持多少人在线访问&#xff1f;5M带宽下载速度峰值可达640KB/秒&#xff0c;阿腾云以搭建网站为例&#xff0c;假设优化后平均大小为60KB&#xff0c;则5M带宽可支撑10个用户同时在1秒内打开网站&#xff0c;并发数为10&#xff0c;经阿腾云测试&a…

100道面试必会算法-03-快速排序

100道面试必会算法-03-快速排序 快速排序 给你一个整数数组 nums&#xff0c;请你将该数组升序排列。 示例 1&#xff1a; 输入&#xff1a;nums [5,2,3,1] 输出&#xff1a;[1,2,3,5]示例 2&#xff1a; 输入&#xff1a;nums [5,1,1,2,0,0] 输出&#xff1a;[0,0,1,1,…

3级考题(3)(c++)

#204. 鸡兔同笼[2] 题目描述 一个笼子里面关了鸡和兔子&#xff08;鸡有 2 只脚&#xff0c;兔子有 4 只脚&#xff0c;没有例外&#xff09;。 已经知道了笼子里面脚的总数 a&#xff0c;问笼子里面至少有多少只动物&#xff0c;至多有多少只动物。 输入格式 一行&#x…