微信小程序(八):地图
来源:互联网 发布:手机数据能删除吗 编辑:程序博客网 时间:2024/04/29 19:51
功能点:地图
本文基于微信小程序公测版,IDE:微信开发者工具 0.11.122100
今天打算继续写一下这个系列的文章,因为17年1月9号微信小程序就要正式上线了,为了赶这波热潮,打算把本系列上篇文章的demo,《附近三公里》当做一个正式版发布。
然而悲催的事情总是这么多,打开工具的时候,发现微信做了几次升级,而我们之前跑的好好的项目,个别功能居然跑不起来了,没办法,继续采坑吧,这里先介绍一下这个版本上地图的变化。
如果看过我这个系列的文章的话,你可能还记着,在写上篇文章的时候,微信提供了一个js的方法,调用一下就直接打开了微信内置的地图,但是这个版本上,这个功能被改了!被改了!被改了!
这个版本(小程序刚出,有些东西难免会有改动,这里所讲的也只能说基于这个版本,至于下一个版本会不会改,谁都说不好)地图被抽出成一个组件map
。这里不得不说一句,本版本的map,开放的功能接口还是太少,有很多效果都不能达到。
这里我修正一下,写这篇文章的时候,本文说的内容都没有问题,前文的demo用的是wx.openLoaction
方法打开微信的内置地图,但是写本文的时候,这个方法不好用了。当时以为是微信的版本迭代把这个方法干掉了,但是在昨天我发现这个方法又好用了,现在想想可能是当时这个方法存在bug。
那就在这里简单说一下wx.openLoaction
。这个方法提供了一系列的参数来打开微信的内置地图。
参数如下:
latitude: e.currentTarget.dataset.lat , // 纬度,范围为-90~90,负数表示南纬longitude: e.currentTarget.dataset.lng, // 经度,范围为-180~180,负数表示西经scale: 14, // 缩放比例name: e.currentTarget.dataset.name, // 位置名address: e.currentTarget.dataset.address, // 地址的详细说明
如上打开的地图可以显示当前定位位置和你传入的位置,并可以规划路线(这个目前是在ios中提供,android中并没有提供)和在第三方地图中打开。
组件 map
下面来自官方文档
我们可以通过设置中心经纬度来设置地图中心点。设置scale
来设置地图的缩放层级。markers,polyline,circles,都接受一个点的集合,来显示不同的样式。controls允许我们以相对布局的方式设定一系列的控件,并通过bindcontroltap属性绑定事件。
官方文档对各个属性都有很详细的介绍,请移步。
下面把我的demo中地图的page,贴出来给大家当一个例子,好好看看可以避免很多我踩过的坑。
<!-- map.wxml --><map id="map" longitude="{{lng}}" latitude="{{lat}}" scale="14" show-location="{{true}}" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; position:absolute;top:0;bottom:0;height:auto;"></map>
// map.js//获取应用实例var app = getApp()Page({ data: { lng: 0, lat: 0 }, regionchange(e) { console.log(e.type) }, markertap(e) { console.log(e.markerId) }, onLoad: function (options) { this.setData({ lng: app.globalData.longitude, // 全局属性,用来取定位坐标 lat: app.globalData.latitude, markers: [{ iconPath: "/image/03.png", id: 0, latitude: options.lat, // 页面初始化 options为页面跳转所带来的参数 longitude: options.lng, width: 20, height: 20 }], polyline: [{ points: [{ longitude: app.globalData.longitude, latitude: app.globalData.latitude }, { longitude: options.lng, latitude: options.lat }], color: "#FF0000DD", width: 20, dottedLine: true }] }) }})
这个页面本来笔者是打算做一个导航的,前一个页面传进来一个坐标和自己的定位坐标做一个路线的规划,但是map
并没有给我们提供这个接口,唯一搭点边的只有 polyline
属性,但是,这个属性连起来的是直线!是直线!是直线!你不能指望着你的客户,拿着你的小程序,在地图上按直线给过去吧。
后来,我有研究了一下用js版的百度地图嵌套,发现然并卵,可能笔者功力不够,没找到怎么把百度的js引到小程序里面,所以这个功能并不是很好用。
- 微信小程序(八):地图
- 微信小程序把玩(八)view组件
- 微信小程序之八(用户登录)
- 微信小程序把玩(八)view组件
- C#.net 地图控件开发(八) 地图要素Feature
- 微信小程序开发MAP(地图)
- 微信小程序地图划线
- 微信小程序地图定位
- 微信小程序地图导航
- 微信小程序地图导航
- 模板元程序(八)
- Android天气预报程序(八)
- 微信小程序之地图功能
- 微信小程序之map地图
- 微信小程序map地图整理
- 微信小程序之地图功能
- 微信小程序-地图类应用
- 地图裁剪程序(转贴)
- 需求分析人员的工作
- java transient简介
- HV000030: No validator could be found for type: java.lang.Integer
- X264编码
- maven install失败
- 微信小程序(八):地图
- MemoryTracker
- android点击空白地方隐藏软键盘
- ES Search APIs(持续更新)
- 对jQuery对象的理解
- Unity3D研究院之设置自动旋转屏幕默认旋转方向
- transient和volatile
- LVDS信号介绍及PCB设计
- Java中的instanceof关键字