# 文档

# 参数/MineMap

# accessToken

• Type: string
  
• Required: true
  

地图token值

<mine-map :accessToken="'xxxxxxxxxxxxxxxxxx'"/>

# solution

• Type: string | number
  
• Required: true
  
• Default: true

地图solution

<mine-map :solution="'xxxx'"/>

# options

• Type: object
  
• Required: true
  

地图初始化参数，格式和minemap api兼容通用

<mine-map :options="{
   container: 'map',
   style: `http://minedata.cn/service/solu/style/id/xxxx`,
   center: [116.1866179, 39.992559],
   zoom: 9,
   minZoom: 3,
   maxZoom: 17,
}"/>

# 参数/MMSource

# id

• Type: string
  
• Required: true
  

source的id

<m-m-source :id="'test'"/>

# options

• Type: object
  
• Required: true
  

source的初始化参数，格式和minemap api兼容通用

<m-m-source :options="{
  type:'geojson',
  data: {}
}"/>

# mapInstance

• Type: minemap.Map
  
• Required: false
  

minemap.Map 的实例化对象，当该组件不作为MineMap组件的子组件，而是单独使用时，需要传入

<m-m-source :mapInstance="map"/>

# 参数/MMLayer

# id

• Type: string
  
• Required: true
  

layer的id

<m-m-layer :id="'test'"/>

# type

• Type: string
  
• Required: true
  

图层类型。 circle,line,fill,symbol,background,raster,extrusion,heatmap,hillshade中的一种。

<m-m-layer :type="'circle'"/>

# sourceLayer

• Type: string
  
• Required: false
  
• Default: ''

矢量数据时，需要传入

<m-m-layer :sourceLayer="'link'"/>

# layout

• Type: object
  
• Required: false
  
• Default: null

图层初始换参数中的 layout部分，格式和minemap api 兼容

<m-m-layer :layout="{
  visibility: 'visible'
}">

# paint

• Type: object
  
• Required: false
  
• Default: null

图层初始换参数中的paint部分，格式和minemap api 兼容

<m-m-layer :paint="{
  'circle-color': '#000'
}">

# filter

• Type: array
  
• Required: false
  
• Default: null

图层初始换参数中的filter部分，格式和minemap api 兼容

<m-m-layer :filter="['==','name','leo']">

# 参数/MMMarker

# lnglat

• Type: array
  
• Required: true
  

marker的坐标点

<m-m-marker :lnglat="[116.34,39.45]"></m-m-marker>

# offset

• Type: array
  
• Required: false
  

marker位置偏移
offset[0]: 相对于左上角向右偏移多少像素， offset[1]: 相对于左上角向下偏移多少像素

<m-m-marker :offset="[50,0]"></m-m-marker>

# 参数/MMPopup

# lnglat

• Type: array
  
• Required: false
  

popup的坐标点

<m-m-popup :lnglat="[116.34,39.45]"></m-m-popup>

# offset

• Type: array
  
• Required: false
  

popup位置偏移
offset[0]: 相对于锚点向右偏移多少像素， offset[1]: 相对于锚点向下偏移多少像素

<m-m-popup :offset="[50,0]"></m-m-popup>

# anchor

• Type: string
  
• Required: false
  

popup的偏移锚点
可选值'center' , 'top' , 'bottom' , 'left' , 'right' , 'top-left' , 'top-right' , 'bottom-left' , 'bottom-right'

<m-m-popup :anchor="'top'"></m-m-popup>

# closeButton

• Type: boolean
  
• Required: false
  
• Default true
  

popup是否显示关闭按钮

<m-m-popup :closeButton="false"></m-m-popup>

# closeOnClick

• Type: boolean
  
• Required: false
  
• Default true
  

点击地图是否可以关闭popup

<m-m-popup :closeOnClick="false"></m-m-popup>

# 事件/MineMap

# map-load

• Required: false
  
• Parameters: map实例

当地图加载完时调用

<mine-map @map-load="onLoad" />

# 方法/MineMap

# getMap

• return: map实例

<template>
  <div class="demo-container">
    <MineMap ref="map" v-bind="mapProps"/>
  </div>
</template>
<script >
  export default {
    name: 'app',
    mounted(){
      //可以通过该方法获取map实例
      const map = this.$refs.map.getMap()
    }
  }
</script>

# 方法/vue-minemap

# getMap

• parameters:
  map的container

  • type: string
  • required: true

• return: map实例

<template>
  <div class="demo-container">
    <MineMap v-bind="mapProps" style="flex:0 1 50%;position:relative">
      <button class="zoom-btn" @click="zoom1">zoom</button>
    </MineMap>
    <MineMap v-bind="mapProps1" style="flex: 0 1 50%;position:relative">
      <button class="zoom-btn" @click="zoom2">zoom</button>
    </MineMap>
  </div>
</template>
<script>
  //可以从组件库中引入getMap方法
  import {MineMap,getMap} from 'vue-minemap'
  export default {
    name: 'multimap',
    data(){
      return {
        mapProps: {
          accessToken: 'e919a6f32ce242f5aec22652d9dc1fdb',
          solution: '7185',
          options: {
            container: 'map',
            style: `//minedata.cn/service/solu/style/id/7185`,
            center: [116.1866179, 39.992559],
            zoom: 9,
            minZoom: 3,
            maxZoom: 17,
          }
        },
        mapProps1: {
          accessToken: 'e919a6f32ce242f5aec22652d9dc1fdb',
          solution: '4287',
          options: {
            container: 'map1',
            style: `//minedata.cn/service/solu/style/id/4287`,
            center: [116.1866179, 39.992559],
            zoom: 9,
            minZoom: 3,
            maxZoom: 17,
          }
        },
      }
    },
    mounted(){
      // mapProps中 options.container的值
      const map = getMap('map');
      const map1 = getMap('map1');
    },
  }
</script>