zoukankan      html  css  js  c++  java
  • 百度地图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
  • 相关阅读:
    解决.net core 3.1 json日期带T的问题
    C# 将指定得时间转换成秒
    WPF Button按钮的按下和抬起分别触发的事件
    WPF Image图片后台绑定图片,不对图片照成占用
    WPF Textbox漂亮的文本控件框封装
    WPF Slider实现可拖动的时间轴
    .net mvc 下显示PDF文件
    .net core 3.1使用命令自动生成MySQL表对应的实体类
    .net core A generic error occurred in GD 已解决
    WPF 模拟Button按钮事件触发
  • 原文地址:https://www.cnblogs.com/s0611163/p/4184241.html
Copyright © 2011-2022 走看看