百度地图JavaScript API 学习之基本地图展示

最新推荐文章于 2023-04-25 16:49:55 发布

置顶 monkeyfly007

最新推荐文章于 2023-04-25 16:49:55 发布

阅读量381

点赞数 1

分类专栏：百度地图API 文章标签：百度地图JS API之地图展示

本文链接：https://blog.csdn.net/tel13259437538/article/details/79874186

版权

百度地图API 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

创建地图之地图展示

官方demo示例和讲解——直戳这里

官方其实讲的很详细的，如果还是不懂为什么要这么写，我建议边看代码，边参考官方的JavaScript API v2.0相关类的说明，这会对解读代码有很大的帮助。

基本步骤

编写HTML页面的基础代码
引入百度地图的API文件
初始化地图逻辑
开启鼠标滚轮缩放（通过修改Map类的配置来实现交互功能）

<!-- 1.编写HTML页面的基础代码 -->
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
    body,
    html,
    #allmap {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
        font-family: "微软雅黑";
    }
    </style>
    <!-- 2.引入百度地图API文件 -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=3ecea51f560650b1ed8a4b99808f52e8"></script>
    <title>地图展示</title>
</head>

<body>
    <div id="allmap"></div>
</body>

</html>
<!-- 3.初始化地图逻辑 -->
<!-- 逻辑：首先创建地图实例，之后用一个Point坐标点和缩放级别来初始化地图。 -->
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建地图实例
var point = new BMap.Point(116.331398, 39.897445); //创建点坐标（以指定的经度和纬度创建一个地理点坐标）
map.centerAndZoom(point, 12); // 初始化地图，设置中心点坐标和地图级别  

/* 4.开启鼠标滚轮缩放*/
// 地图的鼠标滚轮缩放默认是关闭的，需要配置开启。
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
</script>

<!-- 至此，我们完成了一个更加完整的地图展示的例子。 -->

效果图展示

这里写图片描述

涉及到的知识点

核心类 —— Map（点击查看）

Map类是地图API的核心类，用来实例化一个地图。

构造函数	描述
`Map(container: String 或 HTMLElement, opts: MapOptions[可选参数])`	在指定的容器内创建地图实例，之后需要调用`Map.centerAndZoom()`方法对地图进行初始化。`未进行初始化的地图将不能进行任何操作`。

看图说话：
这里写图片描述

核心类 —— MapOptions（点击查看）

此类表示Map构造函数的可选参数。它没有构造函数，但可通过对象字面量形式表示。

对象字面量的表示形式：

{key1:value1,key2:value2,key3:value3,...}

//根据MapOptions类中的属性，可以自定义核心Map类的构造函数中的第二个可选参数opts。
{minZoom:3,maxZoom:19,mapType:BMAP_NORMAL_MAP}

//实际使用：
var map = new BMap.Map("allmap",{minZoom:3,maxZoom:19,mapType:BMAP_NORMAL_MAP});

看图说话：
这里写图片描述

核心类 —— Point（点击查看）

此类表示一个地理坐标点。

构造函数	描述
`Point(lng: Number, lat: Number)`	以`指定的经度和纬度`创建一个地理点坐标

看图说话：

这里写图片描述

monkeyfly007

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
百度地图JavaScript API 学习之基本地图展示

创建地图之地图展示官方demo示例和讲解——直戳这里官方其实讲的很详细的，如果还是不懂为什么要这么写，我建议边看代码，边参考官方的JavaScript API v2.0相关类的说明，这会对解读代码有很大的帮助。基本步骤编写HTML页面的基础代码引入百度地图的API文件初始化地图逻辑开启鼠标滚轮缩放（通过修改Map类的配置来实现交互功能）&lt;!-- 1.编写...
复制链接

扫一扫