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);      });    },  },};/* 你的样式 */

（）