欢迎光临
我的个人博客网站

百度地图 – 基础学习(1): 地图开发环境搭建

Vue项目接入百度地图,此次学习用的是原生API。

一、引入百度地图JS

在 index.html 内添加script标签,引入百度地图api地址:

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=百度地图秘钥(ak)"></script>

百度地图 - 基础学习(1): 地图开发环境搭建

二、API调用,地图初始化

1、容器节点准备

完成百度地图引入以后,就可以进行地图api调用了。但,在地图初始化api调用之前,还需要先准备一个DOM标签(一般为div)作为容器,用于显示地图。

<el-col style="width: calc(100% - 320px);padding-left: 20px">     <div id="allmap" ref="allmap" :style="{ height: mapHandler.height + 'px' }"></div> </el-col>

注:地图显示和其他内容显示不一样,其他节点我们给DOM标签或父标签设置了宽(100%)高(100%),标签会根据内容的宽高自行撑开节点显示。但地图不会,需要我们明确地设定宽高值(不能用比较宽泛的100%)

2、初始化地图

容器节点准备好以后,就可以进行地图的初始化了。(由于百度地图基类BMap在项目启动时,已被挂载到window对象上,故可以直接调用)

const BMap = window.BMap;// 用常量存放BMap基类,便于其他地方调用,不用每次都去window对象上获取,也更易于理解

mounted() {   this.initMap(); },

initMap() {   this.mapInstance = new BMap.Map(this.$refs.allmap); // 初始化地图,创建Map实例,用全局变量存放Map实例,便于子组件或其他方法调用Map实例   this.getCurrentPosition();    this.mapInstance.addControl(new BMap.NavigationControl()); // 添加地图缩放比例组件   this.mapInstance.addControl(new BMap.ScaleControl()); // 添加比例尺组件   this.mapInstance.addControl(new BMap.OverviewMapControl()); // 添加全局查看组件(个人感觉没啥用)   this.mapInstance.addControl(new BMap.MapTypeControl()); // 添加地图类型控制(地图、卫星、三维) },  // 获取本地位置信息(经纬度坐标、城市名称等),进行地图初始化 getCurrentPosition() {   let that = this;   let geolocation = new BMap.Geolocation(); // 获取本地位置经纬度坐标   geolocation.getCurrentPosition(     function(r) {       that.mapInstance.centerAndZoom(         new BMap.Point(r.longitude, r.latitude),         13       ); // 地图初始化,设置中心点坐标(本地)和地图缩放比例。Point也可以设定为一个固定值,如天安门():       that.mapInstance.setCurrentCity(r.address.city); // 设置地图显示的城市(当前位置城市) 此项必须设置       that.mapInstance.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放       that.loadingStatus = true;     },     { enableHighAccuracy: true }   ); },

百度地图 - 基础学习(1): 地图开发环境搭建

3、地图功能开发

在地图初始化完成以后,就可以根据实际需要进行功能开发了。

赞(0) 打赏
未经允许不得转载:张拓的天空 » 百度地图 – 基础学习(1): 地图开发环境搭建
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