使用到的百度地图api接口需要自己申请成为开发者,点击百度地图开放平台进去注册。
在asp.net中:
前台页面代码:
<!doctype html>
<html>
<head runat="server">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
<title>浏览器定位</title>
<style type="text/css">
html, body
{
height: 100%;
margin: 0 auto;
font-size: 12px;
}
body
{
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI" , Roboto, "Helvetica Neue" , Arial, sans-serif, "Apple Color Emoji" , "Segoe UI Emoji" , "Segoe UI Symbol" , "Noto Color Emoji";
line-height: 1.5;
font-weight: 300;
color: #111213;
}
h4
{
font-family: inherit;
line-height: 1.8;
font-weight: 300;
color: inherit;
font-size: 1.1rem;
margin-top: 0;
margin-bottom: .5rem;
font-size: 12px;
}
.info hr
{
margin-right: 0;
margin-left: 0;
border-top-color: grey;
}
.info
{
padding: .75rem 1.25rem;
margin-bottom: 1rem;
border-radius: .25rem;
position: fixed;
top: 1rem;
background-color: white;
width: auto;
min-width:22rem;
border-width: 0;
box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
margin: 0 auto;
right: 1rem;
}
#container, #allmap
{
width: 100%;
height: 30%; //这里设置百度地图显示的大小。
top: 1rem;
text-align: center;
overflow: hidden;
font-family: "微软雅黑";
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak="自己在百度地图api申请到的密匙"></script>
</head>
<body>
<div id="allmap" runat="server">
<%-- 这里一定放form的外面,不然是不能启用的--%>
</div>
<form id="form1" runat="server">
<div>
<div class="info" runat="server">
<h4>经纬度信息:</h4>
<h4>
<input id="Text1" type="text" runat="server" readonly="readonly" style="min-width:21rem; text-align:center; font-size: 14px;
border-style: none; text-shadow: none; -webkit-appearance: none; box-shadow: none;outline:none; " />
<%-- 要设置input是不能填写内容的(readonly=""readonly),这个属性是与后台交互的,并且把边框去--%>
</h4>
</div>
</div>
</form>
</body>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.331398, 39.897445);
map.centerAndZoom(point, 20);
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function (r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
var project = r.point.lng + ',' + r.point.lat;
document.getElementById('Text1').value = project; //这里把值返回到页面上的input控件,返回值是value,其它的不一定得
return project;
}
else {
alert('failed' + this.getStatus());
}
}, { enableHighAccuracy: true })
</script>
</html>
后台代码:
用自己的方法获取 Text1.Value的值就可以了,这里一定要用Value