A. vue 使用百度地图(vue-Bai-Map)
腾讯地图暂时官方没有在npm上放置，但是有个人的两三年前的依赖，所以我选用网络地图来做。
1.安装依赖
2.main.js里面引入并填写你的网络地图key
3.你需要的vue页面引入
4.html
5.methods里面
如果想用动态渲染地图则核心是先把{BMap, map} 这两个东东挂在data然后再使用,要不然报错BMap, map undefind
B. 如何使用百度地图API
在网络搜索引擎中搜索关键词“网络地图API”，如下图所示。
2
访问网络地图API官方网站，如下图所示。
3
本经验案例以web开发为为例，所以选择Javascript API。
网络地图JavaScript API是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。另外，2014年1月9日，极速版JavaScript API全新上线，此版本专门针对简单功能的移动端浏览器开发提供。
该套API免费对外开放。自v1.5版本起，您需先申请密钥（ak）才可使用，接口（除发送短信功能外）无使用次数限制。
4
Javascript API有3种，这里选择Javascript API大众版，如下图所示。
5
申请网络地图密钥，如下图所示。
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metaname="viewport"content="initial-scale=1.0,user-scalable=no"/>
<styletype="text/css">
body,html,#allmap{width:100%;height:100%;overflow:hidden;margin:0;font-family:"微软雅黑";}
</style>
<scripttype="text/javascript"src="http://api.map..com/api?v=2.0&ak=您的密钥"></script>
<title>地图展示</title>
</head>
<body>
<divid="allmap"></div>
</body>
</html>
<scripttype="text/javascript">
//网络地图API功能
varmap=newBMap.Map("allmap");//创建Map实例
map.centerAndZoom(newBMap.Point(116.404,39.915),11);//初始化地图,设置中心点坐标和地图级别
map.addControl(newBMap.MapTypeControl());//添加地图类型控件
map.setCurrentCity("北京");//设置地图显示的城市此项是必须设置的
map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放
</script>
C. 前端百度地图如何实现点击添加创建点并获取该点的信息
网络地图api里有点击事件，在回调函数里创建点就行了
D. 【百度地图篇】1.Flutter+百度Sdk实现地图功能 & 百度地图显示网格问题
我是初学者小白，所以很多看法不深，理解也不够透彻。但是很适合小白们一起从低角度往高处探索。文中有错误的，感谢指正，一起进步。
趁着假期做一个Flutter的地图功能，因为后端选用了网络地图，所以前端没得挑。找了遍插件，并没有现成可用的。（不过发现了网络官方也自开发Flutter插件，目前功能只有一个获取本地位置信息，后期会继续增加吧？很期待！）
参考帖子： https://blog.csdn.net/sjm19901003/article/details/53128375
这个实际上跟功能之间没太大关系，只是我按照个人摸索的过程来写。
当对一个“领域/知识块”完全不懂的时候，360°的方向都不确定的话。先了解基础概念，有利于你确定自己的摸索方向。
参考帖子： https://www.jianshu.com/p/742b15d38404
中间我跳过了几十，上百个帖子的摸索过程。这个才是关键能够真正做事的参考。
因为网络的sdk还算是很完善的，所以一旦出问题，都会有对应的报错提示。
我是使用flutter插件：permission_handler，来解决安卓的动态授权问题，用法简单而且设计合理。
这个错误直接来看，就是签名有问题。怎么查看SHA1码和包名，这里不多说，网上有极其多的方法，网络Sdk开发指南里也有。没那么复杂，也没那么麻烦。按照流程操作就是对的。
实在不放心？跟我一样，flutter打包后，把apk反过来解SHA1码不就行了？
参考帖子： https://www.daimajiaoliu.com/daima/4858f130f900409#heading-1
红色框框基本就是帖子讲解的那样。
蓝色框框见下图：release标签里好像是自己设置了。所以debug标签里面，箭头指向的位置，是我多设置的一个参数。
uid: -1 appid -1 msg: httpsPost failed,IOException:Unable to resolve host "api.map..com": No address associated with hostname
这一步我是哭笑不得，一开始老是和问题（2）混淆，导致浪费很多时间。仔细阅读后，发现是不能连接到“api.map..com”。
我打开模拟器的chrome浏览器，发现不能上网。查看手机的dns是10.0.2.3(默认的)，和家里wifi不一样，所以不能上网也正常，之前居然没发现这个问题！！！
终端执行：adb shell 和 getprop，就可以查看所有的属性参数了。（window小伙伴自行网络，这个没多大差别。如果你有多个设备，记得自己选好设备。）
在里面找到这一项，就是你的dns参数。有些人是net.dns1，我的是net.eth0.dns1。这个没关系，只是等下指令 稍微改动 就行。
修改dns指令：setprop net.eth0.dns1 192.168.2.1
后面的192.168.2.1是我自己的dns，这个根据自己的情况来填写。不懂的网络下怎么查看自己的dns。
虽然提示设置失败，但是回到模拟器一看，地图已经显示出来了。
嘿嘿，在flutter设定多大的区域，地图就是多大的区域。用起来就很方便了。
过程十分痛苦，因为对flutter不是很熟悉，对Android原生更是了解很少。所以自己就像突然不能讲话，被丢到一个陌生的环境，却要我去找一个人。所以细心很重要，一定要看清楚错误提示，不要错过每一个细节和可能性。
幸好最后解决了问题，开心~
其实如果你仔细阅读过网络官方的文档，会发现里面有关于 地图的生命周期管理 。然后在这里面没有提及到，这一点虽然没提，但不可或缺，小伙伴就自行思考吧。
最后还有一点，其实我的初衷是想实现一个网络地图的plugin，但是苦于能力有限，对Android的不熟悉，最后折戟。我不得已另起项目，然后重新实现地图sdk接入。经过这次对于这些有更多更全面的认知后，有空会再次研究flutter 插件的开发，共勉，奥利给！！！
E. 在vue3中使用百度地图
1.点击链接跳转到网络地图网址https://lbsyun..com/index.php?title=%E9%A6%96%E9%A1%B5
2.点击开发文档-Web开发-javascript API
3.进入开发文档
4.获取到ak后，要把网络地图引入vue项目中了
<script src="https://api.map..com/api?v=3.0&ak=你的Ak"></script>
<script type="text/javascript" src="https://api.map..com/getscript?v=3.0&ak=你的Ak&services=&t=20210512114808"></script>
<script src="https://api.map..com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
<script src="https://api.map..com/library/InfoBox/1.2/src/InfoBox_min.js"></script>
5.在任意.vue文件中引入地图
6.加载网络地图
7.创建自定义点
8.点击点展示信息窗口
F. 百度地图API基本使用（一）
由于最近项目有需要，所以最近开始研究网络地图API的使用，简单的介绍一下 网络地图JavaScript API 它的使用，希望能够对小伙伴们有所帮助，后续有机会再做深入的研究。
有兴趣的小伙伴可以自行查找网络地图API
网络地图开放平台开发文档中的JavaScript API
在使用网络地图之前，我们需要拥有一个自己的网络账号，申请注册成为网络开发者，然后我们需要创建一个浏览器端应用，就可以获取到一个唯一的服务秘钥（AK）
申请秘钥（AK）
最终html中的内容如下:
实现效果如下：可以进行移动和放大
根据id去获取对应的元素就是我们后续网络地图所要去填充的元素，其实创建容器的时候还有一个coordsType属性去控制坐标的类型，不过我们不配置的话一般都是默认配置为5也就是bd0ll坐标类型， 感兴趣的小伙伴可以去看一看这些坐标类型都有哪些？可以来评论区交流学习
有两种设置中心点的方式，一种是通过上面那样根据经纬度去设置中心点坐标，第二种就是根据城市名作为中心点
Ps：map是我们的容器不要忘了
1.初始化地图时，进行关闭配置
2.使用地图的方法进行配置
1.地图初始化
添加控件前，地图需要进行初始化。例如，要将标准地图控件添加到地图中，可在代码中添加如下内容：
2.添加多个控件
在本例中我们向地图添加一个平移缩放控件、一个比例尺控件和一个缩略图控件。在地图中添加控件后，它们即刻生效。
初始化控件时，可提供一个可选参数，其中的anchor和offset属性共同控制控件在地图上的位置。 anchor表示控件的停靠位置，即控件停靠在地图的哪个角。当地图尺寸发生变化时，控件会根据停靠位置的不同来调整自己的位置。
个性化地图样式编辑器
通过样式ID调用个性化地图样式（推荐）
1.创建个性化地图样式
进入地图开放平台控制台页面，在我的地图中，创建一个地图样式：
2.编辑样式
点击创建的地图样式，进入样式编辑器，根据您的需求自由编辑地图样式：
3.发布样式并获取样式ID
完成编辑后，在我的地图或者编辑器中发布该地图样式，获取发布后生成的样式ID：
4.在JavaScript API中应用地图样式
将第三步中获取的样式ID作为setMapStyleV2方法的参数。
相关代码如下：
注意：
1.使用个性化地图前，请参考Hello World构建基础地图；
2.setMapStyleV2方法需要在地图初始化（centerAndZoom）完成后执行；
3.样式更新不会改变样式ID。因此如果有更新样式的需求，重新编辑发布就可以完成更新。不需要修改JavaScript API调用代码；
4.如果样式ID在控制台中被删除，但JavaScript API还在继续调用。那么将会渲染默认样式的地图；
通过样式JSON调用个性化地图样式
1.获取样式JSON
前序流程和样式ID调用地图样式流程一致，进入我的地图，创建一个地图样式，进入编辑器编辑完成后，直接通过编辑器中的“下载JSON”功能获取JSON代码：
2.在JavaScript API中应用地图样式
将上一步中获取的样式JSON作为setMapStyleV2方法的参数。
相关代码如下：
设置后地图效果如下:
上面这些都是一些简单的使用，后续我在使用的过程中遇到的一些问题以及解决过程，新的API的使用会持续更新分享，网络地图的API开发文档给的还是很全面的，不过就是目前他提供的都是一些在线开发，对于一些内网的公司就不太友好了，所以后续这块我需要去做一下离线开发的研究，等我把离线地图开发弄好之后，再给大家分享。
感谢诸君的观看，文中如有纰漏，欢迎在评论区来交流。如果这篇文章帮助到了你，欢迎点赞和关注。
G. 百度地图API 如何使用
1）下载网络地图移动版API(Android)开发包
要在Android应用中使用网络地图API，就需要在工程中引用网络地图API开发包，这个开发包包含两个文件：mapapi.jar和libBMapApiEngine.so。
2）申请API Key和使用Google map api一样，在使用网络地图API之前也需要获取相应的API Key。网络地图API Key与你的网络账户相关联，因此您必须先有网络帐户，才能获得API
Key；并且，该Key与您引用API的程序名称有关。
网络API Key的申请要比Google的简单多了，其实只要你有网络帐号，应该不超过30秒就能完成API Key的申请。
3）创建一个Android工程
这里需要强调一点：网络地图移动版api支持Android 1.5及以上系统，因此我们创建的工程应基于Android SDK 1.5及以上。工程创建完成后，将mapapi.jar和libBMapApiEngine.so分别拷贝到工程的根目录及libs/armeabi目录下，并在工程属性->Java Build Path->Libraries中选择“Add JARs”，选定mapapi.jar，这样就可以在应用中使用网络地图API了。工程完整的目录结构如下图所示：
H. 前端框架Vue——百度地图使用
网络地图的使用需要一个专属的密钥（ak）作为路径：
按步骤完成，并且激活就能获得一个密钥了，这样我们就可以开始引入地图了。先来看效果图：
现在在 index.html 中引入script:
I. uniapp(安卓端)百度地图的使用
公司项目中有地图展示和定位功能，使用uniapp本以为应该很是容易，应该有现成的空间，去插件市场一找，大部分的插件都是针对H5的，对于app端很少，要不就是需要花钱，这才自己动手实现。
公司过去的项目使用的是网络地图，所以uniapp也就只能使用网络地图了，但是一看官方文档：就是没有网络地图。
在网上搜了一堆，需要使用使用到自定义基座，才能使用，那就只能通过自定义基座看看效果。
1.首先去 网络地图开发者平台申请
这里主要是对安卓端进行操作（这里的包名和下边创建基座的包名一致）
2.申请后再Hbuilder中manifest.json 中配置
3.制作基座
切记：Android包名一定要和网络地图开发平台中的一致
一、定位
1.创建获取定位的类fun.js
2.主类main.js中引入
3.需要的类中使用
输出结果：
二、地图展示
一开始的时候，我总是试图寻找网络地图是不是对uniapp这个平台有单独的API，但是很可惜没有。在网络地图引入后，直接调用uniapp给的map组件，可以展示出地图，但是很多的属性不支持，也找不到相关的处理文档。没办法，上网查找，大部分的处理方案是通过动态引入网络地图JavaScript API GL框架，进行展示。
这个地方，我们需要在网络地图开发者平台申请web前端的开发的key
1.网络地图开发者控制平台，创建web端应用
2.创建动态引入网络地图的script类map.js
3.使用（这里使用到了renderjs），切记如果需要开文档，查看JavaScript API GL相关文档
4.运行效果
这样地图的定位和地图展示基本就完成了，如果需要更加复杂的功能只能去查看网络的官方文档
J. 百度地图API基本使用（三）
PS：我所使用的的是网络地图Javascript API 3.0
本文是对之前使用的延续，继续对网络地图API的一些使用去做归纳和总结，本次主要是对地图上的事件以及路线规划做下一下介绍，如果有小伙伴没有看过之前的网络地图API基本使用（一），网络地图API基本使用（二），可以先去观看一下，前期所需要的一些准备，以及一些基本的用法。
感兴趣的小伙伴可以自行查看网络地图官方提供的文档
网络地图开放平台开发文档中的JavaScript API
也可以通过下方示例中心更直观地看到网络地图API的一些使用，以及它的一些特性
网络地图开放平台-示例中心
想深入研究网络地图avaScript API 3.0方法参数信息的话，可以通过下方类参考
网络地图avaScript API v3.0类参考
另外不同版本的API可以自行在开发文档中的类参考类目中找到,请自行查找
不过要注意：实例中心使用的是BMap去创建容器的，最新版GL地图命名空间为BMapGL, 可按住鼠标右键控制地图旋转、修改倾斜角度。
BMapGL在引入API的方式如下：
BMap在引入API的方式如下：
按照你自己的需求去引用
好的，废话不多说，开整
1.地图加载完成事件 这个事件顾名思义就是在地图加载完成之后会调用这个事件，我们可以去做一些操作。
实现的效果就是在地图加载完成之后，会弹出地图加载完成的提示！实际应用的时候可以能就会涉及到一些基于地图的初始化操作。具体情况具体分析，就不做过多赘述了。
2.地图单击事件 这个事件顾名思义就是在当我们鼠标点击地图上的时候，就会触发这个事件。
我们实现的这个就是单击地图的时候就会触发，可以获取到这个点的经纬度等信息。以及我们之前有介绍的覆盖物的一些触发事件，基本上都是使用的是这个单击事件，使用addEventListener监听click去实现的，这个方法还有监听别的事件，就不一一举例了，给大家看一下有哪些事件可以监听，这些都是从官方提供的类参考中找到的。
3.注销事件 这个注销方法也比较简单，上一个点击事件我们使用的是addEventListener监听click去实现的，这个注销实际上就是移除这个事件，类似于之前的删除覆盖类都是使用的remove这个字段，对应的就是removeEventListener监听click去删除这个点击事件实现的。
如果想研究比较详细的地图事件的小伙伴可以自行查看研究
事件-地图事件
1.覆盖物鼠标事件 这个覆盖物鼠标事件实质就是地图的点击事件，只不过对象换成了覆盖物对象，本质都是使用addEventListener去监听事件的发生。
创建一个点和一个面覆盖物，然后去给这两个覆盖物添加鼠标点击事件
如果想研究比较详细的覆盖物事件的小伙伴可以自行查看研究
事件-覆盖物事件
首先说明一下这个路线规划分为4种，分别是驾车路线规划，公交路线规划，步行路线规划，以及骑行路线规划，使用的类是不一样的，我们一起来看一看。
1.基础驾车路线规划服务示例：
代码如下：
2.数据接口
驾车导航服务也提供了丰富的数据接口，通过onSearchComplete回调函数可以得到BMap.DrivingRouteResult对象，它包含了驾车导航结果数据信息。 结果会包含若干驾车方案，每条方案中包含了若干驾车线路。 每条驾车线路又会包含一系列的关键步骤（BMap.Step），关键步骤描述了具体驾车行驶方案。
BMap.TransitRoute类提供公交线路规划服务。
注意：v3.0中，新增了TransitRoutePlan.getTotal 和 TransitRoutePlan.getTotalType方法，可以获取一条公交换乘方案中总路段数（步行+公交），和指定路段的交通方式类型（步行或公交）。
1.使用服务示例
代码如下：
2.进行跨城路线规划
代码如下：
BMap.WalkingRoute提供步行线路规划服务。基本用法和驾车线路规划类似。
使用服务示例
代码如下：
BMap.RidingRoute提供骑行线路规划服务，基本用法和步行线路规划基本相同。
使用服务示例
代码如下：
感兴趣的小伙伴可以自行去研究
网络地图Javascript API 3.0 出行路线规划 网络地图JS API示例 路线规划
感谢诸君的观看，文中如有纰漏，欢迎在评论区来交流。如果这篇文章帮助到了你，欢迎点赞和关注。