微信小程序之地图功能

来源：互联网发布：济南淘宝代运营编辑：程序博客网时间：2024/05/16 13:42

转载请注明出处：http://blog.csdn.net/crazy1235/article/details/55004841

本篇blog主要介绍微信小程序中的地图模块相关功能。

基本使用

地图组件使用起来也很简单。

.wxml

<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" circles="{{circles}}" bindregionchange="regionchange" show-location style="width: 100%; height: 350px;"></map>

参数列表及说明如下：

这里写图片描述

除了显示基本地图，还可以在地图上添加markers–标注，polyline–折线，circles–圆形，controls–控件。

markers

这里写图片描述

data: {    //    markers: [{      iconPath: "../../img/marker_red.png",      id: 0,      latitude: 40.002607,      longitude: 116.487847,      width: 35,      height: 45    }],    ... //省略代码    }

在data中定义markers变量来表示覆盖物

然后map控件引入即可：

<map id="map" longitude="{{longitude}}"  markers="{{markers}}" style="width: 100%; height: 350px;" ...//省略代码></map>

效果如下：

这里写图片描述

polyline

这里写图片描述

data: {    //    polyline: [{      points: [{        longitude: '116.481451',        latitude: '40.006822'      }, {        longitude: '116.487847',        latitude: '40.002607'      }, {        longitude: '116.496507',        latitude: '40.006103'      }],      color: "#FF0000DD",      width: 3,      dottedLine: true    }],    ... //省略代码    }

<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" polyline="{{polyline}}" style="width: 100%; height: 350px;">

circles

这里写图片描述

data: {    //    circles: [{      latitude: '40.007153',      longitude: '116.491081',      color: '#FF0000DD',      fillColor: '#7cb5ec88',      radius: 400,      strokeWidth: 2    }],    ... //省略代码    }

<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" circles="{{circles}}" style="width: 100%; height: 350px;">

效果如下：

这里写图片描述

controls

这里写图片描述

controls: [{      id: 1,      iconPath: '../../img/marker_yellow.png',      position: {        left: 0,        top: 300 - 50,        width: 50,        height: 50      },      clickable: true    }]

<map id="map" controls="{{controls}}" bindcontroltap="controltap" style="width: 100%; height: 350px;">

control点击事件如下：

controltap: function (e) {    console.log(e.controlId);  },

其实可以通过在map上添加一个按钮，来实现诸如：定位、状态返回等操作。
（直接通过布局文件在map上添加view是显示不出来的）

绑定事件

这里写图片描述

BUG

关于经纬度，官方文档上都写的是Number类型。但是通过IDE调试的时候，写成字符串也是可以的。但是在IOS真机上运行时，markers却显示不出来，也不报错。

后来自己对照属性的类型，发现后台传来的经纬度是字符串类型的。而字符串类型的经纬度在IOS真机上经测试就是显示不出来。

所以将字符串转成Number类型即可。

百度地图API

百度地图团队的速度还是不错的！在小程序正式公测的第三天（2017.1.11）就发布了小程序版百度地图API

百度地图微信小程序JavaScript API

然而一期的功能并不多：

POI检索服务
POI检索热刺联想服务
逆地址解析服务
天气查询

关于这四个功能，大家自行去调用API就是了！

我要吐槽的是，为什么只有逆地址解析服务，没有地址编码服务呢？！

好吧，你不提供，我加上好吧！！

把参考 web服务API里关于地址编码的API ，在小程序里面封装一下即可！

其实上面看到的四个API也是从他们原有的web服务API中抽出来的！

核心代码如下：

let startGeocoding = function (e) {            wx.request({                url: 'https://api.map.baidu.com/geocoder/v2/',                data: geocodingparam,                header: {                    "content-type": "application/json"                },                method: 'GET',                success(data) {                    let res = data["data"];                    if (res["status"] === 0) {                        let result = res["result"];                        // outputRes 包含两个对象，                        // originalData为百度接口返回的原始数据                        // wxMarkerData为小程序规范的marker格式                        let outputRes = {};                        outputRes["originalData"] = res;                        outputRes["wxMarkerData"] = [];                        outputRes["wxMarkerData"][0] = {                            id: 0,                            latitude: result["location"]['lat'],                            longitude: result["location"]['lng'],                            address: geocodingparam["address"],                            iconPath: otherparam["iconPath"],                            iconTapPath: otherparam["iconTapPath"],                            desc: '',                            business: '',                            alpha: otherparam["alpha"],                            width: otherparam["width"],                            height: otherparam["height"]                        }                        otherparam.success(outputRes);                    } else {                        otherparam.fail({                            errMsg: res["message"],                            statusCode: res["status"]                        });                    }                },                fail(data) {                    otherparam.fail(data);                }            });        };

使用方法：

// 地理编码  startGeocoding: function () {    Bmap.geocoding({      fail: fail,      success: success,      address: '北京大学',      iconPath: '../../img/marker_red.png',      iconTapPath: '../../img/marker_red.png'    })  },

这里写图片描述

然后我还对 静态图 这个API进行了小程序化！！！

/**     * 静态图     *      * @author ys     *     * @param {Object} param 检索配置     * http://lbsyun.baidu.com/index.php?title=static     */    getStaticImage(param) {        var that = this;        param = param || {};        let staticimageparam = {            ak: that.ak2,            width: param["width"] || 400,            height: param["height"] || 300,            center: param["center"] || '北京', // 地址或者经纬度            scale: param["scale"] || 1, // 是否为高清图 返回图片大小会根据此标志调整。取值范围为1或2。 1表示返回的图片大小为size= width *height; 2表示返回图片为(width*2)*(height *2)，且zoom加1  注：如果zoom为最大级别，则返回图片为（width*2）*（height*2），zoom不变。            zoom: param["zoom"] || 11, //高清图范围[3, 18]；0低清图范围[3,19]            copyright: param["copyright"] || 1, // 0表示log+文字描述样式，1表示纯文字描述样式            markers: param["markers"] || null, // 标注，可通过经纬度或地址/地名描述；多个标注之间用竖线分隔        };        return "http://api.map.baidu.com/staticimage/v2?" + "ak=" + staticimageparam["ak"] + "&width=" + staticimageparam["width"] + "&height=" + staticimageparam["height"] + "&center=" + staticimageparam["center"] + "&zoom=" + staticimageparam["zoom"] + "&scale=" + staticimageparam["scale"] + "&copyright=" + staticimageparam["copyright"];    }

关于静态图，在web端调用的时候需要单独申请key，所以这里要在传入一个key！

在BMapWX构造函数中，传入ak2作为静态图的key

constructor(param) {        this.ak = param["ak"];        this.ak2 = param["ak2"];    }

var Bmap = new bmap.BMapWX({  ak: 'xxxxxxxxxxx',  ak2: 'xxxxxxxxxxx'});

使用方法也很简单：

//获取静态图  getStaticImage: function () {    var url = Bmap.getStaticImage({      scale: 2    });    console.log(url);    that.setData({      staticImageUrl: url    })  }

这里写图片描述