最近在开始看百度Map javascript版的API,看了一些文档，就小试了下，实现最简单的根据名字搜索，显示位置。
下面是js代码
<html>
<head>
<title>baidu_map_test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<style type="text/css">
#mapBox{width: 720px;height: 500px;overflow: hidden;margin-left:20px;margin-top:20px;border:solid 2px #ccc;}
.nav{margin-left:20px;margin-top:20px;}
</style>
<script type="text/javascript">
/*****************************************************************
*
*初始化地图
*
*****************************************************************/
function createMap() {
var map = new BMap.Map("mapBox");
if (arguments.length == 1) {
map.centerAndZoom(arguments[0]);
}
else if (arguments.length == 2) {
var point = new BMap.Point(arguments[0], arguments[1]);
map.centerAndZoom(point, 10);
}
window.map = map;
}
/*****************************************************************
*
*增加地图事件
*
*****************************************************************/
function addMapEvent() {
map.enableScrollWheelZoom();
}
/*****************************************************************
*
*增加控件
*
*****************************************************************/
function addMapControl() {
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.OverviewMapControl({ isOpen: true}));
map.addControl(new BMap.MapTypeControl({ offset: new BMap.Size(40, 10) }));
map.addControl(new BMap.ScaleControl({ offset: new BMap.Size(5, 35) }));
}
function initMap() {
createMap("南京市");
addMapEvent();
addMapControl();
}
$(function () {
initMap();
/*******************************************************************
*
*增加button的click事件完成搜索
*
********************************************************************/
$("#btn").click(function () {
var city = $("#city").val();
var ls = new BMap.LocalSearch(map,{renderOptions:{map: map}});
ls.search(city);
});
})
</script>
</head>
<body>
<span class="nav">输入地点:</span><input id="city" type="text" value="" maxlength="20" />
<input id="btn" type="button" value="查找"/><br /><br />
<div id="mapBox"></div>
</body>
</html>
示例图
微信扫一扫，订阅我的博客动态^_^
