uniapp使用map地图组件

本人所在的公司最近在做共享电动车的项目,打开该应用看到的就是一副地图,可以获取附近共享电动车的地址、状态等信息,开发这个应用程序还需要在地图上规划路线、动态显示轨迹、轨迹回放等功能。共享开发的项目功能总会用到LBS(Location Based Service),即基于位置的服务,国内提供地图服务的有百度地图、高德地图、腾讯地图,本文选取的是腾讯位置服务来进行地图功能的开发。

二、使用步骤

1.uniapp开发map说明

使用uniapp是因为它是一个使用vue.js开发所有前端应用的框架,开发者编写一套代码,可以发布到ios,android,web以及各种小程序,快应用等多个平台。
使用map地图组件开发,地图组件用于展示地图(使用的时腾讯地图),说一下它的属性有:

longitude(类型为Number,没有默认值,表示中心经度)
latitude(类型为Number,没有默认值,表示中心纬度)
scale(类型为Number,默认值为16,缩放级别取值范围为5-18)
markers(类型为Array数组,类型为数组即表示地图上可以有多个,没有默认值,表示标记点)
polyline(类型为Array数组,没有默认值,表示路线,数组上的所有点连成线)
circles(类型Array数组,表示圆)
controls(类型Array数组,表示控件)
include-points(类型Array数组,表示缩放视野已包含所有给定的坐标点)
enable-3D(类型为Boolean,默认值为false,表示是否显示3D搂块)
show-compass(类型为Boolean,默认值为false,表示为是否显示指南针)
enable-overlooking(类型为Boolean,默认值为false,表示为是否开启俯视)
enable-satellite(类型为Boolean,默认值为false,表示为是否开启卫星图)
enable-traffic(类型为Boolean,默认值为false,表示为是否开启实时路况)
show-location(类型为Boolean,表示显示带有方向的当前定位点)
polygons(类型Array,表示为多边形)

点击属性

  1. @markertap-表示点击标记点时触发,e.detail={markerId}
  2. @labeltap-表示点击label时触发,e.detail = {markerId}
  3. @callouttap-表示点击标记点对应的气泡时触发,e.detail = {markerId}
  4. @controltap-表示点击控件时触发,e.detail = {controlId}
  5. @regionchange-表示视野发生变化时触发
  6. @tap-表示点击地图时触发; App-nuve、微信小程序2.9支持返回经纬度
  7. @updated-表示在地图渲染更新完成时触发

我们在写map组件时,组件的宽/高推荐写直接量,比如说是 750rpx,不要设置百分比值,在uni-app中只支持gcj02坐标。

介绍markers属性-类型为数组Array

由之前描述可知,markers属性类型为Array,表示标记点用于在地图上显示标记的位置。这个数组属性,它里面有它的对象配置属性,分别是:

  1. id,表示标记点id,类型为Number,必填项,marker点击事件回调会返回此id,建议为每个marker设置上Number类型id,保证更新marker时有更好的性能。
  2. latitude,纬度,类型Number,必填项,浮点数,范围 -90 ~ 90
  3. longitude,经度,类型Number,必填项,浮点数,范围 -180 ~ 180
  4. title,标注点名,类型String,不是必填,点击时显示,callout存在时将被忽略
  5. iconPath,显示的图标,类型String,必填项,项目目录下的图片路径
  6. rotate,旋转角度,类型Number,不是必填,顺时针旋转的角度,范围 0 ~ 360,默认为 0
  7. alpha,标注的透明度,类型Number,不是必填,默认1,无透明,范围 0 ~ 1
  8. width,标注图标宽度,类型Number,不是必填,默认为图片实际宽度
  9. height,标注图标高度,类型Number,不是必填,默认为图片实际高度
  10. callout,自定义标记点上方的气泡窗口,类型Object,不是必填 - 可识别换行符
  11. label,为标记点旁边增加标签,类型Object,不是必填 - 可识别换行符
  12. anchor,经纬度在标注图标的锚点,默认底边中点,不是必填,{x, y},x表示横向(0-1),y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点

marker 上的气泡 callout(Object类型)
marker数组 上属性 callout 对象使用属性:

  1. content,文本,String
  2. color,文本颜色,String
  3. fontSize,文字大小,Number
  4. borderRadius,callout边框圆角,Number
  5. bgColor,背景色,String
  6. padding,文本边缘留白,Number
  7. display,‘BYCLICK’:点击显示; ‘ALWAYS’:常显,String
  8. textAlign,文本对齐方式。有效值: left, right, center,String

