javascript 百度地图-百度地图网页开发

bendan520 javascript

2023-08-25 0 682 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

JavaScript API

百度地图JavaScript API是一套由JavaScript语言编写的应用程序套接字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>

效果如下：

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