vue+百度地图的基础使用。
首先，第一步申请key，保存好这个密钥。
链接：jspopular | 百度地图API SDK (baidu.com)
使用百度地图有两种方式：1.javaScript API 2.直接引用组件。
以2.0版本为例。
方法1：百度地图javaScript API
引入方式有两种。
方法1：index.html中引用
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
这里的密钥就是第一步中申请的密钥
在想要展示地图的组件中
vue2:
<template>
<div id="map"></div>
</template>
<script>
export default {
data() {
return {}
},
methods: {
initMap() {
const map = new BMap.Map('map')
const point = new BMap.Point(108.840053, 34.129522) // 此处坐标点可以根据实际情况传入
map.centerAndZoom(point, 14)//中心点和地图级别
},
},
mounted() {
this.initMap()
},
}
</script>
<style lang="scss" scoped>
#map {
width: 780px;
height: 520px;
}
</style>实际使用的时候，可以根据实际情况可以将该组件封装起来。
方法2：与方法1同理，不过不用在index.html中引用，而是创建一个js文件，然后在所需展示地图的组件中引用该js文件即可。
//创建公共的js文件
export function BM(ak) {
return new Promise(function (resolve, reject) {
window.onload = function () {
resolve(BMap)
}
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://api.map.baidu.com/api?v=2.0&ak="+ak;
script.onerror = reject;
document.head.appendChild(script);
})
}地图组件中引入该组件
import {BM} from '实际文件所在地址'
export default {
data() {
return {
ak:'申请的密钥'
}
},
mounted() {
this.$nextTick(function () {
const that = this
BM(that.ak).then((BMap) => {
})
})
},
}简单小结：这两种引入方法根据实际情况自行选择。在以前的开发中，不知道是什么原因，用第一种方法地图有点问题会展示不出来，只能在js中创建script标签然后初始化地图。此段代码比较垃圾但是确实能用。
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://api.map.baidu.com/api?v=2.0&ak="+申请的密钥;
const map = new BMap.Map('map')
const point = new BMap.Point(108.840053, 34.129522) // 此处坐标点可以根据实际情况传入
map.centerAndZoom(point, 14)//中心点和地图级别方法2：直接引用组件
参考链接：vue-baidu-map - npm (npmjs.com)
第一步：npm i --save vue-baidu-map
第二步：main.js中
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
ak: '申请的密钥'
})第三步：展示地图的组件
<template>
<baidu-map class="map"></baidu-map>
</template>
<style>
.map{
width:780px;
height:520px;
}
</style>注意点：以上两种方法，地图组件div一定要设置宽高！！否则地图会展示不出来文章来源：https://www.toymoban.com/news/detail-655897.html
补充点：坐标转换。如果发现标注的坐标点有点偏差，可以官网看看坐标的转换。文章来源地址https://www.toymoban.com/news/detail-655897.html
到了这里，关于vue项目中使用百度地图（一）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
