百度地图API学习(01):基本入门指南

目录

一、基本知识

1.1 使用移动端显示代码

1.2 必备工具

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

2.1 html主题元素的定义

2.2 地图对象脚本的定义

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

3.1 基本函数说明

3.1.1 BMap.Marker函数

3.1.2 BMap.Label函数

3.1.3 BMap:Icon函数

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

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

4 结果展示

4.1 结果界面

4.2 练习源码


 

一、基本知识

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>

 

发布了162 篇原创文章 · 获赞 53 · 访问量 5万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览