微信小程序开发实战(18):地图组件
时间:2022-07-23
本文章向大家介绍微信小程序开发实战(18):地图组件,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在小程序中可以使用<map>标签嵌入地图,那么可能很多同学会问,<map>嵌入的是哪家的地图呢?这还用问,自然是腾讯的地图了,而且不能换成其他的地图(百度、高德等)。
我们先来了解一下<map>标签的常用属性。
- longitude:经度
- latitude:纬度
- scale:缩放级别,默认值时16,取值范围是5到18
- controls:在地图上放置的控件数组
- markers:在地图上放置的标记点数组
- show-location:显示带有方向的当前定位点
- bindcontroltap:点击控件时触发的事件
- bindmarkertap:点击标记点时触发的事件
- bindregionchange:视野发生变化时触发的事件
下面的布局文件中放置了一个<map>标签,并设置了上述的属性。
<map longitude="113.324520" latitude="23.099994"
scale="14" controls="{{controls}}"
bindcontroltap="controltap" markers="{{markers}}"
bindmarkertap="markertap" polyline="{{polyline}}"
bindregionchange="regionchange" show-location
style="width: 100%; height: 100%;"/>
显示的效果如图1所示。
图1显示腾讯地图
在地图上,显示了一个标记(笑脸图像)和一个控件图像(蓝精灵图像)。可能很多同学会问,标记和控件到底有什么区别呢?不都可以放置图像吗?实际上,标记和控件是基本相同的,主要区别只有一点,标记会随着地图移动,而控件不会随着地图移动。
在<map>标签中,大多数属性都使用了变量,这些变量和相应方法的代码如下:
Page({
data: {
markers: [{
iconPath: "/image/face.png", // 标记图像
id: 0,
latitude: 23.099994,
longitude: 113.324520,
width: 50,
height: 50
}],
polyline: [{ // 在地图上通过经纬度绘制折线
points: [{
longitude: 113.3245211,
latitude: 23.10229
}, {
longitude: 113.324520,
latitude: 23.21229
}],
color:"#FF00FF",
width: 5,
dottedLine: false
}],
controls: [{
id: 1,
iconPath: '/image/sprite.png', // 控件图像
position: {
left: 0,
top: 260 - 80,
width: 80,
height: 80
},
clickable: true // 设为控件可单击的状态
}]
},
regionchange(e) {
console.log(e.type)
},
markertap(e) {
console.log(e.markerId)
},
controltap(e) {
console.log(e.controlId)
}
})
我们看到,在这段代码中,有三个数组:markers、polyline和controls。这三个数组都通过对象定义了多个属性。其中markers和controls数组中属性类似,前者每个数组元素表示一个标记,后者一个数组元素表示一个控件。ployline中每个数组元素表示一条折线(通过经纬度确定折线中的每个点)。这些折线(本例只是一条直线),从笑脸标记头顶中心部位向上延伸。
点击控件和标记都可以点击,点击后,Console中输出的日志信息如图2所示。在日志信息中分别输出了在markers和controls数组中定义的id属性值。
图2 点击标记和控件输出的日志信息
- 互联网协议入门(二)
- 设计模式六大原则(4):接口隔离原则
- 设计模式六大原则(3):依赖倒置原则
- 闲的无聊时候就手动写第一个漏洞扫描工具吧!
- 模拟退火算法从原理到实战【基础篇】
- python接口自动化3-自动发帖(session)
- 平面上给定n条线段,找出一个点,使这个点到这n条线段的距离和最小。
- python接口自动化4-绕过验证码登录(cookie)
- 洛谷P1313 计算系数【快速幂+dp】
- python接口自动化5-Json数据处理
- Numpy教程第1部分 - 阵列简介(常用基础操作总结)
- Session和Cookies的基本原理
- 浅析Numpy.genfromtxt及File I/O讲解
- 损失函数详解
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法