百度地图API实现地图定位
1、引用JS:
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=87be68605271c5e4cfe712787041be0a"></script>
2、HTML:
东经: <input name="longitude" onkeyup="dingwei()" value="@row["longitude"].ToString()" type="text"/> <span class="valid nullable" rule="number" msg="请填写数字"></span> 北纬: <input name="latitude" onkeyup="dingwei()" value="@row["latitude"].ToString()" type="text"/> <span class="valid nullable" rule="number" msg="请填写数字"></span>
3、JS代码:
<script type="text/javascript">
var map;
var level = 17;
var marker;
$(function () {
//地图定位
map = new BMap.Map("map");
var top_right_navigation = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL }); //右上角,仅包含平移和缩放按钮
map.addControl(top_right_navigation);
map.addEventListener("zoomend", function () {
level = map.getZoom();
});
var point = new BMap.Point(117.218, 31.861);
map.centerAndZoom(point, level);
marker = new BMap.Marker(point, { enableDragging: true });
marker.addEventListener("dragging", function (evt) {
$("input[name='longitude']").val(evt.point.lng)
$("input[name='latitude']").val(evt.point.lat)
});
map.addOverlay(marker);
dingwei();
});
//地图定位
function dingwei() {
if (SimpoValidate.valid()) { //验证输入
var inputlongitude = $("input[name='longitude']");
var inputlatitude = $("input[name='latitude']");
if ($.trim(inputlongitude.val()) != ""
&& $.trim(inputlatitude.val()) != "") {
var longitude = parseFloat(inputlongitude.val());
var latitude = parseFloat(inputlatitude.val());
var point = new BMap.Point(longitude, latitude);
map.centerAndZoom(point, level);
marker.setPosition(point);
}
}
}
</script>

浙公网安备 33010602011771号