workAndBoring/map.html at master · sheldon9527/workAndBoring · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
            <title>
                百度地图选点--Bootstrap模态框(Modal)插件
            </title>
            <link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
                <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
                </script>
                <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js">
                </script>
                <script src="http://api.map.baidu.com/api?v=2.0&ak=2d12993ce41407db4050140fe342d9ba" type="text/javascript">
                </script>
            </link>
        </meta>
    </head>
    <body>
        <!--按钮触发模态框 -->
        <button class="btn btn-primary btn-lg" data-target="#myModal" data-toggle="modal" id="createMap">
            点击选择设置百度地图
        </button>
        <div class="modal-body" id="map_main_two" style="height:400px;">
            第一次显示
        </div>
        <input class="form-control" hiddened="hiddened" id="map" type="text" value="104.090188,30.636455"/>
        <!--模态框（Modal） -->
        <div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" id="myModal" role="dialog" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button aria-hidden="true" class="close" data-dismiss="modal" type="button">
                            ×
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            百度地图选点(鼠标滚动缩放地图,鼠标拖动移动地图)
                        </h4>
                    </div>
                    <div class="modal-body" id="map_main" style="height:400px;">
                        第二次在这里修改
                    </div>
                    <div class="modal-footer">
                        <input class="form-control" id="map_txt" readonly="" style="width:300px;float:left;" type="text" value=""/>
                        <button class="btn btn-primary" onclick="setMapValue()" type="button">
                            设置为此地址
                        </button>
                        <button class="btn btn-default" data-dismiss="modal" type="button">
                            关闭
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            var map = new BMap.Map("map_main_two");
                var myCity = new BMap.LocalCity();
                myCity.get(function(res){
                    map.centerAndZoom(res.center,res.level);
                    var old_map = $('#map').val();      //如果已设置过
                    if(old_map.length > '5'){            //打开的时候显示已设置的
                        $("#map_txt").val(old_map);
                        var oldMap = old_map.split(",");
                        var point = new BMap.Point(oldMap[0],oldMap[1]);
                        var marker = new BMap.Marker(point);        // 创建标注
                        map.clearOverlays();
                        map.addOverlay(marker);
                    }
                });
            $(function(){
                $("#createMap").click(function(){
                    setTimeout(function() {     //添加延时加载。解决问题
                        var map = new BMap.Map("map_main");
                        var myCity = new BMap.LocalCity();
                        myCity.get(function(res){
                            map.centerAndZoom(res.center,res.level);
                            var old_map = $('#map').val();      //如果已设置过
                            if(old_map.length > '5'){            //打开的时候显示已设置的
                                $("#map_txt").val(old_map);
                                var oldMap = old_map.split(",");
                                var point = new BMap.Point(oldMap[0],oldMap[1]);
                                var marker = new BMap.Marker(point);        // 创建标注
                                map.clearOverlays();
                                map.addOverlay(marker);
                            }
                            map.addEventListener("click", function(e){
                                var lng_lat = e.point.lng+','+e.point.lat;
                                $("#map_txt").val(lng_lat);                 //加入到设置框
                                var point = new BMap.Point(e.point.lng,e.point.lat);
                                var marker = new BMap.Marker(point);        // 创建标注
                                map.clearOverlays();
                                map.addOverlay(marker);
                            });
                        });
                    },300);
                });
            });
            //设置经纬度
            function setMapValue(){
                if($("#map_txt").val()==""){ alert('你还没选择相应的坐标点^_^哦'); return false; }
                $("#map").val($("#map_txt").val());
                $('#myModal').modal('hide')
            }
        </script>
    </body>
</html>