commie/im
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
cf1ad1c24b9ec778b1740887da0532f27241132b
im/uni_modules/ly-map/readme.md
T
cansnow cf1ad1c24b 14
2025-12-17 08:47:58 +08:00

21 KiB
Raw Blame History

地图组件 ly-map

1 坐标系说明

默认坐标系

天地图为WGS84坐标系，如果当前使用的是百度坐标（BD09）、火星坐标（GCJ02）
则需要转化后使用，推荐使用coord-transform工具转换

转换工具安装

// npm
npm install @isvend/coord-transform

// pnpm
pnpm add @isvend/coord-transform

坐标转换

import {
    transformWGS84ToBD09,
    transformBD09ToGCJ02,
    transformBD09ToWGS84,
    transformGCJ02ToWGS84,
    transformWGS84ToGCJ02,
} from "@isvend/coord-transform";

const lng = 116.404;
const lat = 39.915;

console.log("WGS84 to GCJ02", transformWGS84ToGCJ02(lng, lat));
console.log("GCJ02 to WGS84", transformGCJ02ToWGS84(lng, lat));

console.log("WGS84 to BD09", transformWGS84ToBD09(lng, lat));
console.log("BD09 to WGS84", transformBD09ToWGS84(lng, lat));

console.log("BD09 to GCJ02", transformBD09ToGCJ02(lng, lat));
console.log("GCJ02 to BD09", transformBD09ToGCJ02(lng, lat));

2 初始化

默认填充父布局


<ly-map ref="map" map-key="天地图key"/>

3 插件说明

