html 如何引入 百度地图

要在���页中创建和初始化一个地图，通常需要经过以下几个步骤：获取API密钥（Access key 百度地图开放平台自行注册获取）、加载API脚本、编写HTML、编写JS代码。

下面代码自行测试

html

 百度地图示例 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); //启用鼠标滚轮缩放功能 

vue

 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.onerror = reject; //处理脚本加载失败和成功 script.onload = resolve; document.head.appendChild(script); }); }, }, };