当前位置 : 主页 > 编程语言 > 其它开发 >

如何在页面中添加地图

来源:互联网 收集:自由互联 发布时间:2022-07-22
在页面中添加地图在需求中也是非常常见的,在本节案例中,我会向大家展示如何在html页面中添加地图,并制作一个小demo。 如何在页面中添加地图 百度地图开放平台 在本节案例中,
 如何在页面中添加地图 在页面中添加地图在需求中也是非常常见的,在本节案例中,我会向大家展示如何在html页面中添加地图,并制作一个小demo。 如何在页面中添加地图

百度地图开放平台

在本节案例中,我会向大家展示如何在页面中添加地图。

前置准备

首先这里我选择百度地图API,首先你需要申请成为百度开发者点这里,接着你需要填写一些项目内容,最后再实名认证。

在通过上面的一顿操作后,这时候就需要申请密钥(ak).

Snipaste_2022-07-21_14-29-22

点击创建应用

Snipaste_2022-07-21_14-34-18

这时候,打开我的应用界面就会显示你刚才添加的应用。

Snipaste_2022-07-21_14-35-54

到这里,前置任务就完成了。

页面布局

这里,我们开始搭建展示地图的页面布局。

博主的项目提前写好了,这次想用地图替换之前这里的一张图片,所以页面布局这块也是早就做了的。

Snipaste_2022-07-21_14-39-35

  1. 首先设置一个map盒子
    <div id="map">
      <!-- <img src="map3.jpg" alt=""> -->  这是被替换掉的图片
    </div>
  1. map设置css样式
#map {
  width: 1226px;
  height: 800px;
  padding: 20px;
}

这里设置了宽高以及内边距。

  1. 在html页面的页首添加script引入百度地图api
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密钥">

上面说的密钥就是访问应用ak

代码实现

现在,我们需要写一些驱动地图的js代码

    <script type="text/javascript">
      var map = new BMapGL.Map("map");
      // 创建地图实例 
      var point = new BMapGL.Point(121.508506, 31.238794);
      // 创建点坐标 
      map.centerAndZoom(point, 15);
      // 初始化地图,设置中心点坐标和地图级别
      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

      var marker = new BMapGL.Marker(point);
      map.addOverlay(marker);
      var navi3DCtrl = new BMapGL.NavigationControl3D();  // 添加3D控件
      map.addControl(navi3DCtrl);
    </script>

现在,如果不出意外的话,地图已经渲染在页面上了。

上一篇:如何使用文档工具进行 API 管理?
下一篇:没有了
网友评论