vue.js项目中配置mapbox可视化地图api

1. 本地创建vue.js项目

cmd或者terminal中运行下面的命令开出vue project manager，之后按照所需要配置创建vue.js项目

vue ui

2. 在mapbox官网上申请key

访问mapbox官网，登录或注册账号，之后会得到一个免费的access token key来调用api服务

3. 项目中安装mapbox

使用Intellij IDEA或其他IDE打开我们之前创建好的vue.js项目，之后在terminal中输入下面的命令在项目中配置mapbox module

npm install mapbox-gl

4. 代码测试使用

在项目中成功配置好mapbox之后，我们将在App.vue中进行代码测试

<template>
  <div id="app">
    <div style="height:500px;width:50%;text-align:left;">
      <div ref="mapbox" style="height:500px;width:100%;"></div>
      <pre id='info'></pre>
       <pre id='coordinates' class='coordinates'></pre>
    </div>
  </div>
</template>

<script>
  import mapboxgl from 'mapbox-gl'
  export default {
    data () {
      return {
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      // initialization
      init () {
        // access token from mapbox
        mapboxgl.accessToken = 'access token'
        var coordinates = document.getElementById('coordinates');
        // initialize map
        const map = new mapboxgl.Map({
          // refs tag for accessing the DOM element in the code
          container: this.$refs.mapbox,
          style: 'mapbox://styles/mapbox/streets-v9',
          center: [12.550343, 55.665957],
          zoom: 8,
        })

        // 使用定位模块
        map.addControl(new mapboxgl.GeolocateControl({
          positionOptions: {
            enableHighAccuracy: true
          },
          trackUserLocation: true,
          showUserLocation: true,
          zoom: 14,
        }))

        // create a draggable maker
        var marker = new mapboxgl.Marker({
          draggable: true
        }).setLngLat([12.550343, 55.665957])
        .addTo(map);

        // defend a method for dragging the marker
        function onDragEnd() {
          console.log("test11")
          var lngLat = marker.getLngLat();
          coordinates.style.display = 'block';
          coordinates.innerHTML = 'Longitude: ' + lngLat.lng + '<br />Latitude: ' + lngLat.lat;

        }

        // bind the onDragEnd method with the marker
        marker.on('dragend', onDragEnd);

        // click map to set the location of the marker
        // map onclick event
        map.on('click', function (e) {
          document.getElementById('info').innerHTML = JSON.stringify(e.point) + '<br />' + JSON.stringify(e.lngLat)
          marker.setLngLat([e.lngLat.lng,e.lngLat.lat]).addTo(map)
        })
        map.addControl(new mapboxgl.MapboxGeocoder({
          accessToken: mapboxgl.accessToken
        }));
      }
    }

  }
</script>

<style>
  @import "https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css";
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
  .coordinates {
    background: rgba(0,0,0,0.5);
    color: #fff;
    position: absolute;
    bottom: 10px;
    left: 10px;
    padding:5px 10px;
    margin: 0;
    font-size: 11px;
    line-height: 18px;
    border-radius: 3px;
    display: none;
  }
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }

  p {
    font-family: 'Open Sans';
    margin: 0;
    font-size: 13px;
  }

</style>

之后在terminal或cmd运行如下命令启动项目即可访问

npm run serve

参考文档

1. vue需要使用全球地图解决方案 mapbox的使用 - csdn
2. mapbox 官方文档