地图开发

WeMap（腾讯地图产业版）是腾讯位置服务面向地图4.0-产业互联网时代所推出的数字地图底座。依靠腾讯实时泛在的时空感知能力，腾讯智慧产业和合作伙伴携手建设行业生态，实现地图和真实世界的共生共建，达到“实时感知、全面刻画、精准决策和智能服务”，助力推动数字经济和智慧社会的建设。 11月4日，在武汉举办的2021腾讯数字生态大会上，腾讯位置服务高级总监曹栋清发表WeMap(腾讯地图产业版)官网正式上线。官网将成为各位合作伙伴深刻理解WeMap、并且进一步对接单干的重要窗口。让咱们先睹为快，看看全新的官网带给咱们哪些“干货”。 一、五大外围产品深度分析 WeMap 产品体系由三大服务平台(可视化平台Vis、智能剖析平台AI和产业地图服务Services)、数据管理中台Base和数据工厂Data，共五大外围产品形成。WeMap构建了面向产业互联网的可感知、可计算、可利用的数字地图底座，提供数据生产、治理、剖析、可视和应用服务。 WeMap官网通过图文并貌的出现形式，将五大外围产品的外延、能力和劣势进行了全方位论述，重要信息高深莫测。 二、六大行业解决方案具体出现 WeMap踊跃开辟丰盛多样的行业利用场景，通过构建“一张图”的思路向多个行业提供根底能力的强力撑持，造成面向城市治理、智慧交通、智慧应急、智慧文旅、智慧批发以及智慧地产的六大行业解决方案，助力行业数字化建设和转型降级。 WeMap官网从利用场景、产品服务、产品架构、单干案例展现等多个方面，通过文字、框架图、示意图、甚至实在的产品截图等形式，为你出现一个个残缺的行业解决方案。 三、四类生态合作伙伴全面解读 WeMap生态合作伙伴打算是腾讯地图⾯向智慧产业⽅向的合作伙伴⻓期单干打算，联结能力合作伙伴共建地图数字根底，⾯向全社会招募⾏业、区域、集成单干⽅向的搭档。 WeMap官网针对这四类合作伙伴进行了全面清晰的解读，不便有动向的合作伙伴疾速理解。同时，咱们也面向合作伙伴提供四大搭档权利，目前曾经和一大批优良的合作伙伴建设起了单干关系。 3.1营销反对 销售机会、客户资源共享，由业余的销服团队全程予以跟踪。合作伙伴有机会进入搭档举荐目录，取得线上、线下渠道的联结宣传与推广机会。 3.2培训反对 依据搭档的不同需要，由资深工程师、计划架构师、以及行业专家提供定制化的培训计划。内容包含但不限于产品赋能培训、联结计划开发、以及行业趋势解读。 3.3能力反对 作为前沿科技的孵化器，依靠腾讯人工智能实验室和前沿科技实验室在人工智能、大数据、云计算、位置服务等方面的能力积攒，咱们凋谢腾讯技术，保障联结产品、计划在实际场景中的落地。 3.4生态反对 咱们凋谢腾讯的生态资源，合作伙伴既能领有宽泛C端用户的触达能力，也能与泛滥搭档联动单干、优势互补、共建智慧产业新生态。 四、如何找到WeMap官网？ 做为腾讯位置服务旗下的重要产品，咱们凋谢了多个入口供合作伙伴疾速找到WeMap新官网 4.1腾讯位置服务官网lbs.qq.com一级菜单 4.2腾讯位置服务官网lbs.qq.com首页banner位 4.3腾讯位置服务公众号菜单 以上就是全新上线的WeMap官网的次要内容，欢送各界合作伙伴浏览拜访。如果您有动向进行商务单干，官网外面有多个入口能够中转。欢送登陆官网收费下载《WeMap腾讯地图产业版白皮书》。

