陈鹏铭 93064e9f91 首次提交 пре 10 месеци
..
components 93064e9f91 首次提交 пре 10 месеци
static 93064e9f91 首次提交 пре 10 месеци
changelog.md 93064e9f91 首次提交 пре 10 месеци
license.md 93064e9f91 首次提交 пре 10 месеци
package.json 93064e9f91 首次提交 пре 10 месеци
readme.md 93064e9f91 首次提交 пре 10 месеци

readme.md

liu-easy-map 适用于uni-app项目的map地图组件

本组件目前兼容微信小程序、H5

本组件是超级简单好用map地图,支持标记点、画区域、标记点详情弹层、导航等(走过路过不要错过)

--- 扫码预览、关注我们 ---

扫码关注公众号,查看更多插件信息,预览插件效果!

注意事项

由于组件内使用getLocation官方api获取当前定位,上线前需在公众平台开通并在manifest.json中配置

因组件根本为内置map组件,组件包含多个属性均与官方文档差异说明一致,建议使用者先大概阅读官方文档

使用示例

<template>
	<view class="page-main">
		<liu-easy-map ref="liuEasyMap" :centerLat="'36.05709'" :centerLng="'103.82538'" :scale="14"
			:markerData="markerData" :polygons="polygons" @clickMarker="markerClick"></liu-easy-map>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				markerData: [{
					id: 1,
					name: '兰州市政府', //标记点展示名字
					address: '甘肃省兰州市城关区人民政府',
					latitude: '36.05989', //标记点纬度
					longitude: '103.83502', //标记点经度
					markerUrl: 'https://img0.baidu.com/it/u=550544800,2229099292&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', //标记点图标地址
					iconWidth: 32, //标记点图标宽度
					iconHeight: 32, //标记点图标高度
					calloutColor: '#ffffff', //气泡窗口 文本颜色
					calloutFontSize: 14, //气泡窗口 文本大小
					calloutBorderRadius: 6, //气泡窗口 边框圆角
					calloutPadding: 8, //气泡窗口 文本边缘留白
					calloutBgColor: '#0B6CFF', //气泡窗口 背景颜色
					calloutDisplay: 'ALWAYS', //气泡窗口 展示类型 默认常显 'ALWAYS' 常显 'BYCLICK' 点击显示
				}, {
					id: 2,
					name: '测试地址', //标记点展示名字
					address: '测试地址详细地址测试地址详细地址测试地址详细地址测试地址详细地址',
					latitude: "36.05064",
					longitude: "103.82538"
				}],
				//展示区域点位信息
				polygons: [{
					points: [{
						latitude: "36.06637",
						longitude: "103.82471"
					}, {
						latitude: "36.06255",
						longitude: "103.82321"
					}, {
						latitude: "36.06234",
						longitude: "103.81928"
					}, {
						latitude: "36.06036",
						longitude: "103.82175"
					}, {
						latitude: "36.05653",
						longitude: "103.82152"
					}, {
						latitude: "36.05953",
						longitude: "103.82476"
					}, {
						latitude: "36.05690",
						longitude: "103.82785"
					}, {
						latitude: "36.06023",
						longitude: "103.82747"
					}, {
						latitude: "36.06243",
						longitude: "103.83014"
					}, {
						latitude: "36.06245",
						longitude: "103.82616"
					}], //经纬度数组
					strokeWidth: 2, //描边的宽度
					strokeColor: "#FF000060", //描边的颜色
					fillColor: "#FF000090" //填充颜色
				}]
			}
		},
		methods: {
			//点击标记点
			markerClick(e) {
				console.log('点击标记点信息:', e)
			}
		}
	}
</script>

<style lang="scss">
	.page-main {
		width: 100%;
		height: 100vh;
	}
</style>

属性说明

名称 类型 默认值 描述
centerLat String 当前定位纬度 地图展示中心点纬度
centerLng String 当前定位经度 地图展示中心点经度
markerData Array [] 标记点数据
polygons Array [] 多边形数据
markerIconWidth Number 22 标记点图标宽度
markerIconHeight Number 32 标记点图标高度
markerIconUrl String '' 标记点图标路径
scale Number 16 缩放级别 取值范围为3-20
isShowCompass Boolean false 是否显示指南针
isEnableZoom Boolean true 是否支持缩放
isEnableScroll Boolean true 是否支持拖动
isEnableRotate Boolean false 是否支持旋转
@clickMarker Function 点击标记点回调事件
@clickMap Function 点击地图(微信小程序2.9支持)