属性
参数 类型 说明
mapKey String 天地图官网申请的key,必填否则地图不能正确出来
lonlat Array 地图初始位置,默认值[111.668097, 40.825417]
zoom Number 地图初始缩放等级,默认值16
showCenterIcon Boolean 是否在地图中间显示图标, 默认值 false不显示
centerIcon String 修改默认中间显示图标
showLocationIcon Boolean 是否在地图右下角显示定位图标, 默认值 false不显示
事件
事件 说明
onLoaded() 当地图加载完成时
onLocation() 点击右下角定位按钮时
onZoomEnd(lon:number, lat:number, zoom:number) 缩放完成时,并返回中心位置以及当前缩放等级
onStartDrag(lon:number, lat:number) 当地图开始拖拽时,并返回中心位置
onEndDrag(lon:number, lat:number) 当地图结束拖拽时,并返回中心位置
onListen(event:object) 覆盖物事件监听，需要覆盖物属性click为true可被触发，目前支持点击事件 event说明如下
覆盖物事件 Event 格式说明
key value 说明
type String 事件类型 支持 click
target Object 发生事件的覆盖物option，会原样返回覆盖物的配置格式Over 或 Marker
方法
方法 说明
setCenter(lon:number, lat:number,zoom:Number) 将地图的中心点变换到指定的地理坐标，如果同时指定了缩放等级，则同时缩放到指定的等级
参数说明:
lon:地图的中心点经度
lat:地图的中心点纬度
zoom:地图的比例尺级别
setType(type:Number) 设置地图显示类型
参数说明:
type:要设置的地图展示类型 0矢量地图 1卫星地图 其它显示矢量地图
setMarkers(Array<Marker>) 将标注添加到地图中，支持多个标注同时添加,标注Marker格式见下说明
setZoom(zoom:Number) 将视图缩放到指定的缩放等级，中心点坐标不变
参数说明:
zoom:地图的比例尺级别
resize() 重置地图展示区域尺寸
setOption(option:Object) 同时设置多个属性，支持中心点、缩放、标注、覆盖物
参数说明:
Object格式见下说明
addOvers(overs:Array<Over>) 添加覆盖物，同时设置多个（会在现有的基础上添加）
参数说明:
Over格式见下说明
setOvers(overs:Array<Over>) 设置覆盖物，同时设置多个（清除现有同类型的，重新添加）
参数说明:
Over格式见下说明
clearOvers(type:String) 清除指定的覆盖物类型，不指定则清除所有
参数说明:
type=circle 或 polyline 或 polygon 或 rect 或 label 或 infowindow
removeOvers(prop, value) 移除指定属性和值的覆盖物，匹配创建覆盖物时的prop和value
参数说明:
prop:覆盖物属性
value:覆盖物属性对应的值
setEnable(option:Object) 设置开启或者禁用的地图操作 支持拖拽、双击缩放、双指缩放、惯性拖拽
Option格式见下说明
标注 Marker 格式说明
key value 说明
icon String 标注显示图标的路径,支持网络图片
width Number 标注图标宽度，注意：不设置icon时无效
height Number 标注图标高度，注意：不设置icon时无效
lon Number 标注显示的位置经度
lat Number 标注显示的位置纬度
offsetX Number 标注图标相对左上角水平偏移 ，注意：不设置icon时无效
offsetY Number 标注图标相对左上角垂直偏移 ，注意：不设置icon时无效
覆盖物 Over格式说明
key value 说明
type String 覆盖物类型 支持 circle polyline polygon rect label infowindow polylineArrow cardinalCurve cardinalCurveArrow
color String 边线颜色
weight Number 边线的宽度，以像素为单位
opacity Number 边线的透明度（范围0-1 之间）
fillColor String 填充颜色。当参数为空时，折线覆盖物将没有填充效果
fillOpacity Number 填充的透明度（范围0-1 之间）。
lineStyle String 边线的样式（solid或dashed）注意：当polylineArrow cardinalCurve cardinalCurveArrow时，不生效（天地图缺陷）
rad Number type=circle时有效，圆的半径单位m
lon Number type=circle时圆心经纬度坐标；type=label文本标注的地理位置；type=infowindow弹窗的显示地理位置坐标
lat Number type=circle时圆心经纬度坐标；type=label文本标注的地理位置；type=infowindow弹窗的显示地理位置坐标
points Array<[lon,lat]> type=polygon或polyline时有效，坐标数组
leftTop Array<[lon,lat]> type=rect时有效， 矩形左上角坐标
rightBottom Array<[lon,lat]> type=rect时有效， 矩形右下角坐标
text String type=label时有效，显示文本内容；
offsetX Number type=label时有效，显示文本水平偏移；type=infowindow时有效，显示弹窗水平偏移
offsetY Number type=label时有效，显示文垂直平偏移；type=infowindow时有效，显示弹窗垂直偏移
minWidth Number type=infowindow时有效，弹出框的最小宽度
maxWidth Number type=infowindow时有效，弹出框的最大宽度
maxHeight Number type=infowindow时有效，设置后，如果内容超过弹出窗口的给定高度则产生一个可以滚动的容器
autoPan Boolean type=infowindow时有效，否开启信息窗口打开时地图自动移动（默认关闭）
closeButton Boolean type=infowindow时有效，控制弹出窗口中出现的关闭按钮
closeOnClick Boolean type=infowindow时有效，是否开启点击地图关闭信息窗口（默认关闭）
地图操作禁用配置 Option 格式说明
key value 说明
drag Boolean 地图拖拽 true允许 fale禁用，默认启用
doubleClickZoom Boolean 地图双击放大true允许 fale禁用，默认启用
pinchToZoom Boolean 双指操作缩放 true允许 fale禁用，默认启用
inertia Boolean 地图惯性拖拽 true允许 fale禁用，默认启用
多属性 Object 配置说明
const option = {
    // 中心点
    center: {lon: 116.391231, lat: 39.907334},
    // 多标注
    markers: [{
        icon: icon,
        width: 24,
        height: 27,
        lon: 116.389231,
        lat: 39.906034,
        offsetX: 12,
        offsetY: 27,
		click: true,  // 开启点击监听
    }],
    // 缩放
    zoom: 16,
    // 地图类型
    type: 1,
    // 覆盖物
    overs: [
        // 添加圆
        {
            type: "circle",
            rad: 100,
            lon: 111.667920,
            lat: 40.828050,
            color: "#0000FF",
            weight: 3,
            opacity: .5,
            fillColor: "#0000FF",
            fillOpacity: .2,
            lineStyle: "solid",
        },
        // 添加折线
        {
            type: "polyline",
            points: [[111.665750, 40.822830], [111.668190, 40.821800], [111.670310, 40.822790]],
            color: "#0000FF",
            weight: 3,
            opacity: .5,
            lineStyle: "solid",
        },
        // 添加多边形
        {
            type: "polygon",
            points: [[111.668160, 40.824850], [111.666640, 40.823950], [111.669570, 40.823990]],
            color: "#0000FF",
            weight: 3,
            opacity: .5,
            lineStyle: "solid",
        },
        // 添加矩形
        {
            type: "rect",
            leftTop: [111.665880, 40.826710],
            rightBottom: [111.670120, 40.825860],
            color: "#0000FF",
            weight: 3,
            opacity: .5,
            lineStyle: "solid",
        },
        // 添加文本
        {
            type: "label",
            lon: 111.668150,
            lat: 40.825330,
            text: "点我打开弹窗",
            offsetX: -60,
            offsetY: 10,
            click: true,
        },
    ],
}

注意：目前所有覆盖物都支持click属性，当click=true时，则开启点击监听，默认不开启

4 示例代码


