我在使用js调用百度地图的时候选择了JavaScript API GL v1.0版，官方解释是JavaScript API GL使用了WebGL对地图、覆盖物等进行渲染，支持3D视角展示地图。 GL版本接口基本向下兼容，迁移成本低。目前v1.0版本支持了基本的3D地图展示、基本地图控件和覆盖物。
在对比中发现，JavaScript API GL 多了在移动端支持双击地图放大的功能，还有以动画的方式跳转指定的中心点和级别的flyTo功能：flyTo(center: Point , zoom: Number)，这个功能还是很实用的，不然的话当用户移动地图到别的点时想再跳回标记点的话，页面是没有动画效果，是直接跳转的，太生硬了~
言归正传，首先需要一个密钥，不会的可以查看官网
账号和获取密钥
引入百度地图api
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script>
初始化地图
var map = new BMapGL.Map("container"); // 创建地图实例
var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
开启滚轮缩放，地图的鼠标滚轮缩放默认是关闭的，需要配置开启。
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
新建自定义标注
var point = new BMapGL.Point(116.404, 39.915); //设置在哪个坐标创建标注
var icon = new BMapGL.Icon("images/mapPosition.svg", new BMapGL.Size(60, 60) //设计给的标注图片是60*60的。具体大小根据实际设置
var marker = new BMapGL.Marker(point , {
icon: icon ,// 创建标注
这个时候，地图上已经出现我们需要的标注图片了，但是你会发现是标注图片的中心在坐标上而不是图片的底部指向坐标，这个时候就需要设置标注的偏移量，对icon设置offset
var icon = new BMapGL.Icon("images/mapPosition.svg", new BMapGL.Size(60, 60),{
offset:new BMapGL.Size(30,60),// 图标中央下端的尖角位置。
varicon=newBMap.Icon('pin.png',newBMap.Size(20,32),{
anchor:newBMap.Size(10,30),
infoWindowAnchor:newBMap.Size(10,0) ...
通过地址http://api.map.baidu.com/api 加载API：
<script src="http://api.map.baidu.com/api?key=您的API 密钥&v=版本&services=true 或者false" type="text /javascript...
我们是后端返回的具体的位置信息，然后在百度地图上读取的时候不能把具体的坐标读取完全（返回130.2555555555）地图控件读取的时候是(120.2555),解决办法就是直接给marker点新增一个对象
// 向marker中存储数据
this.editMk.item = e
// marker标记点坐标
this.poleList.forEach(e => {
this.editPoint = new BMap.Point(e.lng, e.lat)
// 添加marker
导致此问题的主要原因就是地图加载位置的问题导致。百度地图的缩放是基于body层的，如果body层有滚动条，插入了百度地图，也就是出现该问题时的状态，这个时候滚轮缩放就会产生偏移。
解决方法：
监听缩放开始事件前的中心点经纬度，然后到缩放事件结束后，将地图重新位移到中心点处。
需要添加的代码如下：
·1.将地图的中心点更改为给定的点。
map.panTo(point);
2.处理缩放事件。
刚好有个项目，然后前端找了这个百度的echarts地图，领导说好，然后说要让它自动切换地图，就丢给我了。。。不过还好，做出来了。可惜的是，效果是实现了，最后却被更高级的领导pass掉，但决定写下这篇博客，或许能帮到有
当我们兴匆匆地把GPS设备传来的经纬度坐标标记到电子地图上时，发现地图上的位置和实际位置相差甚远，这就是天朝上国特有的地图加偏，以安全之名，行掩耳盗铃之事，给我们的开发带来了不必要的麻烦，至于加偏的原因，大家百度一下，网上一大堆，这里就不废话了。除GPS设备本身加偏外，电子地图上的坐标也不是真实的，要想正确显示到地图上，还必须将收到的加偏...
vue-webpack百度地图的引入及可视化数据联动
如何在前端项目中引入百度地图呐
百度地图开发者文档，JavaScriptAPI（注意一下，他有几个版本，但是这些版本不兼容，真的很吐血）
实例化地图
var map = new BMap.Map("allmap"); // 创建地图实例
var point = new BMap.Point(104.072888, 30.576798); // 创建点坐标
this.map.centerAndZoom(point, 10); // 初始化地
百度地图浏览器API 获取GPS定位是根据调用浏览器核心获取GPS，部分手机型号定位不准，主要是因为部分手机采用的是GOOGLE GPS坐标格式、部分手机用的是原生坐标格式这两种格式百度地图无法判断，默认是按照原生坐标格式，进行转换成百度地图的坐标格式，而后在进行展示。废话不多说了，贴代码。解决问题: 根据代码navigator.geolocation.getCurrentPosition获...
最近的项目想做一个在可以通过手持设备获取经纬度，然后在地图上进行标注显示的功能，因为还在技术调研阶段，所以决定先使用百度地图或Google Maps的API来做Demo。通过网上的一些资料和自己对于Google和百度地图的使用，对这两个地图做了一些简单的对比，结论是很明显的——Google在技术水平和成熟度上都要比百度高很多，可以说完全不在一个档次上，但是鉴于Google和中国政府的微...
最近很多小伙伴使用iClient for Leaflet中的第三方地图百度地图展示marker时发现有偏移的问题，今天我们就来聊聊如何正确展示。
二：坐标转换
首先百度地图使用的是BD09坐标，若使用非BD09坐标、未经过坐标转换（非BD09转成BD09）直接叠加在地图上，地图展示位置会偏移，因此通过其他坐标（WGS84、GCJ02）调用服务时，需先用百度接口将其他坐标转换为BD09。
这里要注意的是首先Leaflet中marker需要经纬度坐标，其次直接api转换出来的BD09.
marker.addEventListener(“mouseout”,function(e){
if (this.getIcon().imageUrl!=“img/organization/marker_icon.png”) {
this.setIcon(myIcon);
marker.addEventListener(“click
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=yhCGilF2PHhbqUT2pIWHlZnNeWxAH8s0"></script>
<script type="text/javascript">
var prefix = ctx +...
这篇文章也是创建百度地图的，两个都可以用，看你自己需要哪个自己做修改。不同的地方是下面链接这篇的创建标注的图片是服务器上存储的图片。而本篇是使用SVG的格式来做标注。
百度地图创建多个标注和标签并设置监听事件
百度地图接口版本不同，里面的函数有些区别，我用的是
<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=秘钥"></script>
这个版本创建百度地图需要用
var map = .