2020年11月10日，腾讯地图产业版WeMap于腾讯北京总部正式公布。公布一年来，基于实时感知、全面刻画、精准决策、智能服务为外围，提供面向产业互联网的可感知、可计算、可利用的数字地图底座。腾讯地图产业版在智慧城市、交通、文旅、应急等6大行业取得超过100+我的项目单干，以及超过30家生态合作伙伴助力。 2021年8月，自然资源部公布《实景三维中国建设技术纲要（2021版）》，提出了三维的六点转变—从形象到实在，从动态到动静，从人了解到人机兼容，从立体到平面，从按因素分尺度到按实体分精度，从海洋表层到全空间。同时，从多行业的数字孪生倒退、CIM的产业利用状况等都能看到三维化已成为大势所趋。 在这个过程中，地图从二维到三维的转变也带来了新的窘境：成果差、老本高、更新慢、开发难。如何解决这些难题是行业的独特挑战。 一、WeMap重磅降级 基于行业面对的挑战，在11月4日举办的2021腾讯数字生态大会上，腾讯位置服务高级总监曹栋清对外正式发表：WeMap与Unreal达成单干，借助腾讯在游戏技术上的劣势，全新降级WeMap！曹栋清示意：“降级后的WeMap，将助力产业客户实现高真切、低成本、快更新、易开发的地图可视化能力。” 二、游戏级高真切渲染 2.1城市/修建高真切渲染 依靠腾讯当先的游戏技术积攒，通过丰盛的材质库造成对建筑物、路线、绿地、水系等因素的丑化，实现高真切的城市渲染成果。 中国-深圳 中国-上海 二、高仿真环境渲染 利用游戏渲染引擎对环境、光照、暗影等的超强还原能力，出现城市实在的日夜、光照、天气变动。 三、从寰球到园区，冲破场景限度 依靠腾讯自有地图数据体系，WeMap从宏观到宏观，生成笼罩全域全因素的三维模型，实现数字地球一体化出现。 <center>寰球<center/> 全国 城市 园区 路线 四、自动化生成三维城市 WeMap基于标清和高精的地图数据，自动化生成三维模型，升高城市三维构建的老本。依靠腾讯地图鲜活数据能力，使得三维数据更新周期大大缩短。 自动化生成三维城市 五、UE和Web双引擎凋谢、对立的API调用 基于UE引擎，WeMap提供了灵便的API，不便开发者自主构建三维利用场景。与此同时，WeMap也提供了基于Web的轻量引擎，以对立的 B/S 架构进行API凋谢，开发者可能通过统一的API形式，施展不同渲染引擎的劣势，升高接入门槛，实现不同成果的无缝切换。 WeMap通过游戏级引擎大幅晋升渲染成果，利用互联网地图数据自动化构建出三维城市模型，极大的升高了生产成本并缩短施行周期，更能实现三维数据的周级更新。 除了WeMap的全新降级，曹栋清还在会上发表了WeMap官网的正式上线。他示意，心愿借助WeMap官网的上线，让更多的行业合作伙伴可能理解WeMap，一起构建共创、共建、共享的地图新基建⽣态！

1. 实现注册注册地址：https://lbs.qq.com 点击链接进入腾讯位置服务官网，实现账号注册信息。从右上角头像图标进入控制台，拿到key（一串密钥码），后边会用到，具体信息如下图所示： 2. 下载SDK及demo工程官网页面上方有“开发文档”选项，本文以Android为例，从中抉择“Android地图SDK”链接项，具体操作能够参考下图：在新页面，咱们抉择3D地图SDK，感觉上3D地图应该比2D地图界面更丰盛，视线更酷炫。所以，我抉择了有难度的。 3. 填写key依照官网文档的说法，把key填写到 AndroidManifest.xml 配置文件中就行了，但实际上这并不好使。真正好使办法是在我的项目根目录的 local.properties 中增加密钥key，具体配置如下图所示： 4. 指定程序包在控制台，填写对应程序的包名，安卓对应 package name，iOS对应 Bundle Identifier。具体操作步骤请参考下图： 5. 安装程序装置Android程序并运行，咱们就能够看到地图了，如下图所示：咱们进入第一个选项——根底地图，就能够开始地图功能的摸索了。上面的截图别离展现了腾讯地图示例、海内图、展现地图、地图类型四个根底性能界面，当然还有很多其余的内容，这里就不一一列举了。感兴趣的小伙伴儿能够入手本人深入研究。留神：如果key或包名没有正确填写，在进行上述页面展现的时候会始终提醒key校验失败的信息。 原文作者：Data-Mining

