要在网页中创建和初始化一个地图，通常需要经过以下几个步骤：获取API密钥（Access key 百度地图开放平台自行注册获取）、加载API脚本、编写HTML、编写JS代码。
下面代码自行测试
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度地图示例</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的API密钥"></script>
</head>
<body>
<div id="mapCon" style="width: 100%; height: 500px;"></div>
<script type="text/javascript">
var map = new BMap.Map('mapCon'); //创建地图实例
map.centerAndZoom(new BMap.Point(120.599847, 31.382564), 19); //设置中心点和地图级别
map.addControl(
new BMap.MapTypeControl({ mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP] })//添加地图类型控件
);
map.addOverlay(new BMap.Marker(new BMap.Point(120.599847, 31.382564))); //添加标注
map.enableScrollWheelZoom(true); //启用鼠标滚轮缩放功能
</script>
</body>
</html>vue
<template>
<div id="mapCon" style="width: 100%; height: 500px;"></div>
</template>
<script>
export default {
name: 'BaiduMap',
mounted() {
this.initMap();
},
methods: {
initMap() {
// 确保百度地图API脚本已经加载完成
this.loadBMapScript().then(() => {
// 创建地图实例
var map = new BMap.Map('mapCon');
// 设置中心点坐标和地图级别
map.centerAndZoom(new BMap.Point(120.599847, 31.382564), 19);
// 添加地图类型控件
map.addControl(
new BMap.MapTypeControl({ mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP] })
);
// 添加标注
map.addOverlay(new BMap.Marker(new BMap.Point(120.599847, 31.382564)));
// 启用鼠标滚轮缩放
map.enableScrollWheelZoom(true);
});
},
loadBMapScript() {
return new Promise((resolve, reject) => {
if (typeof BMap !== 'undefined') {
resolve();
return;
} //检查百度地图API是否已加载
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://api.map.baidu.com/api?v=3.0&ak=你的API密钥'; //创建<script>
script.onerror = reject; //处理脚本加载失败和成功
script.onload = resolve;
document.head.appendChild(script);
});
},
},
};
</script>
<style>
/* 你的样式 */
</style>