百度地图API学习（01）：基本入门指南

最新推荐文章于 2024-08-20 17:29:55 发布

小薛引路

最新推荐文章于 2024-08-20 17:29:55 发布

阅读量1.1k

点赞数

分类专栏：百度地图API 文章标签：百度地图自定义图像标注和文本标注

本文链接：https://blog.csdn.net/m1m2m3mmm/article/details/86751302

版权

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

3 篇文章 1 订阅

订阅专栏

一、基本知识

1.1 使用移动端显示代码

为便于地图在移动端显示需添加如下代码：

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

1.2 必备工具

Sublime Text编辑器，具备强大的代码自动填充功能，可以极大的提升html代码的编写效率

2 最简单的百度地图对象创建过程

2.1 html主题元素的定义

<div id = "myMap"></div>

2.2 地图对象脚本的定义

脚本一般定义在<script type="text/javascript"></script>中

百度地图对象创建三部曲：

（1）定义地图定位中心点：BMap.Point(x,y);

（2）创建地图对象：var map = new BMap.Map(id)；其中id为主体对象中定义的表示地图的html5要素

（3）锁定中心点和地图等级：centerAndZoom(Point, int)；

3 定位点覆盖物及标记设置

3.1 基本函数说明

3.1.1 BMap.Marker函数

Marker(point: Point, opts: MarkerOptions)

创建一个图像标注实例。point参数指定了图像标注所在的地理位置

可选MarkerOptions

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

属性
属性	类型	描述
offset	Size	标注的位置偏移值
icon	Icon	标注所用的图标对象
enableMassClear	Boolean	是否在调用map.clearOverlays清除此覆盖物，默认为true
enableDragging	Boolean	是否启用拖拽，默认为false
enableClicking	Boolean	是否响应点击事件。默认为true
raiseOnDrag	Boolean	拖拽标注时，标注是否开启离开地图表面效果。默认为false
draggingCursor	String	拖拽标注时的鼠标指针样式。此属性值需遵循CSS的cursor属性规范
rotation	Number	旋转角度
shadow	Icon	阴影图标
title	String	鼠标移到marker上的显示内容

可以为标记指定图标、偏移量等效果，本例仅测试自定义图标效果。

3.1.2 BMap.Label函数

构造函数	描述
Label(content: String, opts: LabelOptions)	创建一个文本标注实例。point参数指定了文本标注所在的地理位置

LabelOptions

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

属性
属性	类型	描述
offset	Size	文本标注的位置偏移值
position	Point	文本标注的地理位置
enableMassClear	Boolean	是否在调用map.clearOverlays清除此覆盖物，默认为true

3.1.3 BMap:Icon函数

构造函数	描述
Icon(url: String, size: Size, opts: IconOptions)	以给定的图像地址和大小创建图标对象实例

Size

此类以像素表示一个矩形区域的大小。

构造函数
构造函数	描述
Size(width: Number, height: Number)	以指定的宽度和高度创建一个矩形区域大小对象

属性
属性	类型	描述
width	Number	水平方向的数值
height	Number	竖直方向的数值

IconOptions

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

属性
属性	类型	描述
anchor	Size	图标的定位锚点。此点用来决定图标与地理位置的关系，是相对于图标左上角的偏移值，默认等于图标宽度和高度的中间值
imageOffset	Size	图片相对于可视区域的偏移值
infoWindowAnchor	Size	信息窗口定位锚点。开启信息窗口时，信息窗口底部尖角相对于图标左上角的位置，默认等于图标的anchor
printImageUrl	String	用于打印的图片，此属性只适用于IE6，为了解决IE6在包含滤镜的情况下打印样式不正确的问题

3.2 不带标签标记实现步骤：

（1）定义标记对象

var centralMarker = new BMap.Marker(centralPt);

（2）添加覆盖物

map.addOverlay(centralMarker);

（3）定义标签

var centralLabel = new BMap.Label("人民英雄纪念碑",  centralPt);

（4）设置标签

centralMarker.setLabel(centralLabel);

3.3 自定义图标点位标注步骤

在3.2的第一步开始之前，首先为注记点设计图标，调动用API为BMap.Icon函数设计自定义图标；将BMap:Marker函数的第二个参数指定为自定义的图标即可。

var myIcon = new BMap.Icon("001.ico", new BMap.Size(32,32));
var myMarker = new BMap.Marker(qiuShi, {icon:myIcon});

4 结果展示

4.1 结果界面

4.2 练习源码

<!DOCTYPE html>
<html>
<head>
	<!-- 下面我们添加一个meta标签，以便使您的页面更好的在移动平台上展示 -->
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

	<style type="text/css">   
		body, html, #myMap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
		</style>  

	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你自己的密钥"></script>
	
	<title>我的第一个百度地图开发程序</title>
</head>
<body>
	<!-- 添加html元素作为容器显示地图 -->
	<div id = "myMap"></div>
</body>
</html>

<!-- 百度地图操作 -->
<script type="text/javascript">
	/*设置中心点坐标*/
	var centralPt = new BMap.Point(116.404053,39.910992);
	/*使用之前定义的html元素，创建地图对象*/
	var map = new BMap.Map("myMap");
	/*设定显示地图中心点及等级*/
	map.centerAndZoom(centralPt, 14);

	/*标记中心点*/
	var centralMarker = new BMap.Marker(centralPt);
	map.addOverlay(centralMarker);
	/*为标记添加文本标签*/
	/*Label(content: String, opts: LabelOptions) 创建一个文本标注实例,point参数指定了文本标注所在的地理位置 */
	var centralLabel = new BMap.Label("人民英雄纪念碑",  centralPt);/*以坐标点的方式添加标签*/
	centralMarker.setLabel(centralLabel);

	/*自定义地图标记*/
	var qiuShi = new BMap.Point(116.411401,39.93195);
	var myIcon = new BMap.Icon("001.ico", new BMap.Size(32,32));
	var myMarker = new BMap.Marker(qiuShi, {icon:myIcon});
	map.addOverlay(myMarker);	
	var myLabel = new BMap.Label("求是杂志社", {offset:new BMap.Size(-20,-30)});/*以坐标点的方式添加标签*/
	//var centralLabel = new BMap.Label("中心点", {position:centralPt});/*以坐标点的方式添加标签*/
	myMarker.setLabel(myLabel);	
</script>