<template>
	<view class="map-page-wrapper">
		<view class="map-box">
			<ly-map ref="map" :map-key="mapKey" :lonlat="lonlat" :zoom="zoom" :show-center-icon="showCenterIcon"
				:center-icon="centerIcon" :show-location-icon="showLocationIcon" :on-location="location"
				:on-loaded="loaded" :on-start-drag="startDrag" :on-zoom-end="zoomEnd" :on-end-drag="endDrag"
				:on-listen="listen" />
		</view>
		<view class="tool-box">
			<view class="tool" @tap="setType(0)">矢量地图</view>
			<view class="tool" @tap="setType(1)">卫星地图</view>
			<view class="tool" @tap="setMarkers()">设置标注</view>
			<view class="tool" @tap="clearMarkers()">清除标注</view>
			<view class="tool" @tap="setZoom(1)">缩放+</view>
			<view class="tool" @tap="setZoom(-1)">缩放-</view>
			<view class="tool" @tap="setCenter(116.391231,39.907334)">设置位置1</view>
			<view class="tool" @tap="setCenter(111.668097, 40.825417)">设置位置2</view>
			<view class="tool" @tap="setCenterIcon(true)">显示中心图标</view>
			<view class="tool" @tap="setCenterIcon(false)">隐藏中心图标</view>
			<view class="tool" @tap="setLocationIcon(true)">显示定位图标</view>
			<view class="tool" @tap="setLocationIcon(false)">隐藏定位图标</view>
			<view class="tool" @tap="setIcon()">修改中心图标</view>
			<view class="tool" @tap="setOption()">同时设置属性</view>
			<view class="tool" @tap="setOvers()">设置覆盖物</view>
			<view class="tool" @tap="addOvers()">添加覆盖物</view>
			<view class="tool" @tap="clearOvers('rect')">清除矩形覆盖物</view>
			<view class="tool" @tap="clearOvers()">清除所有覆盖物</view>
			<view class="tool" @tap="enable()">启用拖拽/缩放</view>
			<view class="tool" @tap="disable()">禁用拖拽/缩放</view>
			<view class="tool" @tap="openDialog()">打开弹窗</view>
			<view class="tool" @tap="removeOvers()">移除指定属性覆盖物</view>
		</view>
	</view>
