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
参考文档
- vue需要使用全球地图解决方案 mapbox的使用 - csdn
- mapbox 官方文档