简介
- 官方网址
http://lbsyun.baidu.com/index.php?title=jspopular
百度地图JavaScript API 是一套由JavaScript语言编写的应用程序接口，是百度目前 为止功能最齐全的有关地图的网站。他能够帮助您在网站中构建功能丰富、交互性强的 地图应用，包含了构建地图基本功能的各种接口，提供了诸如本地搜索、路线规划等数据服务。
该套API免费对外开放，自V1.5版本起，需要先申请密钥（AK）才可以使用，接口（除发送短信功能外），无使用次数限制。
JavaScript API首家支持Https，如需要申请Https服务，需要认证企业信息，成为企业认证用户后，https将自动开通，同时获得更高的服务配额。
- 使用方法
第一种：直接加载
第二种：异步加载
优点：功能多，提供可用的插件多
缺点：因为是针对js，而不是vue，所以需要自己封装。
//src/api/config.js
export const ak = "你的密钥";
//src/api/load-bmap.js
import { ak } from "./config";
export default function loadBMap() {
return new Promise(function(resolve, reject) {
if (typeof BMap !== "undefined") {
// eslint-disable-next-line no-undef
resolve(BMap);
return true;
}
window.onBMapCallback = function() {
// eslint-disable-next-line no-undef
resolve(BMap);
};
let script = document.createElement("script");
script.type = "text/javascript";
script.src =
"http://api.map.baidu.com/api?v=3.0&ak=" +
ak +
"&callback=onBMapCallback";
script.onerror = reject;
document.head.appendChild(script);
});
}
//src/components/index.vue
<template>
<div class="map-area" :id="mapId"></div>
</template>
<script>ss
import loadBMap from './load-bmap.js'
export default {
data() {
return {
mapId: 'BMap-' + parseInt(Date.now() + Math.random()),
myMap: null
}
},
mounted() {
this.initMap()
},
methods: {
initMap() {
loadBMap()
.then(() => {
// 百度地图API功能
this.myMap = new BMap.Map(this.mapId) // 创建Map实例
this.myMap.centerAndZoom(new BMap.Point(116.404, 39.915), 11) // 初始化地图,设置中心点坐标和地图级别
//添加地图类型控件
this.myMap.addControl(
new BMap.MapTypeControl({
mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
})
)
this.myMap.setCurrentCity('北京') // 设置地图显示的城市 此项是必须设置的
this.myMap.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
})
.catch(err => {
console.log('地图加载失败')
})
}
}
}
</script>
<style scoped>
.map-area {
width: 100%;
height: 500px;
}
</style>
使用Vue Baidu Map
- 简介
这种是针对vue框架的一种地图，已经封装好。
- 官网地址
https://dafrok.github.io/vue-baidu-map/#/zh/index
- 使用方法
直接npm下载依赖就可以
优点：针对Vue的，一个封装好，直接粘贴复制就可以。
缺点：功能不全，只有百度地图JavaScript API地图的一部分内容，看项目需求，想我的项目用地图的比较多，这个网站满足不了，只能选择第一种。
使用vue-amap
- 简介
基于Vue 2.x与高德的地图组件，数据状态与地图状态单向绑定，开发者无需关心地图的具体操作【使用方法很简单，跟着官网走就可以了】
- 官方地址
https://elemefe.github.io/vue-amap/#/
优点：跟Vue Baidu Map的一样，是针对Vue框架的，已经封装好的，可以直接使用
缺点：跟Vue Baidu Map的缺点一样，功能少
JavaScript API 在 vue 中的具体使用方法
- 申请密钥
申请密钥（百度地图开放平台-->开发文档-->web开发-->JavaScript API-->立即使用-->创建应用）
应用类型：浏览器端
Referer白名单：填*即可
密钥申请成功后即可使用密钥（AK）
- 第一种方法:直接引入script标签
除了引入script标签还不够，要想在vue文件中使用bmap对象，还需要在webpack的配置文件中，设置外部扩展（external属性）
externals属性介绍：
防止将某些import的包（package)打包到bundle中，而是在运行时（runtime）再去从外部获取这些扩展依赖（external dependencies）。
- 在html 文件中引入百度地图API
//同步加载
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script>
- 设置外部扩展(externals属性)
//webpack.dev.conf.js
externals:{
'BMap':'BMap'
}
//或vue.config.js
module.exports = {
configureWebpack: {
externals: {
BMap: "BMap"
}
},
publicPath: "./"
};
- 添加dom结构
<div id="allmap"></div>
- 直接使用百度地图的api
import BMap from 'BMap'
export default{
name:'Index',
......
mounted() {
var map = new BMap.Map("container");
// 创建地图实例
var point = new BMap.Point(116.404, 39.915);
// 创建点坐标
map.centerAndZoom(point, 15);
// 初始化地图，设置中心点坐标和地图级别
}
}
- 第二种方法：通过模块化引入的方法
- 安装
npm install vue-baidu-map --save
- 使用
全局注册(一次性引入百度地图组件库的所有组件)
import Vue from 'vue';
import BaiduMap from 'vue-baidu-map';
Vue.use(BaiduMap,{
ak:'密钥'
})
<template>
<baidu-map class="bm-view"/>
</template>
<style>
.bm-view{
width:100%;
height:300px;
}
</style>
局部注册（按需引入组件）
<template>
<baidu-map class="bm-view" ak="密钥"></baidu-map>
</template>
<script>
import BaiduMap from 'vue-baidu-map/components/ map/Map.vue';
export default{
components:{
BaiduMap
}
}
</script>
<style>
.bm-view {
width: 100%;
height: 300px;
}
</style>
网友评论