您的位置：首页

【百度地图】浅析如何使用百度地图

2016-12-19 20:09 183 查看

目录结构：

contents structure [+]

概述

百度地图JavaScript API语法

百度地图JavaScript API类参考

一个简单的地图Demo

总结

参考文章

概述

读者在使用百度地图API之前，需要申请一个密钥，读者可以点击这里阅读百度地图JavaScript API的详细教程。

百度地图JavaScript API语法

web开发的语法就是javaScript。

百度地图javaScript 类参考

点击我阅读百度地图JavaScript API 类参考。

一个简单的地图Demo

<!DOCTYPE html>
<html>
<head>
<title>demo</title>

<meta name="content-type" content="text/html; charset=UTF-8">
<!-- In order to better support the mobile terminal -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<!-- reference baidu map api js -->
<script src="http://api.map.baidu.com/api?v=2.0&ak=UfuZjklxjf6BmZvIIdW9c5hjDGvtO9bw"></script>

</head>
<body>
<!-- must set width and height -->
<div id="container" style="width:70%;height:400px"></div>
<script>
//create map
var map=new BMap.Map("container");

//initialize map
var point1=new BMap.Point(104.074091,30.665783);
map.centerAndZoom(point1,12);

//add marker on map
var point2=new BMap.Point(104.158603,30.642172);
var marker=new BMap.Marker(point2);
map.addOverlay(marker);

//addPanoramaConverageLayer on map
var pclyer=new BMap.PanoramaCoverageLayer();
map.addTileLayer(pclyer);

//add panoramaControl on map
var pnrm=new BMap.PanoramaControl();
map.addControl(pnrm);

//add overviewControl on map
var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});
map.addControl(overviewControl);
</script>
</body>
</html>

总结

自己的密钥可以在API控制台查看。

BMap是作为整JavaScript API的命名空间，所有的JavaScript API类都必需在前面加上“BMap.”，要引用javaScript API之外的类就需要用别的命名空间。

在头部添加

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

是为了能够更好地支持移动端。

JavaScript API中的类大部分都有监听事件，因此可以通过addEventListener()来监听:

map.addEventListener("click",function(e){
console.log(e.point.lng+","+e.point.lat);
});

addEventListener()中的函数参数可以有以下几种属性：工具类就是对API的补充和扩展，工具类自1.2版本搬移到API之外实现，详见MapLibrary。
e.point.lng

e.point.lat

e.pixel.x

e.pixel.y

e.bounds

e.size

也适用于JavaScript里的事件属性

用户数据图层多用于LBS云开发，详见LBS云。

如果一个构造函数或是函数的参数用方括号“[]”括起来的，就表示该参数为可选参数。

如果一个构造韩式或是函数的参数是另一个类，就应该通过构造函数声明对象来表示。

如果一个构造函数或是函数的参数是另一个类，但是该类没有构造函数，可以通过对象字面量的形势表示。那么参数的语法应该和JSON的语法一致的。比如：

<script>
/*
Panorama的构造函数：
Panorama(container:String|HTMLElement[, PanoramaOptions])
PanoramaOptionis的构造函数：
此类为Panorama类构造函数的可选参数，使用对象字面量形式表示，不可实例化。
*/
var acops={
anchor:BMAP_ANCHOR_TOP_RIGHT
}
var pos={
navigationControl:true,
albumsControl:true,
albumsControlOptions:acops
}
//create panorama
var panorama=new BMap.Panorama("container",pos);
//set position
panorama.setPosition(new BMap.Point(120.320032, 31.589666));
</script>

如果对于某些的类的构造情况不清楚，可以通过一段代码反映远端类的构造的大致情况，详见获取未知类的结构。

使用百度地图删除左下角的百度版权logo会涉及侵权，详见使用百度地图常见问题。

参考文章

http://lbsyun.baidu.com/index.php?title=jspopular

http://developer.baidu.com/map/reference/index.php?title=Class:%E6%80%BB%E7%B1%BB/%E6%A0%B8%E5%BF%83%E7%B1%BB

本文为博主原创文章，若需转载请注明出处。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航