百度地图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>

View Code