微信小程序（八）：地图

功能点：地图
本文基于微信小程序公测版，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引到小程序里面，所以这个功能并不是很好用。

微信小程序（八）：地图相关推荐

微信小程序调用地图和跟据经纬度打开手机地图导航
微信小程序调用地图和跟据经纬度打开手机地图导航第一步:输入地址位置 wxml<button bindtap="onChooseLocation">打开地图</b ...
高德地图api调用demo_微信小程序----高德地图API实现的DEMO
[实例简介] 微信小程序----高德地图API实现的周边,天气,路线规划,地址详情等的DEMO.简单的效果,问一下官方能不能不要乱涨积分,你们涨积分,作者被骂!我真的很失望,再这样,我就不上传资源了! ...
微信小程序百度地图API移动选点
微信小程序百度地图API移动选点本文首发微信小程序百度地图API移动选点因为业务需要使用百度地图API,参考一位大佬编写腾讯API的思路和方法,改造成百度地图API移动选点. 思路: wxml前端 ...
uniapp微信小程序 map地图markers图标不显示，markers图标真机调试不显示
uniapp微信小程序 map地图markers图标不显示,markers图标真机调试不显示举例: 预期效果如下,蓝色为用户位置,红色为店铺位置均为自定义图标实际发布后手机上的效果 (此处忽略位置 ...
腾讯位置服务--微信小程序JSSDK地图开发
腾讯位置服务–微信小程序JSSDK地图开发 1.腾讯位置服务文档传送门:https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview [ ...
微信小程序实现地图自定义大小画圆以及地图自适应（iview-Weapp+微信开发者工具）
iview-Weapp 本项目中使用的UI为iview-Weapp,可在百度自行进入官网并根据文档下载并引入至项目,此处就不多说了. 具体实现主要实现了在微信小程序下使用地图的marker点击弹出画 ...
微信小程序实现地图定位
前言地图定位这个功能大家都很熟悉吧,那大家知道微信小程序中要怎么实现地图定位呢,其实非常简单,看完本篇文章,你也可以轻松实现这个小功能. 1.首先呢你要有一个方法去触发这个点击事件,下面已经写好啦, ...
微信小程序实现地图导航功能
先获取当前地址可参考以下链接 https://blog.csdn.net/weixin_42272544/article/details/88599214 html代码 <!--index.w ...
微信小程序map 地图引入配置+腾讯地图地址坐标解析
最终效果一.要实现的功能展示地图. 参考map组件在地图上展示多个店铺. marker标记点用于在地图上显示标记的位置. 点击店铺放大图标,展示选择的店铺信息. 更改选择店铺的标记尺寸大小. 在 ...
微信小程序进行地图导航,地图展示功能
(1)点击调用微信内置地图 wx.getLocation 会弹出自己的授权框页面调用js: 点击调用\onLoad里面调用 address(){wx.getLocation({//获取当前经纬度ty ...

微信小程序（八）：地图

组件 map

微信小程序（八）：地图相关推荐

最新文章

热门文章