微信小程序-map地图功能开发教程

基本使用

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

.wxml

1. <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

1. data: {
   
2.     //
   
3.     markers: [{
   
4.       iconPath: "../../img/marker_red.png",
   
5.       id: 0,
   
6.       latitude: 40.002607,
   
7.       longitude: 116.487847,
   
8.       width: 35,
   
9.       height: 45
   
10.     }],
    
11.     ... //省略代码
    
12.     }

复制代码

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

然后map控件引入即可：

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

复制代码

效果如下：

polyline

1. data: {
   
2.     //
   
3.     polyline: [{
   
4.       points: [{
   
5.         longitude: '116.481451',
   
6.         latitude: '40.006822'
   
7.       }, {
   
8.         longitude: '116.487847',
   
9.         latitude: '40.002607'
   
10.       }, {
    
11.         longitude: '116.496507',
    
12.         latitude: '40.006103'
    
13.       }],
    
14.       color: "#FF0000DD",
    
15.       width: 3,
    
16.       dottedLine: true
    
17.     }],
    
18.     ... //省略代码
    
19.     }

复制代码

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

复制代码

circles

1. data: {
   
2.     //
   
3.     circles: [{
   
4.       latitude: '40.007153',
   
5.       longitude: '116.491081',
   
6.       color: '#FF0000DD',
   
7.       fillColor: '#7cb5ec88',
   
8.       radius: 400,
   
9.       strokeWidth: 2
   
10.     }],
    
11.     ... //省略代码
    
12.     }

复制代码

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

复制代码

效果如下：

controls

1. controls: [{
   
2.       id: 1,
   
3.       iconPath: '../../img/marker_yellow.png',
   
4.       position: {
   
5.         left: 0,
   
6.         top: 300 - 50,
   
7.         width: 50,
   
8.         height: 50
   
9.       },
   
10.       clickable: true
    
11.     }]

复制代码

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

复制代码

control点击事件如下：

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

复制代码

其实可以通过在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中抽出来的 ！

核心代码如下：

1. let startGeocoding = function (e) {
   
2.             wx.request({
   
3.                 url: 'https://api.map.baidu.com/geocoder/v2/',
   
4.                 data: geocodingparam,
   
5.                 header: {
   
6.                     "content-type": "application/json"
   
7.                 },
   
8.                 method: 'GET',
   
9.                 success(data) {
   
10.                     let res = data["data"];
    
11.                     if (res["status"] === 0) {
    
12.                         let result = res["result"];
    
13.                         // outputRes 包含两个对象，
    
14.                         // originalData为百度接口返回的原始数据
    
15.                         // wxMarkerData为小程序规范的marker格式
    
16.                         let outputRes = {};
    
17.                         outputRes["originalData"] = res;
    
18.                         outputRes["wxMarkerData"] = [];
    
19.                         outputRes["wxMarkerData"][0] = {
    
20.                             id: 0,
    
21.                             latitude: result["location"]['lat'],
    
22.                             longitude: result["location"]['lng'],
    
23.                             address: geocodingparam["address"],
    
24.                             iconPath: otherparam["iconPath"],
    
25.                             iconTapPath: otherparam["iconTapPath"],
    
26.                             desc: '',
    
27.                             business: '',
    
28.                             alpha: otherparam["alpha"],
    
29.                             width: otherparam["width"],
    
30.                             height: otherparam["height"]
    
31.                         }
    
32.                         otherparam.success(outputRes);
    
33.                     } else {
    
34.                         otherparam.fail({
    
35.                             errMsg: res["message"],
    
36.                             statusCode: res["status"]
    
37.                         });
    
38.                     }
    
39.                 },
    
40.                 fail(data) {
    
41.                     otherparam.fail(data);
    
42.                 }
    
43.             });
    
44.         };

复制代码

使用方法：

1. // 地理编码
   
2. 
   
3.   startGeocoding: function () {
   
4.     Bmap.geocoding({
   
5.       fail: fail,
   
6.       success: success,
   
7.       address: '北京大学',
   
8.       iconPath: '../../img/marker_red.png',
   
9.       iconTapPath: '../../img/marker_red.png'
   
10.     })
    
11.   },

复制代码

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

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

复制代码

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

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

1. constructor(param) {
   
2.         this.ak = param["ak"];
   
3.         this.ak2 = param["ak2"];
   
4.     }

复制代码

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

复制代码

使用方法也很简单：

1. //获取静态图
   
2.   getStaticImage: function () {
   
3.     var url = Bmap.getStaticImage({
   
4.       scale: 2
   
5.     });
   
6.     console.log(url);
   
7.     that.setData({
   
8.       staticImageUrl: url
   
9.     })
   
10.   }

复制代码

高德地图API

相比百度地图团队，高德地图团队更及时！ 小程序公测第二天就发布了 小程序高德地图API

微信小程序SDK > 概述

目前提供的功能有：

• 获取POI数据
• 获取地址描述数据
• 获取实时天气数据
• 获取输入提示词
• 路径规划
• 绘制静态图
  

在官网上，直接提供了路径规划的功能代码，和布局代码(.wxml & .wxss)

可见，高德还是比较靠谱的！

腾讯地图API

微信小程序JavaScript SDK

• 地点搜索
• 关键词输入提示
• 逆地址解析
• 地址解析
• 距离计算
• 获取城市列表
• 获取城市区县
  

注意

使用需要注意以下几点：

• map 组件是由客户端创建的原生组件，它的层级是最高的。
• 请勿在 scroll-view 中使用 map 组件。
• css 动画对 map 组件无效。
  

百度地图小程序SDK扩展下载地址：

https://github.com/crazy1235/WXlittleApplication