1.创作背景

前几个月写了一篇关于map组件的使用方式 uniapp 地图组件（map）的使用总结，上个月我们公司将整个小程序进行了一次重构，地图这边也有很多修改的地方，看见小伙伴对于上一篇文章写的使用和有些功能有些不清楚。一直都想重新写一篇文章进行总结，因为工作原因（太懒了）一直没机会。正好趁这次1024活动于是决定将文章重新总结一下。

2.项目创建

已经创建项目的同学可以跳过

首先打开我们的hbuilderX（没有的小伙伴可以自行下载哈）创建项目

1.右键新建项目

2.新建map-demo 

 然后运行项目

因为是新项目，我们直接在pages/index/index.vue中进行后续的逻辑编写 

3.阅读文档

关于阅读文档也是我在写这篇文章的时候因为也有一段时间没有看文档了，不确定文档是否有变动，然后在读的时候想到之前那篇文章会有同学问各种一查文档就能知道的问题，我就寻思着将阅读文档写一段，就是教不会看文档的同学如何看这种文档，老鸟可以直接跳下一段的部分。

首先我们打开uniapp的文档map | uni-app官网

 1.平台差异性

首先我们看上面图片，第一个是我们的平台差异性，简单点说就是我们的兼容问题。同学们可以根据自己的项目跟上面进行对比，是否支持map

2.地图服务商说明

第二个我们的地图服务说明我们是使用的原生的，在我们小程序中就是使用的腾讯的地图，包括后续的经纬度坐标我们都需要参考腾讯的进行转换，否则会出现地图位置偏差较大

3.属性说明 

这边就是我们的详情数据，说明上面说的已经比较清楚就不一一介绍，同学们只需要关注后面一栏的平台差异说明就行了。注意兼容问题。

3-1.markers (标记点)

 这里markers就是我们渲染在地图一个个内容

3-1-1 callout

 callout就是我们显示的气泡。

4.circles(圆)

 这里大概就讲这些我们在项目中能用得上的，剩下的同学们可以自己研究。

4.基本配置

 代码

<template>
	<view >
		<map style="width: 100%;height: 100vh;" :layer-style='5'
		:circles="[{ latitude, longitude, color: '#E51860', strokeWidth: 1, radius: 2000, fillColor: '#E5186020' }]"
			:latitude="latitude" :longitude="longitude" :markers="marker" :scale="scale" @markertap="markertap"
			@callouttap='callouttap' @tap="tap">
		</map>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: 23.106574, //纬度
				longitude: 113.324587, //经度
				scale: 13, //缩放级别
				compass: true,
				marker: [{
						id: 0,
						latitude: 23.13065, //纬度
						longitude: 113.3274, //经度
						iconPath: '', //显示的图标        
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 30, //高
						//   title:'我在这里',//标注点名
						alpha: 0.5, //透明度
						callout: { //自定义标记点上方的气泡窗口 点击有效  
							content: '天宝大厦', //文本
							color: '#ffffff', //文字颜色
							fontSize: 14, //文本大小
							borderRadius: 15, //边框圆角
							borderWidth: '10',
							bgColor: '#e51860', //背景颜色
							display: 'ALWAYS', //常显
						},
					},
					{
						id: 1234597,
						latitude: 23.106574, //纬度
						longitude: 113.324587, //经度
						iconPath: '', //显示的图标        
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 30, //高
						//  title:'我在这里',//标注点名
						alpha: 0.5, //透明度
						//      label:{//为标记点旁边增加标签   //因背景颜色H5不支持
						//   color:'red',//文本颜色
						//      },
						callout: { //自定义标记点上方的气泡窗口 点击有效  
							content: '广州塔', //文本
							color: '#ffffff', //文字颜色
							fontSize: 14, //文本大小
							borderRadius: 15, //边框圆角
							borderWidth: '10',
							bgColor: '#e51860', //背景颜色
							display: 'ALWAYS', //常显
						},
					},
				],
			}
		},
		onLoad() {

		},
		methods: {
	// 点击标记点时触发
		markertap(e){
			console.log('点击标记点时触发',e)
		},
		// 点击标记点对应的气泡时触发，
		callouttap(e){
			console.log('点击标记点对应的气泡时触发',e)
		},
		// 点击地图时触发
		tap(e){
			console.log('点击地图时触发',e)
		}
		}
	}
</script>

<style>
	
</style>

关于获取位置这些可以访问我的上一篇文章哈

uniapp 地图组件（map）的使用总结_海海呐的博客-CSDN博客_uniapp地图组件

5.问题总结

5-1 在地图上显示圆

首先我们想在地图上显示圆的话，首先需要渲染的就是渲染地图的目标，简单点说就是渲染在地图的哪里（经纬度），我们上面基本配置的代码是使用的自身的经纬度为圆心。半径为2000，同学们可以根据自己的需求配合上面文档进行修改。

5-2 内容不显示问题

有的同学在写marker之后发现无法正常渲染，这里需要告诉大家一个问题，就是我们marker里面的经纬度必须和属性说明 里的longitude（中心经度） 和 latitude（中心纬度）不能相离太远，否则页面上我们的marker的内容不会显示出来。

5-3图标更换的问题

在上面的marker渲染我们没有使用到图标，所以我们的就是使用的默认的图标，在我们实际项目中我们的ui可能会给我们一些新的图片，我们这里就需要用到 iconPath

 5-4自身点位显示

 在我们实际开发中我们的产品可以想着将我们自身的点位也展示在页面上，怎么展示呢。

在我们的官方文档上有了一种方法，show-location  

这个方法可能已经满足了大部分用户的使用了， 

这里给大家展示另外一种方式

图一

图二 

       仔细看上图，我们的marker渲染的图标是使用的红色的圆形，第二张图的黑色就是我们用户选择的位置。这个是怎么实现的呢？

       实现也很简单，首先我们思考一下，我们图一的marker渲染的几个数据都是从后台返回的，我们首先拿到用户自身位置，或者用户选中的特定位置之后，我们请求后台拿到附近的位置信息。后台返回之后我们先讲后台返回的数据拼接到我们渲染的数组中，然后我们自己在写一个对象，这个对象就是我们的用户自身位置，或者是用户选择的位置，（获取用户自身经纬度可以看上面这篇文章uniapp 地图组件（map）的使用总结_海海呐的博客-CSDN博客_uniapp地图组件），然后我们自己组装一个充当用户自身位置的对象，push进我们的渲染数组中。这样就可以实现上面的效果。

后续发现其他问题也会继续在这上面更新

如果你还有什么问题你可以选择↓↓↓

微信公众号搜索 海海学前端 来了解更多