map-utils-zhy

示例

<script setup lang="ts">
	import { ref } from 'vue';
	import { MapContainer, MapSearch } from 'map-utils-zhy';
	/**定义数据 */
	const MapUtilsRef = ref();
	/**地图初始化完成 */
	const init = ({ map, MapUtils }: any) => {
		MapUtilsRef.value = MapUtils;
    //标记点
    MapUtilsRef.value.setMarker(112.297428, 37.90923);
    //设置中心点
    MapUtilsRef.value.setCenter(112.297428, 37.90923);
	};
</script>

<template>
	<div>
		<MapContainer @init="init" height="300px" width="400px"></MapContainer>
		<MapSearch :MapUtils="MapUtilsRef" v-if="MapUtilsRef"></MapSearch>
	</div>
</template>

属性

| 参数 | 类型 | 必填 | 默认值 | 说明 | | ------------- | -------------------------| --------- | -----------|----------------------- | | init | function(map, MapUtils) | - | - | 地图初始化回调 | | mapConfig | object | - | - | 地图配置对象 |

mapConfig 属性

| 参数 | 类型 | 必填 | 默认值 | 说明 | | -------------- | -------------------------| --------- | -----------|----------------------- | | loadConfig | object | - | - | 地图首次加载配置对象 | | containerConfig| object | - | - | 地图容器配置对象 |

loadConfig 属性

| 参数 | 类型 | 必填 | 默认值 | 说明 | | -------------- | -------------------------| --------- | -----------|----------------------- | | securityJsCode | string | - | - | 安全密钥 | | key | string | - | - | Web端开发者Key | | version | string | - | 2.0 | 高德JSAPI 的版本 | | plugins | string[] | - | - | 高德插件列表 |

containerConfig 属性

| 参数 | 类型 | 必填 | 默认值 | 说明 | | -------------- | -------------------------| --------- | -----------------------|----------------------- | | id | string | - | map-container | 设置地图容器id | | viewMode | string | - | 3D | 地图模式 | | zoom | number | - | 9 | 初始化地图级别 | | zooms | number[] | - | [2,20] | 级别范围 | | pitch | number[] | - | 10 | 俯仰角度,2D 地图下无效 | | center | number[] | - | [116.397428, 39.90923] | 地图中心点位置 | | zoomEnable | boolean | - | true | 地图缩放，默认值为true | | dragEnable | boolean | - | true | 地图拖拽，默认值为true |

MapUtils 用法

| 参数 | 类型 | 必填 | 默认值 | 说明 | | -------------- | -------------------------| --------- | -----------|----------------------- | | setCenter | function(lon,lat,opt) | - | - | 设置地图中心点 | | getCenter | function() | - | - | 获取地图中心点 | | setMarker | function(lon,lat,opt) | - | - | 设置标记点 | | setSingleClear | function(item) | - | - | 单个清理 | | setClearAllMap | function() | - | - | 清理所有 | | search | function(searchKey) | - | - | 关键字搜索 | | getSearchLnglat| function(name,adcode) | - | - | 选中的详细地址 有location| | getAddr | function(lon,lat) | - | - | 根据经纬度获取详细地址 | | setZoom | function(level) | - | - | 缩放级别 |