中地数码

# Markers and Popups

# Marker

Marker 组件主要是封装了 Mapbox GL Marker API (opens new window).

<template>
  <mapgis-web-map
    :accessToken="mapboxAccessToken"
    :mapStyle.sync="mapStyle"
    :center="coordinates"
  >
    <mapgis-marker :coordinates="coordinates" color="blue" />
  </mapgis-web-map>
</template>

<script>
export default {
  data() {
    return {
      mapStyle: "mapbox://styles/mapbox/basic-v10",
      coordinates: [-111.549668, 39.014]
    };
  }
};
</script>

# 属性

  • color {String} 设置默认的颜色 (当使用marker slot 时不生效)
  • coordinates {Array} GeoJSON 格式的 coordinates 部分, 用于标注位置
  • offset {Object, Array} 相对显示位置的偏移

完整的参数请看 API

# 插槽

Marker 组件有 2 中插槽： marker 插槽和用于 Marker 上 popup 的 默认 插槽

# The marker slot

marker 插槽 marker 可以自定义 marker 的内部 html 样式. 请参考 IconFont (opens new window) 替代默认的 icon 图形:

<template>
  <mapgis-web-map
    :accessToken="mapboxAccessToken"
    :mapStyle.sync="mapStyle"
    :center="coordinates"
  >
    <mapgis-marker :coordinates="coordinates">
      <iconfont slot="marker">mdi-map-marker</iconfont>
    </mapgis-marker>
  </mapgis-web-map>
</template>

<script>
export default {
  data() {
    return {
      mapStyle: "mapbox://styles/mapbox/basic-v10",
      coordinates: [-111.549668, 39.014]
    };
  }
};
</script>

<template>
  <div class="iconfont-wrapper">
    <svg v-if="iconId" class="icon" aria-hidden="true" @click="click()">
      <use :xlink:href="iconId" />
    </svg>
    <div class="iconfont-text" v-if="name">{{ name }}</div>
    <div class="iconfont-text-none" v-else />
  </div>
</template>

<script>
import "./iconfont.js";

export default {
  name: "iconfont",
  props: {
    type: {
      type: String,
      default: ""
    },
    name: String
  },
  computed: {
    iconId() {
      return this.type ? `#${this.type}` : "";
    }
  },
  methods: {
    click() {
      this.$emit("click");
    }
  }
};
</script>
<style lang="scss">
.iconfont-wrapper {
  display: inline;

  .icon {
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.25em;
    line-height: 16px;
    fill: currentColor;
    overflow: hidden;
  }

  .iconfont-text {
    display: inline;
    margin-left: 12px;
    // line-height: 12px;
    font-size: 14px;
  }

  .iconfont-text-none {
    display: none;
    margin-left: 12px;
    // line-height: 12px;
    font-size: 14px;
  }
}
</style>

# 默认插槽

默认的插槽允许定制 当点击一个 Marker 后弹出的 Popup 的样式。请看 Markder&Popups

Popup 组件是对Mapbox GL Popup API (opens new window)的封装. 你可以直接 HTML 或者 Vue 组件设置 popup 的内部的样式.

如下所示 Element-Card (opens new window) 作为内容:

<template>
  <mapgis-web-map
    :accessToken="mapboxAccessToken"
    :mapStyle.sync="mapStyle"
    :center="coordinates"
  >
    <mapgis-popup :coordinates="coordinates" anchor="top">
      <el-card class="box-card"> <div>Hello, I'm popup!</div> </el-card>
    </mapgis-popup>
  </mapgis-web-map>
</template>

<script>
export default {
  data() {
    return {
      mapStyle: "mapbox://styles/mapbox/basic-v10",
      coordinates: [-111.549668, 39.014]
    };
  }
};
</script>

如果你设置 onlyText 属性为 true, 内容被统一当做文本处理. 一般用于从一个不信任的数据源获取对应的显示 html 内容，防止注入。

通常 Popup 被添加到地图上是默认隐藏的，如果你想加载的时候立即展示，你需要设置showed 属性为 true。

# 属性

  • showed {Boolean} 如果是 true, 在组件创建后会立即显示。

  • closeButton {Boolean} 如果 true, 右上角出现关闭按钮。

  • closeOnClick {Boolean} 如果 true, 当点击地图的时候，该 popup 会消失。

  • coordinates {Array} GeoJSON 格式的 coordinates 参数.如果 popup 用于 markder 内部忽略该参数，使用 marker 的位置。

  • anchor {string} 指定了 popup 出现的位置是在设置的那个方位。

完整的参数列表请看 API

# MarkersPopups

Popup 通常使用内部的地图注记 Marker. 你可以将 Popup 组件作为子组件内嵌在 Marker 组件中。

<template>
  <mapgis-web-map
    :accessToken="mapboxAccessToken"
    :mapStyle.sync="mapStyle"
    :center="coordinates"
  >
    <mapgis-marker :coordinates="coordinates">
      <mapgis-popup>
        <el-card>
          <div>Hello, I'm popup!</div>
        </el-card>
      </mapgis-popup>
    </mapgis-marker>
  </mapgis-web-map>
</template>

<script>
export default {
  data() {
    return {
      mapStyle: "mapbox://styles/mapbox/basic-v10",
      coordinates: [-111.549668, 39.014]
    };
  }
};
</script>

在该场景下，Popup 会自动的挂载到 Marker 上。你可以使用togglePopup方法控制 popup 的可见与不可见。

在该场景下, Popup 的 coordinates属性会被忽略

← 绘制视图 →