marker 上的标签 label(Object类型)

  1. content,文本,String
  2. color,文本颜色,String
  3. fontSize,文字大小,Number
  4. x,label的坐标,原点是 marker 对应的经纬度,Number
  5. y,label的坐标,原点是 marker 对应的经纬度,Number
  6. borderWidth,边框宽度,Number
  7. borderColor,边框颜色,String
  8. borderRadius,边框圆角,Number
  9. bgColor,背景色,String
  10. padding,文本边缘留白,Number
  11. textAlign,文本对齐方式。有效值: left, right, center,String

polyline

polyline表示指定一系列坐标点,从数组第一项连线至最后一项

  • points,经纬度数组,类型为Array,必填,如:[{latitude: 0, longitude: 0}]
  • color,线的颜色,类型为String,不必填,如:#0000AA
  • width,线的宽度,类型为Number,不必填
  • dottedLine,是否虚线,类型为Boolean,不必填,默认值false
  • arrowLine,带箭头的线,类型为Boolean,不必填,默认值为false
  • arrowIconPath,更换箭头图标,类型为String,不必填,在arrowLine为true时,默认带箭头的线时生效
  • borderColor,线的边框颜色,类型为String,不必填
  • borderWidth,线的厚度,类型为Number,不必填
    polygon
    polygon指定一系列坐标点,根据points坐标数据生成闭合多边形
  • points,经纬度数组,array,必填,如:[{latitude: 0, longitude: 0}]
  • strokeWidth,描边的宽度,Number,否
  • strokeColor 描边的颜色,String,否
  • fillColor,填充颜色,String,否
  • zIndex,设置多边形 Z 轴数值,Number,否

circles
circles在地图上显示圆

  • latitude,纬度,Number,必填,浮点数,范围 -90 ~ 90
  • longitude,经度,Number,必填,浮点数,范围-180 ~ 180
  • color,描边的颜色,String,不必填,如:#0000AA
  • fillColor,填充颜色,String,不必填,如:#0000AA
  • radius,半径,Number,必填
  • strokeWidth,描边的宽度,Number,不必填
    controls
    controls在地图上显示控件,控件不随着地图移动
  • id,控件id,Number,不必填,在控件点击事件回调会返回此id
  • position,控件在地图的位置,Object,必填,控件相对地图位置
  • iconPath,显示的图标,String,必填,项目目录下的图片路径,支持相对路径写法,以’/'开头则表示相对项目根目录;也支持临时路径
  • clickable,是否可点击,Boolean,不必填,默认不可点击
    position
  • left,距离地图的左边界多远,Number,不必填,默认为0
  • top,距离地图的上边界多远,Number,不必填,默认为0
  • width,控件宽度,Number,不必填,默认为图片宽度
  • height,控件高度,Number,不必填,默认为图片高度

注意在uniapp中地图组件的经纬度必填,如果不填,经纬度则默认值是北京的经纬度。

2.uniapp使用map组件

基本使用方法

使用uniapp开发中的map组件,基本使用方法:
代码如下(示例):



markers属性的使用,代码如下(示例):

markers: [{
	id: 1, // Number
	title: '1', // String-标注点名
	rotate: 180, // Number - 顺时针旋转的角度,范围 0 ~ 360,默认为 0
	alpha: 0.5, // 默认1,无透明,范围 0 ~ 1
	latitude: 39.899,
	longitude: 116.39742,
	width: 30,
	height: 30,
	// callout: {
	// 	display: "BYCLICK",
	// 	padding: 10,
	// 	borderRadius: 5,
	// 	content: '',
	// },
	// anchor: {},
	iconPath: '../../../static/location.png', // 显示的图标
}, {
	id: 2,
	title: '2', // String
	latitude: 39.90,
	longitude: 116.39,
	callout: {
		color: '#007AFF', // 文本颜色
		bgColor: '#563BFF', // 背景色
		display: "ALWAYS", // 'BYCLICK':点击显示; 'ALWAYS':常显
		fontSize: 15,
		textAlign: 'left', // 文本对齐方式。有效值: left, right, center
		padding: 10, // 文本边缘留白
		borderRadius: 5,
		content: '腾讯地图',
	},
	label: {
		content: 'Jeskson',
		color: '#000000',
		fontSize: 12,
		borderWidth: 12,
		borderColor: '#007AFF',
		borderRadius: 5,
		padding: 5,
		textAlign: 'center',
		bgColor: '#563BFF',
	},
	iconPath: '../../../static/location.png'
}]

预览效果如下:

你可能感兴趣的:(前端,html,npm,前端,node.js)