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

xiaoxiao2021-02-28  25

创建地图之地图展示

官方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)以指定的经度和纬度创建一个地理点坐标

看图说话:

转载请注明原文地址: https://www.6miu.com/read-2650130.html

最新回复(0)