百度地图API实现地图定位

最新推荐文章于 2025-09-05 11:22:47 发布

weixin_34088838

最新推荐文章于 2025-09-05 11:22:47 发布

阅读量80

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/s0611163/p/4184241.html

本文介绍如何使用百度地图API实现地图定位功能。通过JavaScript代码，用户可以手动输入经纬度坐标，地图将自动调整到指定位置并显示标记。此外，还实现了拖动标记实时更新经纬度的功能。

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>