百度地图的一些简单使用

最新推荐文章于 2022-05-04 09:21:14 发布

迷失的风景web

最新推荐文章于 2022-05-04 09:21:14 发布

阅读量840

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_44193048/article/details/105475643

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

百度地图（Baidu Map）是为用户提供包括智能路线规划、智能精准导航（驾车、步行、骑行）、实时路况、等出行相关服务的平台。
百度地图作为新一代人工智能地图，秉持”科技让出行更简单“的品牌使命，以"科技"为手段不断探索创新。伴随AI时代的到来，百度地图不仅实现了语音交互覆盖用户产品使用全流程，还上线了AR步导、AR导游等实用功能，且地点信息丰富，更加方便用户的出行。2019年9月，百度地图全新发布“百雀灵计划”，上线全球首个地图语音定制功能，让用户出行更具个性化。（转载）
现在我们的日常生活很多都离不开地图，例如美团，饿了么这些外卖软件和滴滴，曹操这些打车软件都是离不开地图和导航的，还有当代年轻人的出行也基本离不开地图。
下面来说说使用:
第一步：搜索百度地图并打开
第二步: 找到地图下方的地图开放平台
如下图：
在这里插入图片描述
第三步：找到开发文档点击然后点击JavaScriptapi找到开发指南根据它来进行使用（开发指南非常详细我就不多做介绍了）
下面是我做的一些简单的使用：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>Document</title>
    <style type="text/css">
      html {
        height: 100%;
      }
      body {
        height: 100%;
        margin: 0px;
        padding: 0px;
      }
      #container {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script
      type="text/javascript"
      src="http://api.map.baidu.com/api?v=2.0&ak=这里写你自己的密钥，我的就不透露了"
    ></script>
    <script>
      // 创建地图实例
      var map = new BMap.Map("container");
      // 创建点坐标并且初始化地图，设置中心点坐标和地图级别
      map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
      map.addControl(new BMap.NavigationControl());// 平移缩放控件
      map.addControl(new BMap.ScaleControl());// 比例尺
      map.addControl(new BMap.OverviewMapControl());// 缩略地图
      map.addControl(new BMap.MapTypeControl());// 地图类型
      map.setCurrentCity("北京");
      var mapStyle = { style: "midnight" };//夜间模式
      map.setMapStyle(mapStyle);
      map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放
      
    </script>
  </body>
</html>