<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>南昌教育电子地图：查询“我”的经纬度坐标</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=c5faf7158cfbf3513583da1dd7d5f7b4&v=1.1&services=true"></script>
<script type="text/javascript">
function MblogDotccMap(keyword) {
var map = new BMap.Map("NceduMap"); // 创建地图实例
var point = new BMap.Point(115.866071, 28.693708); // 创建点坐标，位置：南昌市教育局
map.centerAndZoom(point, 18); // 初始化地图，设置中心点坐标和地图级别
map.addControl(new BMap.NavigationControl()); //添加缩放控件
map.addControl(new BMap.ScaleControl()); //添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加缩略图控件
map.enableScrollWheelZoom(); // 启用滚轮放大缩小。
map.enableKeyboard(); // 启用键盘操作。
//显示鼠标单击位置经纬度坐标
map.addEventListener("click",
function(e) {
$("#txtPointX").html(e.point.lng);
$("#txtPointY").html(e.point.lat);
});
//搜索
var local = new BMap.LocalSearch(map, {
renderOptions: {
map: map,
panel: "results_info"
}
});
map.panBy(point);
local.search(keyword);
local.getResults()
local.setSearchCompleteCallback(function(searchResult) {
var poi = searchResult.getPoi(0);
$("#txtPointX").html(poi.point.lng);
$("#txtPointY").html(poi.point.lat);
});
}
</script>
</head>
<body onload="MblogDotccMap();" onkeydown="if(event.keyCode==13)MblogDotccMap(document.getElementById(\'keyword\').value)">
<div style="width: 600px; height: 450px; border: 1px solid gray; float: left" id="NceduMap">
</div>
<div style="margin-top: 10px; margin-left: 10px; float: left">
<div style="margin-top: 10px; margin-left: 10px;">
单击鼠标左键显示经纬度</div>
<div id="search" style="margin-top: 10px; margin-left: 10px;">
目标:
<input type="text" size="20" name="keyword" id="keyword" />
<input type="submit" value="查询" onclick="MblogDotccMap(document.getElementById(\'keyword\').value)" />
</div>
<div id="SearchInfo" style="margin-top: 10px; margin-left: 10px;">
经度：<span id="txtPointX"></span><br />
纬度：<span id="txtPointY"></span></div>
<div id="results_info" style="margin-top: 10px; margin-left: 10px;">
</div>
</div>
</body>
</html>
相关文章：