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

[复制链接]
hyt_xcx手机认证 实名认证 视频认证 发表于 2017-12-20 15:06:26 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
本帖最后由 hyt_xcx 于 2017-12-20 15:07 编辑
基本使用

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

.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>
复制代码
参数列表及说明如下:

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

markers

QQ截图20171216105024.png

  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>
复制代码
效果如下:

QQ截图20171216105024.png

polyline

QQ截图20171216105024.png

  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

QQ截图20171216105024.png

  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;">
复制代码
效果如下:

QQ截图20171216105024.png

controls

QQ截图20171216105024.png

  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是显示不出来的)
绑定事件

QQ截图20171216105024.png

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.   startGeocoding: function () {
  3.     Bmap.geocoding({
  4.       fail: fail,
  5.       success: success,
  6.       address: '北京大学',
  7.       iconPath: '../../img/marker_red.png',
  8.       iconTapPath: '../../img/marker_red.png'
  9.     })
  10.   },
复制代码
QQ截图20171216105024.png

然后我还对 静态图 这个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.   }
复制代码
QQ截图20171216105024.png

QQ截图20171216105024.png

高德地图API

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

微信小程序SDK > 概述

目前提供的功能有:

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

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

可见,高德还是比较靠谱的!

QQ截图20171216105024.png

腾讯地图API

微信小程序JavaScript SDK

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

使用需要注意以下几点:

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

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

https://github.com/crazy1235/WXlittleApplication

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

专注源码分享,教程分享
全国服务电话

187-8198-7163

周一至周8:00-22:00

反馈建议

cdhaoyt@163.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.2© 2001-2013 Comsenz Inc.( 蜀ICP备16032957号-1