百度地图Web开发

目录Javascript API1. 申请百度开发者账号，获取服务密钥（ak）2. 在网页中开发3.在Vue项目中开发Javascript API百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，可在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。百度地图JavaScript API支持HTT

一只月月鸟呀

2179人浏览 · 2021-12-05 19:30:10

一只月月鸟呀 · 2021-12-05 19:30:10 发布

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>

效果如下：
百度地图demo

在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>