Vue中使用mapbox 国外地图

官网链接 (https://mapbox.com)

1. 安装mapbox语言包

// npm install deck.gl --save
cnpm install --save mapbox-gl
// 安装语言包
cnpm install --save mapbox-gl @mapbox/mapbox-gl-language

2. 需要去mapbox官网注册账号，并新建一个token
   

3. vue组建中创建布局

<template>
  <div style="height:100%;width:100%;">
    <div ref="basicMapbox" :style="mapSize"></div>
  </div>
</template>

4. 创建地图的方法与调用

<script>
  import mapboxgl from "mapbox-gl";
  import MapboxLanguage from '@mapbox/mapbox-gl-language'
  export default {
    props: {
      mapWidth: {
        type: String
      },
      mapHeight: {
        type: String
      }
    },
    data() {
      return {};
    },
    mounted() {
      this.init();
    },
    methods: {
      // 初始化
      init() {
        var geojson = {
          'type': 'FeatureCollection',
          'features': [
            {
              'type': 'Feature',
              'properties': {
                'message': 'Foo',
                'iconSize': [45, 45]
              },
              'geometry': {
                'type': 'Point',
                'coordinates': [100.578857421875, 13.7275800704956]
              }
            },
            {
              'type': 'Feature',
              'properties': {
                'message': 'Bar',
                'iconSize': [45, 45]
              },
              'geometry': {
                'type': 'Point',
                'coordinates': [100.531146526337, 13.7513803194748]
              }
            },
            {
              'type': 'Feature',
              'properties': {
                'message': 'Baz',
                'iconSize': [45, 45]
              },
              'geometry': {
                'type': 'Point',
                'coordinates': [100.58442, 13.73302]
              }
            },
            {
              'type': 'Feature',
              'properties': {
                'message': 'Baz',
                'iconSize': [45, 45]
              },
              'geometry': {
                'type': 'Point',
                'coordinates': [100.537554323673, 13.7020628848103]
              }
            },
            {
              'type': 'Feature',
              'properties': {
                'message': 'Baz',
                'iconSize': [45, 45]
              },
              'geometry': {
                'type': 'Point',
                'coordinates': [100.540271, 13.7595798]
              }
            }
          ]
        };
        mapboxgl.accessToken =
          "pk.eyJ1IjoicWluZ3NvbmdkZXIiLCJhIjoiY2s4ODQza2Y3MDN2OTNlbzBmeDgxNTdjaiJ9.7gnHuUfpDlUgfE78emxnxg";
        // 英文标注转换为中文   
        mapboxgl.setRTLTextPlugin(
          "https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.0/mapbox-gl-rtl-text.js"
        );
        const map = new mapboxgl.Map({
          container: this.$refs.basicMapbox,
          style: "mapbox://styles/mapbox/streets-v9",
          center: geojson.features[0].geometry.coordinates,
          zoom: 11
        });
        geojson.features.map( (marker,index)=>{
          // create a DOM element for the marker
          var el = document.createElement('div');
          el.className = 'marker';
          console.log(el)
          el.style.backgroundImage =
            `url(https://dsimage.didatravel.com/new_web_iamges/map_images/${index+1}-${index+1}.png?x-oss-process=image/resize,w_45)`;
            console.log(el.style.backgroundImage, index)
          el.style.width = marker.properties.iconSize[0] + 'px';
          el.style.height = marker.properties.iconSize[1] + 'px';
          el.title = `素坤逸通罗一号莎丽尔酒店${index+1}`;
          el.addEventListener('click', function () {
            window.alert(marker.properties.message);
          });

          // add marker to map
          new mapboxgl.Marker(el)
            .setLngLat(marker.geometry.coordinates)
            .addTo(map);
        });
         // 设置语言
        var language = new MapboxLanguage({ defaultLanguage: "zh" });
        map.addControl(language);
        // 地图导航
        // var nav = new mapboxgl.NavigationControl();
        // map.addControl(nav, "top-left");//地图左侧的放大与缩小
        // 全图
        // map.addControl(new mapboxgl.FullscreenControl());//右侧点击按钮
        // 定位 //右侧点击按钮
        // map.addControl(
        //   new mapboxgl.GeolocateControl({
        //     positionOptions: {
        //       enableHighAccuracy: true
        //     },
        //     trackUserLocation: true
        //   })
        // );
        // console.log(map)
      }
    },
    computed: {
      mapSize() {
        let styleObj = {
          width: this.mapWidth,
          height: this.mapHeight
        };
        return styleObj;
      }
    }
  };
</script>
<style>
  @import url("https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css");

  .mapboxgl-map {
    height: 100%;
    width: 100%;
  }
</style>

5. 我这边需要设置多个marker标注点，各位大佬可以略作参考，注释的地方看个人需要，地图貌似都大同小异，好久都没更新了，忙完了继续加油了。