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

最新推荐文章于 2024-11-25 11:18:48 发布

原创最新推荐文章于 2024-11-25 11:18:48 发布 · 4.4k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

jQuery and javascript 专栏收录该内容

14 篇文章

订阅专栏

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

我在使用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),// 图标中央下端的尖角位置。
});

ok~