地图选点

一、组件位置

src/components/map/mapInterface

二、组件说明

地图节点组件mapInterface

<template>
<mapInterface @mapConfirm="mapConfirm" :mapWidth="width" :mapHeight="height"></mapInterface>
</template>
import mapInterface from "@/components/map/mapInterface.vue";
export default {
    name: "index",
    components: {
        mapInterface,
    },
}

Props

参数	说明	类型	默认值
mapHeight	地图的高度，单位为%	number	100
mapWidth	地图的宽度，单位为%	number	100
lng	地图初始化时的经度	number	0
lat	地图初始化时的纬度	number	0
customButton	是否自定义绘制按钮	boolean	false
showSpots	是否展示坐标点	boolean	false
rectangle	回显矩形坐标,如果没有传递lng与lat,则取第一个数组元素的坐标中心点为地图中心点	Array	[]
spots	回显点坐标集合	Array	[]
zoom	地图缩放级别	number	12

rectangle数组数据实例：

const rectangle = 
[
    { lat: 28.66938334288026, lng: 115.98643286164737 },
    { lat: 28.712785925328784, lng: 115.98643286164737 },
    { lat: 28.712785925328784, lng: 115.93543098528415 },
    { lat: 28.66938334288026, lng: 115.93543098528415 },
],
[
    { lat: 28.67645120036472, lng: 115.9885260690421 },
    { lat: 28.7078104999472, lng: 115.9885260690421 },
    { lat: 28.7078104999472, lng: 115.95044424687057 },
    { lat: 28.67645120036472, lng: 115.95044424687057 },
],

spots数组数据实例

const spots = [
    { lat: 28.67645120036472, lng: 115.9885260690421 },
    { lat: 28.7078104999472, lng: 115.9885260690421 },
];

TIP

lng和lat不传递时，地图初始化的经纬度将使用的是当前位置的经纬度 优先度：传入的初始化经纬度 > 传递的区域数组rectangle > 当前位置经纬度

方法

名称	参数	描述	返回类型
mapConfirm	无	获取当前圈选的地图节点集合	Object
resetBounds	无	地图移动时，实时获取当前地图东南角、西北角的经纬度、中心点经纬度和地图缩放等级	Object
selectItem	rectangle	设置了自定义按钮后调用，传递rectangle字符串，绘制矩形，使用ref调用地图组件的该方法	无