uni-app使用map组件开发map地图，获取后台返回经纬度进行标点

unia-pp实现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，表示为多边形）

点击属性

@markertap-表示点击标记点时触发，e.detail={markerId}
@labeltap-表示点击label时触发，e.detail = {markerId}
@callouttap-表示点击标记点对应的气泡时触发，e.detail = {markerId}
@controltap-表示点击控件时触发，e.detail = {controlId}
@regionchange-表示视野发生变化时触发
@tap-表示点击地图时触发; App-nuve、微信小程序2.9支持返回经纬度
@updated-表示在地图渲染更新完成时触发
我们在写map组件时，组件的宽/高推荐写直接量，比如说是 750rpx，不要设置百分比值，在uni-app中只支持gcj02坐标。 介绍markers属性-类型为数组Array

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

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

content，文本，String
color，文本颜色，String
fontSize，文字大小，Number
borderRadius，callout边框圆角，Number
bgColor，背景色，String
padding，文本边缘留白，Number
display，‘BYCLICK’:点击显示; ‘ALWAYS’:常显，String
textAlign，文本对齐方式。有效值: left, right, center，String
marker 上的标签 label（Object类型）

content，文本，String
color，文本颜色，String
fontSize，文字大小，Number
x，label的坐标，原点是 marker 对应的经纬度，Number
y，label的坐标，原点是 marker 对应的经纬度，Number
borderWidth，边框宽度，Number
borderColor，边框颜色，String
borderRadius，边框圆角，Number
bgColor，背景色，String
padding，文本边缘留白，Number
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组件，基本使用方法：

代码示例

<template>
	<view>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers"
					 @markertap="markertap">
				</map>
			</view>
		</view>
	</view>
</template>


<script>
export default {
	data() {
		return {
			id: 0, // 使用 marker点击事件 需要填写id
			title: 'map',
			latitude: 39.909,
			longitude: 116.39742,
			iconPath: '',//标点的图标
			width: 0,//宽高必填  不填报错
			height: 0,
			covers: [],//后台返回的经纬度
		}
	},onLoad() {
		this.getList();
	},
	methods: {
		markertap(e) {
				//d框控制
				let that = this
				var id = e.markerId;

			}，
		getList() {
		
			//请求数据接口
			uni.request({
					url: "xxxx",//请求接口
					method: 'get',
					dataType: 'json',
					success: (res) => {
						console.log(r)
					//根据后端接口返回数据接收返回值
					if (r.data.code == 0) {
						that.List = r.data.data;
						//获取请求回来的数据
			that.covers = r.data;
			
		//关键部分，
			let listArr = []
			that.covers.map(item => {
				const obj = {
					id: item.id,
					width: 30,
					height: 30,
					//将经纬度进行重新赋值，不覆盖将默认latitude: 39.909,longitude: 116.39742,时地图移动到标点位置
					latitude: that.latitude = item.latitude,
					longitude: that.longitude = item.longitude,
					iconPath: '/static/biaodian.png'//给每一个坐标添加图片
				}
				listArr.push(obj)
								
			})
				that.covers = listArr
		  }
		}
	})
}
</script>