一、性能介绍关键词输出提醒接口能够用于获取输出关键字的补完与提醒，帮忙用户疾速输出。能够通过配合前端程序实现Autocomplete（主动实现）的成果。 二、密钥申请1. 用户登录关上腾讯位置服务主页：https://lbs.qq.com，点击右上角的登录按钮： 2. 验证信息点击控制台，进入开发者信息界面，补全根本用户信息，实现验证。 3. 申请密钥点击左侧key与配额下的key治理：点击创立新密钥，填写Key名称、形容、验证码，期待审核通过：密钥申请通过后，能够点击设置按钮批改名称及形容，并能够抉择启用的产品，以及对调用规定进行限度：同时，能够在查看配额界面查看各接口的用量状况： 三、操作步骤1. 开发文档入口滑动到上方菜单的开发文档 -> 抉择服务端下的WebService API：点击左侧的关键词输出提醒：中转地址：https://lbs.qq.com/service/webService/webServiceGuide/webServiceSuggestion 2. 接口测试能够间接应用Postman工具来测试，或者应用Postwomen（Postman他女朋友，唉，连工具都成双入对了，写个代码都要被虐，罢了，好好打工）。由文档可知，接口的申请类型为GET，默认的数据返回格局为JSON。必填参数有三个： key:开发者密钥keyword：搜寻关键字region：搜寻范畴，必填的限度条件（能够通过region_fix来设置是否扩大范围） 3. 返回后果以下为返回后果，为了残缺展现数据结构，删减了data中的局部数据： { "status": 0, "message": "query ok", "count": 100, "data": [ { "id": "14178584199053362783", "title": "中关村", "address": "北京市海淀区", "category": "地名地址:热点区域:商圈类", "type": 0, "location": { "lat": 39.981047, "lng": 116.320787 }, "adcode": 110108, "province": "北京市", "city": "北京市", "district": "海淀区" }, { "id": "2199027905900", "title": "中关村[地铁站]", "address": "地铁4号线大兴线", "category": "基础设施:交通设施:地铁站", "type": 2, "location": { "lat": 39.984055, "lng": 116.316478 }, "adcode": 110108, "province": "北京市", "city": "北京市", "district": "海淀区" } ], "request_id": "1136352410315519097"}字段含意可见下表（可在接口文档中找到）：四、应用案例因为接口为纯HTTP接口，所以在成果实现上还须要应用我的项目中的一些组件。本例应用最简的jquery-ui来实现autocomplete成果，下载地址为：http://jqueryui.com/download/。 ...

