百度地图mapv方法封装

最新推荐文章于 2024-04-22 09:51:38 发布

原创最新推荐文章于 2024-04-22 09:51:38 发布 · 3.6k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#百度地图 #mapv #自定义标签 #折线 #多边形

项目中使用到了百度地图，把一些方法进行了封装，在此记录一下，方便自己和其他人以后使用

1. 代码环境

因为项目需求，前端页面中引用vue.js进行开发，不过这部分和百度地图关系不大，可以忽略不记

2. 前期准备

1）准备一个百度地图开发者账号

2）百度地图API：http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference_3_0.html

3）mapV:https://mapv.baidu.com/

3. 开始开发

1）页面基础

引入百度地图、引入mapV、引入自己封装的百度地图方法

2）创建一个基本地图

注：在页面加载完成之后再去调用地图方法，代码如下

 this.$nextTick(function () {
   //创建地图
   createMap(_this, 'allmap')
})

createMap方法用于创建一个基础的地图，可以设置绑定的容器、鼠标滚动是否控制地图视图区域改变、地图中心点城市、地图视图区域大小、地图自定义样式

/*
* 创建Map实例，便于全局修改地图样式及属性
* 参数：th:this,domId:元素ID,isCanScroll：鼠标滚动是否控制地图视野，cityName:中心点城市名称,默认石家庄,zoom:地图缩放级别，不填写默认13级
* */
function _createMap(th,domId,isCanScroll,cityName,zoom) {}

页面效果：

地图样式参考百度地图demo

2. 在地图上批量添加自定义文字

            // 批量显示文字信息
            createLables: function () {
                var _this = this
                //成功获得公司列表后，将公司名称批量展示在地图上
                axios.post('/HeatingRunMap/GetHeatCompanyList').then(function (res) {
                    var data = res.data.Data
                    data.forEach(function (val,idx) {
                        val.ComName = '公司名称-' + idx
                    })
                    _createTextByMapv(_this,data,'ComMapX','ComMapY','ComName')
                })
            }

/*
* mapv方法 批量创建文字标记点
* 参数：th:this, textArr: 文字数组， xStr：x坐标轴下标，yStr：y坐标轴下标, nameStr:名称下标
* */
function _createTextByMapv(th,textArr,xStr,yStr,nameStr) {}

效果图：

3. 批量添加自定义icon的marker

// fun-批量添加自定义icon的marker
            createMarkers: function(){
                var _this = this
//公司id数组
                _this.curCheckedHeatCompany = ["0", "130100001", "130100002", "130100003", "130100004", "130100005", "130100006", "130100007"]
                axios.post(url, data).then(function (res) {
                    var markArr = res.data
                    //批量添加普通的标记点
                    _createNormalPointsByMapV(_this,_this.map,'https://mapv.baidu.com/examples/images/flag.png',markArr,'ObjectId','ObjectName')
                })
            },

公共方法

/*
* mapV批量添加标志点，通用
* 参数：th:this, map:this.map, iconUrl: 自定义icon图片地址，markArr：坐标点数组，idStr：id下标，nameStr：名称下标，clickHandler：点击回调函数，非必填,mousemoveHandler:鼠标滑过回调事件，非必填
* */
function _createNormalPointsByMapV(th,map,iconUrl,markArr,idStr,nameStr,clickHandler,mousemoveHandler) {}

效果图：

4. 给标记添加点击/鼠标滑过回调事件

添加点击回调事件很简单，在步骤3中，公共方法_createNormalPointsByMapV中写上回调函数即可，点击传回两个参数，一个事标记点本身item，一个是鼠标信息e

_createNormalPointsByMapV(_this,_this.map,'/Content/static/images/heatStation4.png',markArr,'ObjectId','ObjectName',function (item,e) {
      console.log('点击回调',item,e)
})

5. 批量添加折线

// fun-批量添加折线
            createLines: function(){
                var _this = this
                _this.curCheckedHeatCompany = ["0"]
                axios.post(url, data).then(function (res) {
                    var data = []  //承载折线数据

                    //将后台传递的数据格式化
                    res.data.Data.forEach(function (val,idx) {
                        var lineArr = []
                        val.Points.forEach(function (p) {
                            var pp = p.split(',')
                            lineArr.push([pp[0], pp[1]])
                        })
                        data.push({
                            geometry: {
                                type: 'LineString',
                                coordinates:lineArr
                            }
                        })
                    })
                    //调用添加折线的公共方法
                    _createNormalLineInMapByMapv(_this, _this.map, data, '#FF0000', 3)
                })
            },

_createNormalLineInMapByMapv方法

/*
* 批量增加普通折线
* 参数 th:this,map:this.map,data:折线数据，strokeStyle：折线填充颜色，lineWidth：折线宽度，clickHandler：点击回调事件
* data例子：
* [
*   {
*       geometry:{
*       coordinates:["139.000000","121.000000"]
*       }
*   },
*   {
*       geometry:{
*       coordinates:["139.000000","121.000000"]
*       }
*   }
* ]
* */
function _createNormalLineInMapByMapv(th,map,data,strokeStyle,lineWidth,clickHandler) {}

效果图：

6. 批量添加多边形

后台接口错误，暂时没有多边形的数据，接口正常之后，补写这部分的代码

7. 添加信息窗口

点击标记点创建/打开信息窗口

需要注意的是，页面中要引入百度地图自定义信息窗口的插件InfoBox_min.js

// fun-创建/打开自定义的信息窗口
            createWindowInfo: function(item,e){
                var _this = this
            //    先判断是否已经存在信息窗口,如果存在，直接打开信息窗口
                if (_checkAndOpenOInfoWindow(_this, id, e)) {
                    return false
                }
              // 不存在，创建一个信息窗口
                var info = '这里写窗口要展示的信息'
                _createNormalOInfoWindow(_this, 120, 180, info, id, e.point)
            },

_checkAndOpenOInfoWindow方法监测页面中是否已经存在对应的信息窗口

/*
* 检查信息窗口是否存在
* 参数: th: this, item: 绑定事件的layer, e: 鼠标信息
* 如果存在信息窗口，打开信息窗口，取消掉后续活动
* 如果不存在信息窗口，继续执行后续活动
* */
function _checkAndOpenOInfoWindow(th,id,e) {}

_createNormalOInfoWindow方法：在页面中创建一个新的信息窗口

* 创建一个普通的信息窗口
* TODO 样式需要根据UI调整，point需要做出偏移量
* 参数：th:this，width: 信息窗口的宽度（单位px）,height: 信息窗口的高度（单位px）,info:信息窗口要展示的信息，point：信息窗口要打开的点
* */
function _createNormalOInfoWindow(th,width,height,info,id,point) {}

效果图：