Map组件

本文主要展示地图组件的几个能力:

  • 经纬度转预览图
  • 经纬度转大图
  • 地理位置转经纬度
  • 预览图缩放

最终效果:

wsml代码如下:

<view class="page-body">
<view class="page-section page-section-gap">
<map
id="myMap"
style="width: 100%; height: 300px;"
latitude="{{latitude}}"
longitude="{{longitude}}"
markers="{{markers}}"
covers="{{covers}}"
show-location
></map>
</view> <view class="btn-area">
<button bindtap="chooseLocation" class="page-body-button" type="primary">选择位置</button>
<button bindtap="openLocation" class="page-body-button" type="primary">打开位置</button>
<button bindtap="getCenterLocation" class="page-body-button" type="primary">获取位置</button>
<button bindtap="moveToLocation" class="page-body-button" type="primary">移动位置</button>
<button bindtap="translateMarker" class="page-body-button" type="primary">移动标注</button>
<button bindtap="includePoints" class="page-body-button" type="primary">缩放视野展示所有经纬度</button>
</view>
</view>

部分代码如下:

Page({
data: {
latitude: 23.099994,
longitude: 113.324520,
markers: [{
id: 1,
latitude: 23.099994,
longitude: 113.324520,
name: 'T.I.T 创意园'
}],
covers: [{
latitude: 23.099994,
longitude: 113.344520,
iconPath: '/image/location.png'
}, {
latitude: 23.099994,
longitude: 113.304520,
iconPath: '/image/location.png'
}]
},
onReady: function (e) {
this.mapCtx = wx.createMapContext('myMap')
},
chooseLocation:function(){
var that = this;
wx.chooseLocation({
success: function (res) {
console.log(res, "location")
console.log(res.name)
console.log(res.latitude)
console.log(res.longitude)
that.setData({
latitude: res.latitude,
longitude: res.longitude
})
},
fail: function () {
// fail
},
complete: function () {
// complete
}
})
},
openLocation:function(){
var that = this;
wx.openLocation({
latitude: that.data.latitude,
longitude: that.data.longitude,
scale: 18
})
},
getCenterLocation: function () {
this.mapCtx.getCenterLocation({
success: function(res){
console.log(res.longitude)
console.log(res.latitude)
}
})
},
moveToLocation: function () {
this.mapCtx.moveToLocation()
},
translateMarker: function() {
this.mapCtx.translateMarker({
markerId: 1,
autoRotate: true,
duration: 1000,
destination: {
latitude:23.10229,
longitude:113.3345211,
},
animationEnd() {
console.log('animation end')
}
})
},
includePoints: function() {
this.mapCtx.includePoints({
padding: [10],
points: [{
latitude:23.10229,
longitude:113.3345211,
}, {
latitude:23.00229,
longitude:113.3345211,
}]
})
}
})
.page-section-gap{
box-sizing: border-box;
padding: 0 30rpx;
}
.page-body-button {
margin-bottom: 30rpx;
}

小程序开发-Map地图组件的更多相关文章

  1. 微信小程序开发—快速掌握组件及API的方法

    微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支 ...

  2. 微信小程序开发—快速掌握组件及API的方法---转载

    微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支 ...

  3. 微信小程序开发05-日历组件的实现

    接上文:微信小程序开发04-打造自己的UI库 github地址:https://github.com/yexiaochai/wxdemo 我们这里继续实现我们的日历组件,这个日历组件稍微有点特殊,算是 ...

  4. 手摸手教你微信小程序开发之自定义组件

    前言 相信大家在开发小程序时会遇到某个功能多次使用的情况,比如弹出框.这个时候大家首先想到的是组件化开发,就是把弹出框封装成一个组件,然后哪里使用哪里就调用,对,看来大家都是有思路的人,但是要怎样实现 ...

  5. 小程序之map地图上不能在覆盖层

    问题:页面上有一个地图功能,地图上面有两个按钮,是需要覆盖在地图上的,在小程序编辑器中显示是没问题的,但是扫码测试后发现在手机上不显示这两个按钮 解决方法:使用cover-viwe标签包裹一下就可以了

  6. 微信小程序之 map 地图使用

    1.在app.json中与pages平级的位置处,加上: "permission": { "scope.userLocation": { "desc& ...

  7. 微信小程序开发之日期组件

    一: wxml: <view class="navbarlift" style="background:#ffffff;padding:20rpx"> ...

  8. 小程序开发-Canvas画布组件

    Canvas画布 基本使用方法: 在wxml中添加canvas组件 <canvas canvas-id='canvasDemo' class='demo'></canvas> ...

  9. 微信小程序开发06-一个业务页面的完成

    前言 接上文:微信小程序开发05-日历组件的实现 github地址:https://github.com/yexiaochai/wxdemo 这里来说一说我们的理念,我们也学习小程序开发有一周多了,从 ...

随机推荐

  1. JS 鼠标放上去滑出内容案例

    .sliderbar { width: 200px; height: 40px; position: relative; margin: 0 auto; } .sliderbar span { dis ...

  2. 18、Memento 备忘录模式

    例如:用于记录快照(顺势状态).存盘 1.Memento Memento设计模式是一种软件设计模式,用于将对象回滚到其先前状态.它是行为设计模式的一部分,与算法和对象之间的职责分配有关. 行为模式描述 ...

  3. 2020-07-16:如何获得一个链表的倒数第n个元素?

    福哥答案2020-07-16: 1.快慢指针.快指针先走n步,然后快慢指针同时走,直到快指针走到尾.2.两次遍历.第一次遍历获取链表长度,然后计算出序号,然后遍历获取序号下的元素.3.数组保存.遍历一 ...

  4. C#LeetCode刷题之#641-设计循环双端队列(Design Circular Deque)

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/4132 访问. 设计实现双端队列. 你的实现需要支持以下操作: M ...

  5. C#LeetCode刷题之#101-对称二叉树(Symmetric Tree)

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/4068 访问. 给定一个二叉树,检查它是否是镜像对称的. 例如,二 ...

  6. C#LeetCode刷题之#896-单调数列(Monotonic Array)

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3760 访问. 如果数组是单调递增或单调递减的,那么它是单调的. ...

  7. Flutter 容器 (1) - Center

    Center容器用来居中widget import 'package:flutter/material.dart'; class AuthList extends StatelessWidget { ...

  8. 怎么写简历,简历才不会被丢到非洲&#127757;

    前言 只有光头才能变强. 文本已收录至我的GitHub精选文章,欢迎Star:https://github.com/ZhongFuCheng3y/3y 最近的三歪朋友圈可以看到很多的字节.腾讯的同学都 ...

  9. clients-producer-组包发送消息

  10. 基于OpenSIPS 实现分机注册服务服务器

    呼叫中心平台中坐席是不可或缺的一环,而坐席打电话自然需要使用办公分机.通常情况下我们通过软交换平台FreeSWITCH.Asterisk即可搭建分机注册服务. 但单台FreeSWITCH或Asteri ...