引入

npm install sun-map-editor

环境：Vue3

基础引入

<script>
	import SunMapEditor from 'sun-map-editor'
</script>

<template>
   <div class="map_container">
     <DataMapEditor />
   </div>
</template>

<style lang="scss" scoped>
  .map_container{
    position: absolute;
    top: 0;left: 0;
    width: 100%;
    height: 100%;
  }
</style>

组件参数说明

| 参数名称 | 参数说明 | 类型 | 默认值 | 是否必传 | | -------------- | ----------------------------------- | -------- | ------ | ----------- | | tk | 天地图密钥 | String | - | 是 | | mapKey | 地图容器键 | String | 影像图 | 否 | | mapType | 地图图层类型 矢量图|卫星图|影像图 | String | 影像图 | 否 | | location | 地图中心坐标：具体参数见下方示例 | Object | - | 否 建议传递 | | zoom | 地图初始化缩放比例 | number | 15 | 否 | | selectLocation | 是否开启地图选点 | Boolean | true | 否 | | searchControl | 是否显示地图搜索 | Boolean | true | 否 | | mapTypeControl | 是否显示地图图层控件 | Boolean | true | 否 | | @getLocation | 获取地图点击选点内容回调 | function | - | - |

location参数示例：

传递默认的坐标用于地图创建时显示的位置，以及下方坐标信息栏的信息内容

| 参数名称 | 参数释义 | | -------- | -------- | | lon | 经度坐标 | | lat | 纬度坐标 | | label | 坐标标题 |

更新日志

V1.0.0

1、地图内容渲染；

2、支持全国及区域目标搜索；

3、支持进行地图选点；

4、支持地图图层切换；