@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
{
width: 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="width: 100%;">
<tr class="form-bd">
<td class="main-td">
<table>
<tr>
<td style="width: 60px">地址：@*@Html.HiddenFor(u =>
u.CustomerName)*@</td>
<td
align="left">@Html.TextBoxFor(p => p.ShopAddress, new { @class = "text",
style = "width: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="width: 600px; height: 400px; overflow: hidden; margin:
0">
</div>
</td>
</tr>
<tr>
<td style="float: left;width:
200px">经度：@Html.TextBoxFor(p => p.Longitude, new { @class = "text", style
= "width:138px" }) </td>
<td style="width:
150px">纬度：@Html.TextBoxFor(p => p.Latitude, new { @class = "text", style =
"width: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 = {
// width: 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>