1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > vue 项目中百度地图 API 使用流程

vue 项目中百度地图 API 使用流程

时间:2020-11-11 20:18:58

相关推荐

vue 项目中百度地图 API 使用流程

文章目录

一、在百度地图开放平台注册账号并登录、认证二、创建 ak三、项目使用四、丰富的功能

一、在百度地图开放平台注册账号并登录、认证

1、网址:/index.php?title=jspopularGL;

2、认证:认证方式分为个人认证和企业认证,这个需要根据自己的需要按照流程填写认证信息;

二、创建 ak

控制台 -> 应用管理 -> 我的应用点击创建应用填写相关申请信息:

创建成功之后可以在应用列表查看自己申请的应用 ak

这个 ak 在开发过程中是必须的;

三、项目使用

1、在 index.html 中引入

<script type="text/javascript" src="http://api./api?v=2.0&ak=你的ak"></script>

这里 ak 是第二步申请的应用 ak,必填;

2、调用

<template><div id="BDMap" stype="height:500px; overflow:hidden"></div></template><script>export default {mounted(){this.map();},methods:{map(){//创建MAP实例,enableMapClick:false :禁用地图默认点击弹框let map = new Bmap.Map("BDMap", {enableMapClick: false }); //创建点坐标let point = new Point(116.404, 39.915);// 初始化地图,设置中心点坐标和地图级别map.centerAndZoom(point, 11); // 添加地图类型控件map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]}));// 设置地图显示的城市 此项是必须设置的map.setCurrentCity('北京'); // 开启鼠标滚轮缩放,不要的话注释掉着一行map.enableScrollWheelZoom();}}}</script>

这里样式必须设置高度和 overflow:hidden,宽度根据自己需要设置;具体的需要根据自己的需求来添加不同的功能;

3、效果图

四、丰富的功能

百度地图提供了非常丰富的功能空间供我们使用:

1、常规功能

Control:控件的抽象基类,所有控件均继承此类的方法、属性。通过此类你可以自定义控件;

NavigationControl:地图平移缩放控件,PC 端默认位于地图左上方,它包含控制地图的平移和缩放的功能;移动端提供缩放控件,默认位于地图右下方;

OverviewMapControl:缩略地图控件,默认位于地图右下方,是一个可折叠的缩略地图;

ScaleControl:比例尺控件,默认位于地图左下方,显示地图的比例关系;

MapTypeControl:地图类型控件,默认位于地图右上方(地图,卫星,三维)。

CopyrightControl:版权控件,默认位于地图左下方。

GeolocationControl:定位控件,针对移动端开发,默认位于地图左下方。

2、地图事件

百度地图大部分 api 对象都含有addEvemtListener方法,我们可以用这个方法来自定义添加事件;同时也提供了removeEventListener事件来移除自定义的监听事件;

map.addEventListener('click',function(e){console.log(e);})map.removeEventListener('click', 函数名)

3、地图覆盖物

Overlay:覆盖物的抽象基类,所有的覆盖物均继承此类的方法;

Marker:标注表示地图上的点,可自定义标注的图标;

Label:表示地图上的文本标注,您可以自定义标注的文本内容;

Polyline:表示地图上的折线;

Polygon:表示地图上的多边形。多边形类似于闭合的折线,另外你也可以为其添加填充颜色;

Circle: 表示地图上的圆;

InfoWindow:信息窗口也是一种特殊的覆盖物,它可以展示更为丰富的文字和多媒体信息;注意:同一时刻只能有一个信息窗口在地图上打开;

具体的功能可以直接参考百度地图 api 实例中心;

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。