调用百度地图API完成基于LBS的地图查询服务

百度地图提供了完整的API访问方式,其中包括利用JS实现的网页版访问,此处做主要介绍

1)使用前请申请密钥(免费)
http://lbsyun.baidu.com/apiconsole/key?application=key

2)开始第一个例子:
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” />
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Hello, World</title>
<style type=”text/css”>
html {
height: 100%
}

body {
height: 100%;
margin: 0px;
padding: 0px
}

#container {
height: 100%
}
</style>
<script type=”text/javascript”
src=”http://api.map.baidu.com/api?v=2.0&ak=674d0688c6c2047335bdc9ac2ed149c9″>
</script>
</head>

<body>
<div id=”container”></div>
<script type=”text/javascript”>
var map = new BMap.Map(“container”); // 创建地图实例
var point = new BMap.Point(118.804041,32.05837); // 创建点坐标
map.centerAndZoom(point, 20); // 初始化地图,设置中心点坐标和地图级别
</script>
</body>
</html>
其中要想得到某个地址的坐标可以使用“坐标拾取工具”
http://api.map.baidu.com/lbsapi/getpoint/index.html

改变样式:
var myStyleJson=[
{
“featureType”: “road”,
“elementType”: “geometry.stroke”,
“stylers”: {
“color”: “#ff0000″
}
}];
//map.setMapStyle({styleJson: myStyleJson });
map.setMapStyle({style:’midnight’});

2)增加交互元素
map.enableScrollWheelZoom();

window.setTimeout(function(){
map.panTo(new BMap.Point(118.932673,32.115273));
}, 2000);

3)添加控件:
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.MapTypeControl());

全景模式:
map.addControl(new BMap.NavigationControl());
var stCtrl = new BMap.PanoramaControl();
stCtrl.setOffset(new BMap.Size(20, 20));
map.addControl(stCtrl);

调整位置:
var opts = {offset: new BMap.Size(150, 15)}
map.addControl(new BMap.MapTypeControl(opts));

调整外观:
var opts = {type: BMAP_NAVIGATION_CONTROL_ZOOM}
map.addControl(new BMap.NavigationControl(opts));

4)事件编程
缩放事件编程:
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” />
<meta http-equiv=”Content-Type” content=”text/html; charset=GB2312″ />
<title>Hello, World</title>
<style type=”text/css”>
html {
height: 100%
}

body {
height: 100%;
margin: 0px;
padding: 0px
}

#container {
height: 100%
}
</style>
<script type=”text/javascript”
src=”http://api.map.baidu.com/api?v=2.0&ak=674d0688c6c2047335bdc9ac2ed149c9″>
</script>
</head>

<body>
<div align=”center” style=”margin:auto;width:90%;height: 90%;”>
<div id=”container” style=”width:100%;height:100%;”></div>
<br>
<button onclick=”zoomOut()”>放大</button>
<button onclick=”zoomIn()”>缩小</button>
</div>

<script type=”text/javascript”>
var map = new BMap.Map(“container”); // 创建地图实例
var currentSize=15;
var point = new BMap.Point(118.804041,32.05837); // 创建点坐标
map.centerAndZoom(point, currentSize); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom();
var opts = {type: BMAP_NAVIGATION_CONTROL_SMALL}
map.addControl(new BMap.NavigationControl(opts));

//地图放大
function zoomOut()
{
currentSize = currentSize+1 > 30? currentSize:currentSize+1;
map.centerAndZoom(point,currentSize);
//alert(currentSize);
}
//地图缩小
function zoomIn()
{
currentSize = currentSize-1 < 0? currentSize:currentSize-1;
map.centerAndZoom(point,currentSize);
//alert(currentSize);
}

</script>
</body>
</html>
鼠标滑动编程:
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” />
<meta http-equiv=”Content-Type” content=”text/html; charset=GB2312″ />
<title>Hello, World</title>
<style type=”text/css”>
html {
height: 100%
}

body {
height: 100%;
margin: 0px;
padding: 0px
}

#container {
height: 100%
}
</style>
<script type=”text/javascript”
src=”http://api.map.baidu.com/api?v=2.0&ak=674d0688c6c2047335bdc9ac2ed149c9″>
</script>
</head>

<body>
<div align=”center” style=”margin:auto;width:90%;height: 90%;”>
<div id=”container” style=”width:100%;height:100%;” onmousewheel=”mScroll()”></div>
<div id=”wheelData” style=”width:100%;” ></div>
</div>

