使用vue-mapbox开发地图应用时Marker标记全部显示在页面底部如何解决

问题排查及解决方案 #

1. 修复Marker坐标绑定错误 #

你的代码中v-for遍历pins数组生成标记时，所有MglMarker组件的coordinates属性都错误绑定到了全局的locations计算属性，而非当前循环的单条坐标数据，导致所有标记坐标异常。
将MglMarker的坐标绑定改为当前循环项即可：

<MglMarker
  :coordinates="location"
  color="blue"
  v-for="(location, index) in pins"
  :key="index"
/>

如果不需要双向更新标记坐标，可以去掉.sync修饰符减少不必要的性能开销。

2. 引入mapbox-gl官方样式 #

绝大多数标记飘在地图外的问题都是因为没有引入mapbox-gl的基础样式文件，缺少定位相关的默认样式。在项目入口文件（如main.js）或者当前组件的script顶部引入样式：

import 'mapbox-gl/dist/mapbox-gl.css'

3. 可选校验：确认坐标顺序 #

Mapbox GL的坐标格式要求为[经度, 纬度]，如果你pins数组里的坐标是先填纬度后填经度，会导致标记定位到意料之外的位置，可自行核对坐标顺序。

修改后完整参考代码：

<template>
  <div class="home">
    <MglMap :accessToken="accessToken" :mapStyle="mapStyle" @load="onMapLoaded">
      <MglMarker
        :coordinates="location"
        color="blue"
        v-for="(location, index) in pins"
        :key="index"
      />
    </MglMap>
  </div>
</template>

<script>
import 'mapbox-gl/dist/mapbox-gl.css'
import Mapbox from "mapbox-gl";
import {
  MglMap,
  MglMarker
} from "vue-mapbox";

export default {
  name: "Home",
  components: { MglMap, MglMarker },
  data() {
    return {
      accessToken:"xxx",
      mapStyle: "mapbox://styles/mapbox/streets-v11",
      pins: [
        [20.341979525348204, 85.8345150468384],
        [25.581627613058714, 80.87795332144299],
        [25.199370930176993, 95.86881932189225],
      ],
    };
  },
  beforeMount() {
    this.$store.dispatch("set_user_location");
  },
  computed: {
    locations() {
      return this.$store.getters.getThisUserMarker;
    },
  },
  created() {
    this.mapbox = Mapbox;
  },
  methods: {
    async onMapLoaded(event) {
      this.map = event.map;
      const asyncActions = event.component.actions;
      await asyncActions.flyTo({
        center: this.locations,
        zoom: 4,
        speed: 1,
      });
    },
  },
};
</script>

内容的提问来源于stack exchange，提问作者Biswas Sampad