vue使用mapbox

一.官網申請key

二.安裝mapbox

npm install mapbox-gl

三.創建一個容器

四.添加一下代碼:

<script>
export default {
  name: "home",
  data() {
    return {
     
    };
  },
  methods:{
        init () {
        mapboxgl.accessToken = ' 你的key' // 申請的key
        var coordinates = document.getElementById('coordinates');
        // console.log(container,'xxxxx')
        // debugger
        const map = new mapboxgl.Map({
          container: this.$refs.basicMapbox,
          style: 'mapbox://styles/mapbox/streets-v9',
          center: [145.12031, -37.81844], // 設置地圖中心
          zoom: 13,  // 設置地圖比例
          // color: "#FFFFFF",
          // draggable: true
        })
        
        // 使用定位模塊
        map.addControl(new mapboxgl.GeolocateControl({
            positionOptions: {
                enableHighAccuracy: true
            },
            trackUserLocation: true,
            showUserLocation: true,
            zoom: 14,
        }))
        
        // 建立一個標記點
        var marker = new mapboxgl.Marker({
            draggable: true,
            color:'red',
            scale:1
        })
        function onDragEnd() {
            var lngLat = marker.getLngLat();
            coordinates.style.display = 'block';
            coordinates.innerHTML = 'Longitude: ' + lngLat.lng + '<br />Latitude: ' + lngLat.lat;
        }
        marker.on('dragend', onDragEnd);

        // 點擊獲取經緯度模塊&點擊標記點
        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
        }));
        
    }
  },
  mounted() {
    this.init()
  },
}
</script>