以下内容转载自微信开放社区腾讯位置服务官方文章《3分钟教你学会使用路线规划小程序插件》作者：腾讯位置服务链接： https://developers.weixin.qq....来源：微信开放社区著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。路线规划小程序插件是腾讯位置服务开发的一款为用户规划驾车、公交、步行路线方案的插件。开发者可以直接在小程序内使用这个插件，从而为自己的用户提供多种出行方案选择。 路线规划插件的功能路线规划插件能为用户规划驾车出行路线（如下图1所示），并且当行车起点和行车终点之间可以规划出多个方案时会展示多个方案及方案耗时。这些不同方案体现了不同的策略，例如根据实时路况时间最短、红绿灯数较少、少收费等策略。 同时驾车路线在地图中会通过不同路线的颜色直观反映道路的拥堵情况，例如红色路线表示那段道路拥堵，这就能够让用户提前规避拥堵路段。 路线规划插件也能为用户规划步行出行路线（如下图2所示），不仅显示了步行路线距离和耗时信息，还显示了用户步行过程中，走过的天桥、人行横道数量，更人性化的显示了步行消耗了多少卡路里。 路线规划插件还能为用户规划公交出行路线（如下图所示），提供多种公交和地铁出行方案，并且用户可以根据自己的实际情况进行方案排序，例如时间短优先排序、少步行优先排序、少换乘优先排序。出行方案上也会有时间短这样的标志信息说明方案特点。 路线规划插件的应用场景路线规划插件应用场景非常丰富，可以直接接入到餐饮、电影等各种类型的小程序中，让消费者在小程序中就能获得到达门店的路线规划方案，方便去门店消费。 设想一个场景，小王周末想要吃一顿大餐，于是打开了某家餐厅小程序，当小王决定去这家餐厅时，不需要再打开地图软件去规划出行路线，通过我们的路线规划插件，在这家餐厅的小程序中就能直接规划小王目前的位置到餐厅的出行路线。小王可以选择开车去餐厅，如果今天车牌号限行，那么小王也可以选择公共交通出行，如果到餐厅的距离很近，那么小王可以选择步行方式到达餐厅。 小程序只需要使用路线规划插件就能拥有这些全面精准规划路线能力。看了这些功能，是不是想马上体验呢？别急！接下来就介绍路线规划插件的使用方法。 路线规划插件的使用方法 1、申请路线规划插件在微信公众平台中， “微信小程序官方后台-设置-第三方设置-插件管理” 里点击 “添加插件”（如下图所示），搜索 “腾讯位置服务路线规划” ，选择添加插件，小程序开发者就可以在小程序内使用该插件了。 2、申请key调用路线规划插件需要申请腾讯位置服务的服务账号，key是开发者的唯一标识，申请key请点击这里。申请key的具体步骤如下： 2.1 填写申请信息 2.2 创建key成功 2.3 授权小程序appid开通微信小程序服务：控制台 -> key管理 -> 设置（使用该功能的key）-> 勾选“微信小程序” -> 填写“授权 APP ID” ->保存。 2.4 勾选“WebService API”及“白名单”微信小程序插件需要使用WebService API的部分服务，所以使用该功能的key需要具备相应的权限。 如果开发者之前是腾讯位置服务的用户并申请过key，则可以跳过上面2.1、2.2的步骤，直接进行2.3、2.4步骤的设置。 3、在小程序中引入路线规划插件只需要在小程序的app.json文件做如下配置就可以在小程序中引入路线规划插件： // app.json{ "plugins": { "routePlan": { "version": "1.0.0", "provider": "wx50b5593e81dd937a" } }, "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序定位" } }}4、在小程序中调用路线规划插件在小程序中调用路线规划插件也非常简单： let plugin = requirePlugin('routePlan');let key = ''; //使用在腾讯位置服务申请的keylet referer = ''; //调用插件的小程序的名称let startPoint = JSON.stringify({ //起点 'name': '中国技术交易大厦', 'latitude': 39.984154, 'longitude': 116.30749});let endPoint = JSON.stringify({ //终点 'name': '北京西站', 'latitude': 39.894806, 'longitude': 116.321592});wx.navigateTo({ url: 'plugin://routePlan/route-plan?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint});如以上示例代码所示，只需要传4个参数，就能为小程序用户提供驾车、公交、步行路线规划信息了。这4个参数含义如下： ...