<script type=”text/javascript”>
var map = new BMap.Map(“container”); // 创建地图实例
var currentSize=15;
var point = new BMap.Point(118.804041,32.05837); // 创建点坐标
map.centerAndZoom(point, currentSize); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom();
var opts = {type: BMAP_NAVIGATION_CONTROL_SMALL}
map.addControl(new BMap.NavigationControl(opts));

function mScroll()
{
if(event.wheelDelta >0)
{
currentSize = currentSize+1 > 30? currentSize:currentSize+1;
map.centerAndZoom(point,currentSize);
document.getElementById(“wheelData”).innerHTML = “再大一点!!”;
}
else if(event.wheelDelta <0)
{
currentSize = currentSize-1 < 0? currentSize:currentSize-1;
map.centerAndZoom(point,currentSize);
document.getElementById(“wheelData”).innerHTML = “再小一点!!”;
}
}

</script>

</body>
</html>

5)自定义控件
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” />
<meta http-equiv=”Content-Type” content=”text/html; charset=GB2312″ />
<title>Hello, World</title>
<style type=”text/css”>
html {
height: 100%
}

body {
height: 100%;
margin: 0px;
padding: 0px
}

#container {
height: 100%
}
</style>
<script type=”text/javascript”
src=”http://api.map.baidu.com/api?v=2.0&ak=674d0688c6c2047335bdc9ac2ed149c9″>
</script>
</head>

<body>
<div id=”container”></div>
<script type=”text/javascript”>
var map = new BMap.Map(“container”); // 创建地图实例
var point = new BMap.Point(118.804041,32.05837); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom();

// 定义一个控件类,即function
function ZoomControl(){
// 设置默认停靠位置和偏移量
this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
this.defaultOffset = new BMap.Size(10, 10);
}
// 通过JavaScript的prototype属性继承于BMap.Control
ZoomControl.prototype = new BMap.Control();
// 自定义控件必须实现initialize方法,并且将控件的DOM元素返回

// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
ZoomControl.prototype.initialize = function(map){
// 创建一个DOM元素
var div = document.createElement(“div”);
// 添加文字说明
div.appendChild(document.createTextNode(“缩小一级”));
// 设置样式
div.style.cursor = “pointer”;
div.style.border = “1px solid gray”;
div.style.backgroundColor = “white”;
// 绑定事件,点击一次放大两级
div.onclick = function(e){
map.zoomTo(map.getZoom() -1);
}
// 添加DOM元素到地图中
map.getContainer().appendChild(div);
// 将DOM元素返回
return div;
}

// 创建控件实例
var myZoomCtrl = new ZoomControl();
// 添加到地图当中
map.addControl(myZoomCtrl);
</script>
</body>
</html>
6)覆盖物
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” />
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Hello, World</title>
<style type=”text/css”>
html {
height: 100%
}

body {
height: 100%;
margin: 0px;
padding: 0px
}

#container {
height: 100%
}
</style>
<script type=”text/javascript”
src=”http://api.map.baidu.com/api?v=2.0&ak=674d0688c6c2047335bdc9ac2ed149c9″>
</script>
</head>

<body>
<div id=”container”></div>
<script type=”text/javascript”>
var map = new BMap.Map(“container”); // 创建地图实例
var point = new BMap.Point(118.932673,32.115273); // 创建点坐标
map.centerAndZoom(point, 20); // 初始化地图,设置中心点坐标和地图级别
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker);

</script>
</body>
</html>
交互性标注:
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” />
<meta http-equiv=”Content-Type” content=”text/html; charset=GB2312″ />
<title>Hello, World</title>
<style type=”text/css”>
html {
height: 100%
}

body {
height: 100%;
margin: 0px;
padding: 0px
}

#container {
height: 100%
}
</style>
<script type=”text/javascript”
src=”http://api.map.baidu.com/api?v=2.0&ak=674d0688c6c2047335bdc9ac2ed149c9″>
</script>
</head>

<body>
<div id=”container”></div>
<script type=”text/javascript”>
var map = new BMap.Map(“container”); // 创建地图实例
var point = new BMap.Point(118.932673,32.115273); // 创建点坐标
map.centerAndZoom(point, 20); // 初始化地图,设置中心点坐标和地图级别
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker);

marker.addEventListener(“click”, function(){
var opts = {
width : 250, // 信息窗口宽度
height: 100, // 信息窗口高度
title : “同学们!” // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow(“我就在这儿!”, opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
});

</script>
</body>
</html>

更多学习内容:
http://lbsyun.baidu.com/index.php?title=jspopular

和演示:
http://developer.baidu.com/map/jsdemo.htm

发表评论

邮箱地址不会被公开。 必填项已用*标注