web app 开发:[url=http://developer.baidu.com/map/jsdemo.htm]demo[/url]
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="${ctx}/assets/img/logo.png">
<title>信息</title>
</head>
<body>
<input type="text" name="search_map" id="search_map" value="陕西西安" placeholder="西安">
<button type="button" onclick="codeAddress();">搜索</button>
经/纬度:
<input type="text" name="longitude" id="point_lng" placeholder="">
<input type="text" name="latitude" id="point_lat" placeholder="">
<button type="button" onclick="codeByll();">显示</button>
<div style="width:518px;height:300px" id="map"></div>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=3484f488a1ae1fbadaeeacf21ebd52aa"></script>
<script>
/**
*dom 加载完成后,加载 map。
*/
$(document).ready(function(){
codeAddress();//
})
/**
*根据地址名称,显示标注。百度 map 定位
*/
function codeAddress(){
var addr= $("#search_map").val();
var marker;
// 百度地图API功能
var map = new BMap.Map("map");
// 创建地址解析器实例
var myGeo = new BMap.Geocoder();
// 将地址解析结果显示在地图上,并调整地图视野
myGeo.getPoint(addr, function(point){
if (point) {
$("#point_lng").val(point.lng);//经度 x轴
$("#point_lat").val(point.lat);//纬度 y轴
// alert(JSON.stringify(point));
map.centerAndZoom(point, 16);
map.enableScrollWheelZoom(true);//让地图支持滚轮缩放。
marker=new BMap.Marker(point);
map.addOverlay(marker);//添加marker
marker.enableDragging(); //可拖拽
marker.addEventListener("dragend", function(e){
$("#point_lng").val(e.point.lng);//经度 x轴
$("#point_lat").val(e.point.lat);//纬度 y轴
});//给地图添加点击事件。dragend
}
}, addr);
}
/**
*依据 坐标点,显示标注。
*/
function codeByll(){
var lng= $("#point_lng").val();//经度 x轴
var lat= $("#point_lat").val();
// 百度地图API功能
var map = new BMap.Map("map");
var point=new BMap.Point(lng,lat);//创建地图坐标点对象。
map.centerAndZoom(point,16);
map.enableScrollWheelZoom(true);
marker=new BMap.Marker(point);
map.addOverlay(marker);
marker.enableDragging(); //可拖拽
marker.addEventListener("dragend", function(e){
$("#point_lng").val(e.point.lng);//经度 x轴
$("#point_lat").val(e.point.lat);//纬度 y轴
});//给地图添加点击事件。dragend,click
}
</script>
</body>
</html>