@model ApplySpecialShopEditViewModel
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html, #allmap
{
100%;
height: 100%;
overflow: hidden;
margin: 0;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=th5A4X7EqYSBpYV1QFboKQYv"></script>//ak为百度key，这个需要自己申请的哦
<script src="~/Scripts/2013.1.219/jquery-1.7.1.min.js" type="text/javascript"></script>
<title>经纬度选择</title>
</head>
<body class="formpage" style="background: #E3EFFF">
<table style=" 100%;">
<tr class="form-bd">
<td class="main-td">
<table>
<tr>
<td style=" 60px">地址：@*@Html.HiddenFor(u => u.CustomerName)*@</td>
<td align="left">@Html.TextBoxFor(p => p.ShopAddress, new { @class = "text", style = "338px" }) </td>
<td>
<input id="btnSelect" class="input_button_search" width="80px" type="button" value="查 询" /></td>
</tr>
<tr>
<td colspan="3" style="vertical-align: top; padding: 0px 10px 5px; background-color: #E3EFFF;">
<div id="baiduMap" style=" 600px; height: 400px; overflow: hidden; margin: 0">
</div>
</td>
</tr>
<tr>
<td style="float: left; 200px">经度：@Html.TextBoxFor(p => p.Longitude, new { @class = "text", style = "138px" }) </td>
<td style=" 150px">纬度：@Html.TextBoxFor(p => p.Latitude, new { @class = "text", style = "138px" }) </td>
<td style="padding: 0px 10px 5px; background-color: #E3EFFF;">
<input id="btnSave" class="input_button_save" width="80px" type="button" value="保 存" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
<script type="text/javascript">
$(function () {
function GetPoint(address) {
// 创建地址解析器实例
var myGeo = new BMap.Geocoder();
myGeo.getPoint(address, function (point) {
if (point) {
map.centerAndZoom(point, 16);
var marker = new BMap.Marker(point);
map.addOverlay(marker);
marker.enableDragging();
////// 添加信息窗口
//var opts = {
// 150, // 信息窗口宽度
// height: 70, // 信息窗口高度
// title: "<span style='color:blue;font-weight: bold;'>" + customerName + "</sapn>" // 信息窗口标题
//};
//var infoWindow = new BMap.InfoWindow("<span style='color:green;'>" +
// "地址：" + address + "<br></span>", opts); // 创建信息窗口对象
//map.openInfoWindow(infoWindow, point); //开启信息窗口
var p = marker.getPosition(); //获取marker的位置
$("#Latitude").val(p.lat);
$("#Longitude").val(p.lng);
marker.addEventListener("dragend", function (e) {
$("#Latitude").val(e.point.lat);
$("#Longitude").val(e.point.lng);
myGeo.getLocation(e.point, function(rs) {
var addComp = rs.addressComponents;
$("#ShopAddress").val(addComp.province+addComp.city+addComp.district+addComp.street+addComp.streetNumber);
});
});
}
}, "全国");
}
$("#btnSelect").click(function (e) {
var address = $("#ShopAddress").val();
map.clearOverlays();
GetPoint(address);
});
//百度地图API功能
var customerName = $("#CustomerName").val();
var address = $("#ShopAddress").val();
var map = new BMap.Map("baiduMap");
map.centerAndZoom(address); // 创建Map实例
map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
map.addControl(new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL })); //右上角，仅包含平移和缩放按钮
map.addControl(new BMap.NavigationControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT, type: BMAP_NAVIGATION_CONTROL_PAN })); //左下角，仅包含平移按钮
map.addControl(new BMap.NavigationControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM })); //右下角，仅包含缩放按钮
//将地址解析结果显示在地图上,并调整地图视野
GetPoint(address);
});
$("#btnSave").click(function() {
var Latitude=("#Latitude").val();
var Longitude=$("#Longitude").val();
});
</script>
</html>