以下内容转载自工程师Nero8421 的文章《 地图中添加沿线文字标注》作者：Nero8421 链接：https://www.cnblogs.com/Allen...来源：博客园著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。最近需要实现导航功能，其中路线规划和导航场景如下图所示： 上面的截图中，路线上面都绘制出了路名，方便用户查看自己选择的路线都经过了哪些道路。这里用到的地图的能力即为沿线文字标注腾讯地图 Android SDK v4.2.7 已经开放了实现此功能的能力。 主要涉及接口如下： 接口名称功能概述PolylineOptions.text(Text text)置沿 polyline 展示的文字PolylineOptions.Text.Builder(SegmentText segmentTextPolylineOptions.Text 构造器PolylineOptions.Text.Builder.addSegmentText(SegmentText segmentText)添加线上展示文字的点串范围PolylineOptions.Text.Builder.color(int color)设置文字颜色PolylineOptions.Text.Builder.strokeColor(int color)设置文字描边颜色PolylineOptions.Text.Builder.size(int size)设置文字尺寸PolylineOptions.Text.Builder.priority(TextPriority priority)设置文字优先级从这个功能涉及到的接口可以看出沿线文字标注是作为 Polyline 的一个属性供用户在添加线的时候展示所需文字。 为一条线添加文字标注1、选择合适的点串作为文字标注的路径。如下，我们选择了 苏州街-北四环西路辅路-彩和坊路 的一个点串作为 Polyline 绘制的路径。 //这一个点串表示了经 苏州街-北四环-彩和坊路 的一条路线List<LatLng> points = new ArrayList<>();//苏州街points.add(new LatLng(39.982382, 116.305883));//北四环西路辅路points.add(new LatLng(39.984914, 116.305690));//彩和坊路points.add(new LatLng(39.985045, 116.308136));points.add(new LatLng(39.983570, 116.308088));points.add(new LatLng(39.980063, 116.308297));2、绘制 Polyline 及其文字标注 public Polyline createLineWithText() { if (mTencentmap == null) { return null; } Polyline polyline = mTencentmap.addPolyline( new PolylineOptions() .addAll(points) .color(0xff54ce4d) .text(createText())); return polyline;}public PolylineOptions.Text createText() { List<PolylineOptions.SegmentText> segmentTexts = new ArrayList<>(); //苏州街 的绘制范围是从第0个点开始，第1个点结束 segmentTexts.add(new PolylineOptions.SegmentText(0, 1, "苏州街")); //北四环西路辅路 的绘制范围是从第1个点开始，第2个点结束 segmentTexts.add(new PolylineOptions.SegmentText(1, 2, "北四环西路辅路")); //彩和坊路 的绘制范围是从第2个点开始，第4个点结束 segmentTexts.add(new PolylineOptions.SegmentText(2, 4, "彩和坊路")); return new PolylineOptions.Text.Builder(segmentTexts).build();}最终的效果： ...

以下内容转载自iOS 工程师Genosage的文章《地图 SDK 系列教程-在地图上展示指定区域》 作者：Genosage链接：https://juejin.im/post/5d721a... 来源：掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。地图SDK系列教程-在地图上展示指定区域在使用腾讯 iOS 地图 SDK 的过程中，经常会遇到需要地图展示指定区域的场景，相信大家也会遇到类似的情况，地图 SDK 提供了许多与之相关的接口，本篇文章将对这些接口进行整合，并提供示例代码来实现多个场景下展示指定区域的需求。 需要注意，本篇文章适用于地图未发生旋转与俯仰角的场景。 下载腾讯 iOS 地图 SDK 请前往：iOS 地图 SDK 指定区域包含单个坐标点在地图上显示某个固定的坐标点是地图 SDK 最为基础的功能之一。 举例来说，我们根据 SDK 的检索功能得到了天坛公园的坐标 (39.881190,116.410490)，接下来，我们可以通过设置地图的中心点 centerCoordinate 来让地图显示这个坐标，同时我们还可以设置 zoomLevel 来指定缩放级别： // 设置中心点self.mapView.centerCoordinate = CLLocationCoordinate2DMake(39.881190,116.410490); // 设置缩放级别self.mapView.zoomLevel = 15;显示效果如下： 如果想展示墨卡托坐标点 QMapPoint 则需要先通过方法 QCoordinateForMapPoint(QMapPoint mapPoint) 将墨卡托坐标转换为经纬度再进行设置。 指定区域包含多个坐标点现在，假如我们想把天坛公园的搜索结果都显示在地图上，应该如何实现呢？ 首先，我们通过检索功能搜索天坛公园，取搜索结果的前九个坐标点，接下来，应该使我们的地图视野包含这九个坐标点，地图 SDK 提供了方法 QBoundingCoordinateRegionWithCoordinates(CLLocationCoordinate2D *coordinates, NSUInteger count) 来计算多个经纬度坐标点的最小外接矩形 QCoordinateRegion 在得到了外接矩形之后，我们可以直接设置地图的 region 来使其显示我们想要的区域，完整代码如下： CLLocationCoordinate2D coordinates[9];// 天坛公园检索结果坐标coordinates[0] = CLLocationCoordinate2DMake(39.881190,116.410490);coordinates[1] = CLLocationCoordinate2DMake(39.883247,116.400063);coordinates[2] = CLLocationCoordinate2DMake(39.883710,116.412900);coordinates[3] = CLLocationCoordinate2DMake(39.883654,116.412863);coordinates[4] = CLLocationCoordinate2DMake(39.883320,116.400040);coordinates[5] = CLLocationCoordinate2DMake(39.876980,116.413190);coordinates[6] = CLLocationCoordinate2DMake(39.878160,116.413140);coordinates[7] = CLLocationCoordinate2DMake(39.878980,116.407080);coordinates[8] = CLLocationCoordinate2DMake(39.878560,116.413160); // 计算区域外接矩形QCoordinateRegion region = QBoundingCoordinateRegionWithCoordinates(coordinates, 9); // 设置区域self.mapView.region = region;显示效果如下： ...

