要在网页中创建和初始化一个地图，通常需要经过以下几个步骤：获取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>
 -- 列表+元组+字典篇)
)