</template>
<script>
	import icon1 from '@/static/icon1.png';

	export default {
		data() {
			return {
				// 天地图官网地址 https://oauth.tianditu.gov.cn/
				// key需要自行申请，以下使用测试key
				mapKey: "bcd1064810812bdc35d675d1dba3c23f",
				// 中心位置
				lonlat: [111.668097, 40.825417],
				// 缩放
				zoom: 16,
				// 地图展示类型
				type: 0,
				// 显示中心图标
				showCenterIcon: true,
				// 显示定位图标
				showLocationIcon: true,
				// 不设置使用默认图标
				centerIcon: "",
			};
		},
		onReady() {
			// 绑定组件
			this.map = this.$refs.map;
		},
		methods: {
			location() {
				console.log("点击定位按钮回调");
			},
			loaded() {
				console.log("地图创建完成");
			},
			zoomEnd(lon, lat) {
				console.log("地图缩放完成", lon, lat);
			},
			startDrag(lon, lat) {
				console.log("开始地图拖拽", lon, lat);
			},
			endDrag(lon, lat) {
				console.log("结束地图拖拽", lon, lat);
			},
			listen(e) {
				console.log("覆盖物点击事件", e);
				// 只有点击label可以显示弹窗
				if (e.target.type === "label") {
					this.map.setOvers([{
						type: "infowindow",
						lon: 111.668100,
						lat: 40.825420,
						content: "弹窗",
					}]);
				}
			},
			setZoom(zoom) {
				this.zoom += zoom;
				if (this.zoom <= 10) this.zoom = 10;
				if (this.zoom >= 20) this.zoom = 20;
				this.map.setZoom(this.zoom);
			},
			setType(type) {
				// type 0矢量地图 1卫星地图 其他矢量地图
				this.type = type;
				this.map.setType(this.type);
			},
			setCenter(lon, lat) {
				this.lonlat = [lon, lat];
				this.map.setCenter(lon, lat);
			},
			setMarkers() {
				this.map.setMarkers([{
						lon: 111.666020,
						lat: 40.82740
					},
					{
						lon: 111.667020,
						lat: 40.82740
					},
					{
						lon: 111.665020,
						lat: 40.82740
					},
					{
						lon: 111.669020,
						lat: 40.82740
					},
					{
						lon: 111.670020,
						lat: 40.82740
					},
				]);
			},
			removeOvers() {
				this.map.removeOvers("flag", "my-circle");
			},
			clearMarkers() {
				this.map.setMarkers([]);
			},
			setCenterIcon(show) {
				this.showCenterIcon = show;
			},
			setLocationIcon(show) {
				this.showLocationIcon = show;
			},
			setIcon() {
				// 默认图标和icon切换显示
				this.centerIcon = this.centerIcon ? "" : icon1;
			},
			setOption() {
				// 同时设置多个属性
				this.map.setOption({
					center: {
						lon: 116.391231,
						lat: 39.907334
					},
					markers: [{
							lon: 116.389231,
							lat: 39.906034
						},
						{
							lon: 116.390231,
							lat: 39.906034
						},
						{
							lon: 116.391231,
							lat: 39.906034
						},
						{
							lon: 116.392231,
							lat: 39.906034
						},
						{
							lon: 116.393231,
							lat: 39.906034
						},
					],
					zoom: 16,
					type: 1,
				});
			},
			setOvers() {
				const overs = [{
						type: "circle",
						rad: 100,
						lon: 111.667920,
						lat: 40.828050,
						color: "#0000FF",
						weight: 3,
						opacity: .5,
						fillColor: "#0000FF",
						fillOpacity: .2,
						lineStyle: "solid",
						click: true,
						flag: "my-circle",
					},
					{
						type: "polyline",
						points: [
							[111.665750, 40.822830],
							[111.668190, 40.821800],
							[111.670310, 40.822790]
						],
						color: "#0000FF",
						weight: 3,
						opacity: 1,
						lineStyle: "dashed",
					},
					{
						type: "polylineArrow",
						points: [
							[111.665750, 40.823030],
							[111.668190, 40.822000],
							[111.670310, 40.822990]
						],
						color: "#0000FF",
						weight: 3,
						opacity: 1,
						lineStyle: "dashed",
					},
					{
						type: "cardinalCurve",
						points: [
							[111.665750, 40.823430],
							[111.668190, 40.822400],
							[111.670310, 40.823390]
						],
						color: "#0000FF",
						weight: 3,
						opacity: 1,
						lineStyle: "dashed",
					},
					{
						type: "cardinalCurveArrow",
						points: [
							[111.665750, 40.823730],
							[111.668190, 40.822700],
							[111.670310, 40.823690]
						],
						color: "#0000FF",
						weight: 3,
						opacity: 1,
						lineStyle: "dashed",
					},
					{
						type: "polygon",
						points: [
							[111.668160, 40.824850],
							[111.666640, 40.823950],
							[111.669570, 40.823990]
						],
						color: "#0000FF",
						weight: 3,
						opacity: .5,
						lineStyle: "solid",
					},
					{
						type: "rect",
						leftTop: [111.665880, 40.826710],
						rightBottom: [111.670120, 40.825860],
						color: "#0000FF",
						weight: 3,
						opacity: .5,
						lineStyle: "solid",
					},
					{
						type: "label",
						lon: 111.668150,
						lat: 40.825330,
						text: "点我打开弹窗",
						offsetX: -60,
						offsetY: 10,
						click: true,
					},
				];
				this.map.setOvers(overs);
			},
			addOvers() {
				const overs = [{
					type: "circle",
					rad: 200,
					lon: 111.667920,
					lat: 40.828050,
					color: "#0000FF",
					weight: 3,
					opacity: .5,
					fillColor: "#0000FF",
					fillOpacity: .2,
					lineStyle: "solid",
				}, ];
				this.map.addOvers(overs);
			},
			clearOvers(type) {
				this.map.clearOvers(type);
			},
			enable() {
				this.map.setEnable({
					drag: true,
					doubleClickZoom: true,
					inertia: true,
					pinchToZoom: true,
				});
			},
			disable() {
				this.map.setEnable({
					drag: false,
					doubleClickZoom: false,
					inertia: false,
					pinchToZoom: false,
				});
			},
			openDialog() {
				const content =
					`
					<div style="display:flex; flex-direction: column;align-items: center; font-size:16px;z-index:999999999;">
						<img src='http://lbs.tianditu.gov.cn/images/logo.png' width='100' height='50'/>
						<div style='margin-top:8px;'>天地图组件</div>
						<div style='margin-top:8px;'>内蒙古灵越科技</div>
					</div>
				`;
				this.map.setOvers([{
					type: "infowindow",
					lon: 111.668100,
					lat: 40.825420,
					content: content,
				}]);
			}
		}
	};
</script>
<style lang="scss">
	page {
		height: 100%;
	}

	.map-page-wrapper {
		width: 100%;
		height: 100%;

		.map-box {
			width: 100%;
			height: 100%;
		}

		.tool-box {
			position: absolute;
			// 天地图默认z-index:400 需要大于400
			z-index: 999;
			top: 0;
			left: 0;
			width: 100%;
			border-radius: 8rpx;
			padding: 16rpx;
			display: flex;
			flex-wrap: wrap;
			gap: 16rpx;

			.tool {
				font-size: 28rpx;
				border-radius: 8rpx;
				padding: 12rpx 24rpx;
				background: #ffffff;
				box-shadow: 0 0 6rpx rgba(0, 0, 0, .15);
			}
		}
	}
</style>

5 QA

为什么自定义标注图标在APP上会失效？

标注图标支持网络图片以及base64格式图标
Reference in New Issue View Git Blame Copy Permalink