@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>