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: {// initializationinit () {// access token from mapboxmapboxgl.accessToken = 'access token'var coordinates = document.getElementById('coordinates');// initialize mapconst map = new mapboxgl.Map({// refs tag for accessing the DOM element in the codecontainer: 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 makervar marker = new mapboxgl.Marker({draggable: true}).setLngLat([12.550343, 55.665957]).addTo(map);// defend a method for dragging the markerfunction 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 markermarker.on('dragend', onDragEnd);// click map to set the location of the marker// map onclick eventmap.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 官方文档

vue.js项目中配置mapbox可视化地图api相关推荐

html调用腾讯地图定位当前位置,vue web项目中调用腾讯地图API获取当前位置的经纬度...
vue web项目中调用腾讯地图API获取当前位置的经纬度 vue web项目中调用腾讯地图API获取当前位置的经纬度在main.js 中添加一下代码 import axios from 'axio ...
多个html如何套用套一个头部,Vue.js项目中管理每个页面的头部标签的两种方法...
在 Vue SPA 应用中,如果想要修改 HTML 的头部标签,如页面的 title ,我们只能去修改 index.html 模板文件,但是这个是全局的修改,如何为每个页面都设置不一样的 title ...
Vue.JS项目中二级路由下刷新浏览器仍呈现当前路由的实现方案
1.需求介绍: 以下介绍一下实现起来没什么疑问的需求:设备列表为一个主页,点击设备列表中的编辑按钮,进入设备信息主页面,默认打开设备配置页,点击设备状态.设备日志.固件升级,会切换下方内容. 本人对以 ...
vue.js项目中，关于element-ui完整引入、按需引入的介绍
element-ui引入方式,简单说来有两种:完整引入.按需引入首先谈一下npm安装element-ui的方法: cmd到项目目录,然后执行cmd命令:npm i element-ui -S稍等片刻 ...
Vue.js项目中,当图片无法显示时则显示默认图片
Vue.js项目中,当图片无法显示时则显示默认图片使用onerror方法最近在学习Vue时,遇到了一个问题,就是从后台传过来的图片路径无效时,需要在页面显示默认图片本人试了3种方法,2种方法失败了 ...
在 Nuxt.js 和 Vue.js 项目中引入第三方字体或艺术字
一.需求分析在我们写前端页面的时候,大部分时候是不需要用到第三方字体的,但如果是面向C端的页面,比如宣传页,就有可能会引入第三方字体,主要还是看UI设计师咋想了,此时我们可以通过让UI将特殊字体切成 ...
Vue 3.0 中配置原生高德地图
直接引用高德地图 SDK 1.在根目录 public 文件夹下的 index.html 中加入 <script type="text/javascript" src=&quo ...
VUE.js项目中控制台报错： Uncaught (in promise) NavigationDuplicated解决方法
问题愿意:依赖包中vue-router出现问题(猜测为版本问题): 解决方法:在项目目录下运行 npm i vue-router@3.0 -S 这条指令就可以解决了.(更换版本) 或者在main.js ...
Vue.JS项目输入框中使用v-model导致number类型值自动转换成string问题的解决方案
老文章了,目前用el-input v-model.number就能解决很简单的操作,不知道当初在做什么,下文请直接忽略- Vue.JS项目中v-model导致输入框中number类型值自动转换成st ...