首页 > 其他分享 >react-bmapgl地图的使用

react-bmapgl地图的使用

时间:2024-01-24 09:33:38浏览次数:30  
标签:地图 App Component bmapgl react MapApiLoaderHOC import

import React, { Component } from 'react';
import { Map, Marker, NavigationControl, InfoWindow, MapApiLoaderHOC, ZoomControl } from 'react-bmapgl';

class App extends Component {
    render() {
        return (
            <div className='lg:h-[700px] h-[300px]'>
                <Map center={{ lng: 114.029755, lat: 22.623198 }} zoom="12" enableScrollWheelZoom={false} style={{height:'100%'}}>
                    <Marker position={{ lng: 114.029755, lat: 22.623198 }} />
                    <NavigationControl />
                    <InfoWindow position={{ lng: 114.029755, lat: 22.623198 }} text="
" title="" />
                    <ZoomControl />
                </Map>
            </div>
        )
    }
}

export default MapApiLoaderHOC({ ak: '百度地图密钥' })(App);

 

标签:地图,App,Component,bmapgl,react,MapApiLoaderHOC,import
From: https://www.cnblogs.com/hechunfeng/p/17983906

相关文章

  • React 状态管理 valtio 解析
    valtio是什么valtio是一个很轻量级的响应式状态管理库,它基于Proxy实现,类似于vue的数据驱动视图的理念,使用外部状态代理去驱动React视图更新,不管在react组件内部还是外面都可以使用。下面提供valtio基本用法例子:https://codesandbox.io/embed/5x592g?view=Editor+%2B+Pr......
  • 003*:React 父子通信
    目录 正文1:父子通信/*目标:父传子传递属性,子传父-传递回调函数功能:1:两个组件一个导航,一个侧边栏2:点击导航里的按钮控制侧边栏的显示和隐藏*/importReact,{Component}from'react'//导航组件classNavBarextendsComponent{render(){return(......
  • uniapp微信小程序接入高德地图SDK
    小程序地图SDK原理(注意:这一段要仔细看哦,很多人问我为什么你写的是高德地图SDK,却用的是腾讯地图,答案就在这里)微信小程序开发,可以使用地图组件map,来进行地图显示、定位、显示大头针等基本功能,具体可以看官方文档:微信小程序map组件。map组件只提供一些基本的“硬件”,还需要“大脑......
  • 编写简易斜45度地图编辑器
    最近在研究cocos2dx的地图,最开始使用的是Tiled,这个编辑器做比较小的地图还是比较强大的,不过做大地图的时候,有一些功能不太方便并且有缺陷(包括刷图繁琐以及坐标体系过于复杂,导致寻路比较看起来很不平滑)。于是就酝酿着自己写一个斜45度的地图编辑器。     现在的自己老是不能......
  • 斜45度瓦片地图(Staggered Tiled Map)里的简单数学
    转载至:ShuaiYUAN斜45度瓦片地图(StaggeredTiledMap)里的简单数学前段时间在做游戏的地图编辑功能,我们是在一个斜45度视角的场景上,对地图上的建筑或装饰物进行添加、移动、移除等基本操作,而且位置的改变是以网格作为最小操作单位的。本渣是用StaggeredTiledMap实现的,与垂直视......
  • 2024年可能会用到的几个地图可视化模板
    前言在数字化的过程中,数据可视化变得越来越重要。用户喜欢通过酷炫的视觉效果和直观的数据展示来理解数据。可视化地图组件是数据可视化的重要组成部分。这些地图组件提供多样化的效果,能够更好地展示数据的关系和地理分布,直观地将数据与各个区域进行关联。它们不仅有效而美观地呈......
  • 利用Taro框架搭建基于React项目并编译成微信小程序
    Taro是一个开放式跨端跨框架解决方案,支持使用React/Vue/Nerv等框架来开发微信/京东/百度/支付宝/字节跳动/QQ/飞书小程序/H5/RN等应用。现如今市面上端的形态多种多样,Web、ReactNative、微信小程序等各种端大行其道。当业务要求同时在不同的端都要求有所表现的时候,针对不......
  • uniapp从地图上选择位置、获取当前位置、逆地址解析
     1.从地图选地点或者获取当前位置 getLocation(){ var_this=this; uni.chooseLocation({ success:(res)=>{//地图选点 console.log('位置名称:'+res.name); console.log('详细地址:'+res.address); console.log......
  • React nativve 混合开发移动端应用环境搭建
    安装软件清单:AndroidStudio版本:AndroidStudioGiraffe|2022.3.1Patch3下载地址:https://developer.android.google.cn/studio/archiveJDK版本:JDK17下载地址:https://www.oracle.com/java/technologies/javase/jdk17-archive-downloads.htmlnode版本:18.17.1下载地......
  • React Native性能优化指南
    摘要本文将介绍在ReactNative开发中常见的性能优化问题和解决方案,包括ScrollView内无法滑动、热更新导致的文件引用问题、高度获取、强制横屏UI适配、低版本RN适配iOS14、缓存清理、navigation参数取值等。通过代码案例演示和详细说明,帮助开发者更好地理解和解决ReactNative中......