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组件，基本使用方法：
代码如下（示例）：

<map :scale="scale" style="width: 100%; height: 100%;"
enable-3D="false" show-compass="false" enable-overlooking="false"
:enable-satellite="false" :enable-traffic="false" show-location="false"
:latitude="latitude" :longitude="longitude" :markers="covers">
</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'
}]

预览效果如下：