三分钟入手简单地图

最新推荐文章于 2022-07-20 07:00:00 发布

Acndy233

最新推荐文章于 2022-07-20 07:00:00 发布

阅读量233

点赞数

分类专栏：敲着玩儿文章标签： css html5 jsp 街景地图

本文链接：https://blog.csdn.net/zhangsann_6/article/details/120035595

版权

敲着玩儿专栏收录该内容

2 篇文章 0 订阅

订阅专栏

百度地图简单示例

1 调用官方API

打开百度地图开放平台

百度地图开放平台

在这里插入图片描述

2 创建一个应用

输入名字：uil（取一个好听的名字）

应用类型：浏览器端（这里为了方便）

白名单：*（允许谁访问）

3 查看自己创建的应用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kTFYCXFQ-1630465856897)(img/image-20210831172921457.png)]

4 进入API

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WCYPy6KM-1630465856899)(C:/Users/Administrator/AppData/Roaming/Typora/typora-user-images/image-20210831170211691.png)]

初学建议看官方文档

5 官方示例DEMO

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>地图展示</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <style>
    body,
    html,
    #container {
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: "微软雅黑";
    }
    .info {
        z-index: 999;
        width: auto;
        min-width: 22rem;
        padding: .75rem 1.25rem;
        margin-left: 1.25rem;
        position: fixed;
        top: 1rem;
        background-color: #fff;
        border-radius: .25rem;
        font-size: 14px;
        color: #666;
        box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
    }
    </style>
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>
</head>
<body>
    <div class = "info">最新版GL地图命名空间为BMapGL, 可按住鼠标右键控制地图旋转、修改倾斜角度。</div>
    <div id="container"></div>
</body>
</html>
<script>
var map = new BMapGL.Map('container'); // 创建Map实例
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
</script>

看下效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-idTG284C-1630465856905)(img/image-20210831173846159.png)]

6 手动搭建

6.1 适应移动端页面展示

添加meta标签，使页面更好的在平台上展示。

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

6.2 设置容器样式

设置容器样式大小，使地图充满整个浏览器窗口：

<style type="text/css">  
    html{height:100%}    
    body{height:100%;margin:0px;padding:0px}    
    #container{height:100%}    
</style>

6.3 引用百度地图插件

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密钥"></script>

6.4 创建地图容器元素

地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素。

<div id="container"></div>

6.5 创建地图实例

位于BMapGL命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。

var map = new BMapGL.Map("container");

注意：

1、在调用此构造函数时应确保容器元素已经添加到地图上；

2、命名空间 API GL版使用BMapGL作为命名空间，所有类均在该命名空间之下，比如：BMapGL.Map、BMapGL.Control、BMapGL.Overlay；

6.6 设置中心点坐标

这里我们使用BMapGL命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。（为天安门坐标）

var point = new BMapGL.Point(116.404, 39.915);

注意：

在使用百度地图JavaScript API服务时，需使用百度BD09坐标，如使用其他坐标（ WGS84、GCJ02）进行展示，需先将其他坐标转换为BD09，详细说明请参考坐标转换说明，请勿使用非官方的转换方法。

6.7 初始化设置级别

在创建地图实例后，我们需要对其进行初始化，BMapGL.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。地图必须经过初始化才可以执行其他操作

map.centerAndZoom(point, 15);

百度地图API一共分为19级，比例尺分别为：

[1:20米（简称20米，后同），50米，100米，200米，500米，1公里，2公里，5公里，10公里，20公里，25公里，50公里，100公里，200公里，500公里，1000公里，2000公里，5000公里，10000公里]

分别对应：

[19级，18级，17级，16级，15级，14级，13级，12级，11级，10级，9级，8级，7级，6级，5级，4级，3级，2级，1级]

6.8 开放鼠标滑轮

开启鼠标滚轮缩放

map.enableScrollWheelZoom(true);

至此，我们就快速创建了一张以天安门为中心的地图。
附上源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <!--    设置meta字符集和缩放-->
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <!--    标题-->
    <title>手动搭建第一个百度地图</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=1.0&&type=webgl&ak=GoOnKfPYhUnKlNpVGS7YMrgwzbOxOZYe">
    </script>
</head>
<body>

<div id="container">

</div>

</body>
</html>

<script>
    // 创建地图实例
    const map = new BMapGL.Map("container");
    // 创建点坐标
    const point = new BMapGL.Point(116.404, 39.915);
    // 初始化地图，设置中心点坐标和地图级别
    // 地图级别越大越清晰
    map.centerAndZoom(point, 12);
    // 开启鼠标滚轮缩放
    map.enableScrollWheelZoom(true);
    //平移到
    map.panTo(new BMap.Point(110.351,20.002));
    //设置中心坐标
    map.setCenter(110.351,20.002);


</script>