Javascript API
百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,可在网站中构建功能丰富、交互性强的地图应用,支持PC端和移动端基于浏览器的地图应用开发,且支持HTML5特性的地图开发。百度地图JavaScript API支持HTTP和HTTPS,免费对外开放,可直接使用。接口使用无次数限制。
申请百度开发者账号,获取服务密钥(ak)
-
在百度地图开放平台,选择导航“控制台”,在应用管理-我的应用中点击“创建应用”,应用名称随便填写你的应用名称,应用类型选择“浏览器端”,启用服务务必勾上“JavaScript api”,白名单填写“*”(测试阶段,后面填自己的项目域名)。如图:
-
返回控制台后即可看到自己应用的开发密钥
在网页中开发
在网页中直接将百度地图api引入到自己的HTML中即可,如官网的示例(有所更改):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css">
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px
}
#container {
height: 100%
}
</style>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=您的密钥">
//v3.0版本的引用方式:src="https://api.map.baidu.com/api?v=3.0&ak=您的密钥"
</script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
// 创建地图实例
var map = new BMap.Map("container")
// 创建点坐标
var point = new BMap.Point(116.404, 39.915)
// 标注
const marker = new BMap.Marker(point)
// 可缩放
map.enableScrollWheelZoom()
// 添加覆盖物
map.addOverlay(marker)
// 初始化地图,设置中心点坐标和地图级别
map.centerAndZoom(point, 15);
</script>
</body>
</html>
效果如下:
在Vue项目中开发
也可在index.html添加引用,此处提供一种异步加载百度地图api的方式:
- 在项目中新建一个js文件:loadBMap.js,添加如下代码:
/**
* 加载百度地图api
* @param {String} 百度地图开放平台密钥 ak
* @returns {Promise} resolve(BMap),reject(error)
*/
/* global BMap */
export default function loadBMap(ak) {
return new Promise(function(resolve, reject) {
if (typeof BMap !== 'undefined') {
resolve(BMap)
} else {
window.onBMapCallback = function() {
resolve(BMap)
}
const 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)
}
})
}
- 在需要使用到百度地图的组件中引入该js即可,使用方式如下:
<template>
<div id="container" style="width: 100%; height: 800px" />
</template>
<script>
// 此处loadBMap的路径改为你自己的存放路径
import loadBMap from "@/utils/loadBMap";
export default {
name: "Test",
data() {
return {};
},
mounted() {
this.renderBMap();
},
methods: {
renderBMap() {
loadBMap(`你的密钥`)
.then(() => {
const BMap = BMap || undefined;
const map = new BMap.Map("container");
const point = new BMap.Point(116.404, 39.915);
const BMAP_ANIMATION_BOUNCE = BMAP_ANIMATION_BOUNCE || undefined;
map.centerAndZoom(point, 15);
const marker = new BMap.Marker(point);
map.addOverlay(marker);
marker.setAnimation(BMAP_ANIMATION_BOUNCE);
})
.catch((err) => {
alert(err);
});
},
FUN() {},
},
};
</script>
不出意外,以上代码会得到一个在天安门跳动的点。