js调用百度地图API并设置百度地图marker偏移量使标注的底部尖尖指向坐标

最新推荐文章于 2023-09-11 16:02:27 发布

Ya_Wen

最新推荐文章于 2023-09-11 16:02:27 发布

阅读量4.1k

点赞数 2

分类专栏： jQuery and javascript

本文链接：https://blog.csdn.net/gl0ry/article/details/105657204

版权

本文介绍了如何使用JavaScript API GL v1.0版调用百度地图，并设置marker偏移量，使标注底部尖尖指向坐标。内容包括GL版本的特点，如3D地图展示、动画跳转功能，以及获取密钥、初始化地图、开启滚轮缩放、创建自定义标注和设置标注偏移量的步骤。

摘要由CSDN通过智能技术生成

我在使用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);                 // 初始化地图，设置中心点坐标和地图