使用同一套代码创建你的 web 地图应用。 ✨ https://github.com/XingzheFE/... English | 简体中文 特性Layers MarkerPolylinePopupMap Controls zoomfitViewpanToEventedUtils getBoundlocatecoordinate translate如何使用安装使用 npm 安装 plain-js，你也可以在页面中引入构建后的 js 文件。 $ npm install plain-js --save创建地图创建地图的方式很简单，最直接的方式是在 html 文件中引入地图库的脚本文件以及 plain.min.js // 首先初始化一个 plain 对象let plain = new Plain();// 设置需要使用的坐标系，如果不设置的话所有地图使用默认的坐标系，// Google 和 高德地图在大陆使用 GCJ02，百度地图使用 BD09，// 为了方便开发建议设置为 GCJ02plain.setCoordType("GCJ02");// 告诉 plain 你需要使用 Google 地图，// 可选的参数有 Google Map "GMAP"， 高德地图 "AMAP"， 百度地图 "BMAP"plain.use("GMAP");// 创建一个 Google 地图实例let map = plain.Map({ container: "#map", // DivElement center: [39.908012, 116.399348], zoom: 15});或者使用回调的方式创建 ...

原文首发于微信公众号：jzman-blog，欢迎关注交流！最近的项目涉及到百度地图的使用，项目组通知使用天地图替代百度地图，一个原因是天地图是国家测绘地理信息局建设的，企业可以使用其公众版本进行开发以提供相关的地图信息服务，较其他地图具有权威性，当然天地图提供的服务是否较其他地图更具有权威性和实时性，这个作为普通开发者是不能确定的，另一个原因是减少运用成本，我觉得是否真能达到这样的目标真不一定，毕竟商业地图输出能力还是较免费版本更强。还是先来开始天地图 Android SDK 的学习之路吧，先从一下几个方面来学习： 引入天地图 SDK地图显示我的位置定位图标的修改获取位置信息显示效果引入天地图 SDK首先下载天地图地图 SDK，然后添加相应的 Jar 包和 so 文件到 libs 文件夹中，在 module 的 build.gradle 文件中指定 so 文件的目录为 libs 目录，具体如下： sourceSets { main { //指定so文件的查找目录是libs目录 jniLibs.srcDir 'libs' }}按照官网指定的权限配置，使用过程中发现少了权限，下面是完整权限列表，具体如下： <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /><uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /><uses-permission android:name="android.permission.INTERNET" /><uses-permission android:name="android.permission.CALL_PHONE" /><uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /><uses-permission android:name="android.permission.READ_PHONE_STATE" /><uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /><uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />如果项目 targetSdkVersion 是 23 以上记得动态申请相关危险权限，此时，天地图地图 SDK 就引入到项目中了。 地图显示首先在布局中引入 MapView，布局代码如下： <com.tianditu.android.maps.MapView android:id="@+id/mapView" android:layout_width="match_parent" android:layout_height="match_parent"/>此时，地图就可以正常显示了，不需要额外的配置，当然可以初始化地图相关的一些参数，常用配置如下： private void initMapView() { //启用内置的缩放组件 mapView.setBuiltInZoomControls(true); //得到MapView的控制权,可以用它控制和驱动平移和缩放 mMapController = mapView.getController(); //用给定的经纬度构造一个GeoPoint，单位是微度 (度 * 1E6) GeoPoint point = new GeoPoint((int) (39.915 * 1E6), (int) (116.404 * 1E6)); //设置地图中心点 mMapController.setCenter(point); //设置地图缩放级别 mMapController.setZoom(12);}天地图 Android SDK 的引入及地图显示相对百度地图、高德地图还是比较方便的。 ...

使用组件： react-native-baidu-map获取百度地图API_KEY地址：http://lbsyun.baidu.com，在控制台成功创建应用后，就可以看到应用的api key了 安装yarn add react-native-baidu-map原生部分Android配置react-native link react-native-baidu-map配置AndroidManifest.xml文件1.在<application>中加入如下代码配置开发密钥（AK） <application> <meta-data android:name="com.baidu.lbsapi.API_KEY" android:value="开发者 key" /> </application>2.在<application/>外部添加如下权限声明： //获取设备网络状态，禁用后无法获取网络状态<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />//网络权限，当禁用后，无法进行检索等相关业务<uses-permission android:name="android.permission.INTERNET" />//读取设备硬件信息，统计数据<uses-permission android:name="android.permission.READ_PHONE_STATE" />//读取系统信息，包含系统版本等信息，用作统计<uses-permission android:name="com.android.launcher.permission.READ_SETTINGS" />//获取设备的网络状态，鉴权所需网络代理<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />//允许sd卡写权限，需写入地图数据，禁用后无法显示地图<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />//这个权限用于进行网络定位<uses-permission android:name="android.permission.WRITE_SETTINGS" />//这个权限用于访问GPS定位<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />//获取统计数据<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />//使用步行AR导航，配置Camera权限<uses-permission android:name="android.permission.CAMERA" />//程序在手机屏幕关闭后后台进程仍然运行<uses-permission android:name="android.permission.WAKE_LOCK" />IOS配置使用pod,Podfile文件中添加 pod 'React', :path => '../node_modules/react-native', :subspecs => [ 'Core', 'CxxBridge', 'DevSupport', 'RCTText', 'RCTNetwork', 'RCTWebSocket', 'RCTAnimation' ] pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga' pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec' pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec' pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec' pod 'react-native-baidu-map', :podspec => '../node_modules/react-native-baidu-map/ios/react-native-baidu-map.podspec'注意！！！：AppDelegate.m init 初始化，使用如下代码，可以解决RCTBaiduMapViewManager.h文件找不到的问题#import <react-native-baidu-map/BaiduMapViewManager.h>- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{ ... // 地图 ak 注册 [BaiduMapViewManager initSDK:@""]; ...}使用导入import { MapView, MapTypes, Geolocation, Overlay } from 'react-native-baidu-map'const { Marker } = Overlay;<MapView width={deviceWidth} height={200} zoom={18} trafficEnabled={true} zoomControlsVisible={true} mapType={MapTypes.SATELLITE} center={{ longitude: 116.465175, latitude: 39.938522 }}> <Marker title='中心' location={{longitude: 116.465175, latitude: 39.938522}} /></MapView>效果，上图 ...