【2018-07-26】百度地图窗口

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"/>  
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>  
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=bP0vnjPpKFTtXCAWkGyOS5LbtckGsndV"></script>
</head>
<body>
    <div id="app">
        <div class="form-inline">
            <div class="form-group">坐标</div>
            <input type="text" class="form-control" placeholder="经度" v-model="appX"/>
            <input type="text" class="form-control" placeholder="维度" v-model="appY"/>
            <button class="btn btn-info" @click="xyButton"><span class="glyphicon glyphicon-map-marker" aria-hidden="true">坐标</span></button>
        </div>
        <!-- Modal -->
        <div class="modal fade" id="BMapModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document" style="height: 450px; width: 850px">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">坐标</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-inline">
                            <span>经纬度：</span>
                            <input type="text" class="form-control" v-model="BMapModalX" />
                            <input type="text" class="form-control" v-model="BMapModalY" />
                        </div>
                        <div>                          
                            <div style="width: 150px; position: absolute; z-index: 2; margin-top: 10px; margin-left: 10px;">
                                <input type="text" class="form-control" v-model="BMapModalGeo" @keydown.enter="geoEnter" placeholder="输入地址回车查询"/>
                            </div>
                            <div id="container" style="height: 450px; margin-top: 10px;"></div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" @click="BMapModalButton">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>  
        // 百度地图API功能
        function G(id) {
            return document.getElementById(id);
        }
        var vue = new Vue({
            el: '#app',
            data: {
                appX: '116.404',
                appY: '39.915',
                BMapModalX: '',
                BMapModalY: '',
                BMapModalGeo:''
            },
            methods: {
                xyButton: function () {
                    this.BMapModalX = this.appX;
                    this.BMapModalY = this.appY;                 
                    $("#BMapModal").modal();
                    setTimeout(function () {                      
                        // 创建点坐标  
                        var point = new BMap.Point(vue.appX, vue.appY);
                        // 初始化地图，设置中心点坐标和地图级别
                        map.centerAndZoom(point, 6);
                        //鼠标滚轮缩放
                        map.enableScrollWheelZoom();
                        //禁用双击放大
                        //map.disableDoubleClickZoom();
                        //平移缩放控件,anchor显示在右下角
                        map.addControl(new BMap.NavigationControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT }));
                        //标注点
                        var marker = new BMap.Marker(point);
                        map.clearOverlays();
                        map.addOverlay(marker);
                        //marker.setAnimation(BMAP_ANIMATION_BOUNCE);//跳动的动画
                        //右键单击事件
                        map.addEventListener("rightclick", function (e) {
                            vue.BMapModalX = e.point.lng;
                            vue.BMapModalY = e.point.lat;
                            var p = new BMap.Point(e.point.lng, e.point.lat);
                            marker = new BMap.Marker(p);
                            map.clearOverlays();
                            map.addOverlay(marker);                       
                            map.setCenter(new BMap.Point(e.point.lng, e.point.lat));//重置中心点                           
                        })
                        var sContent ="<h4 style='margin:0 0 5px 0;padding:0.2em 0'>天安门</h4><p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>天安门坐落在中国北京市中心,故宫的南侧,与天安门广场隔长安街相望,是清朝皇城的大门...</p></div>";
                        var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象
                        marker.addEventListener("mouseover", function () {
                            this.openInfoWindow(infoWindow);//图片加载完毕重绘infowindow      
                            document.getElementById('imgDemo').onload = function () {
                                infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
                            }
                        });
                        marker.addEventListener("mouseout", function () {
                            this.closeInfoWindow(infoWindow);
                        });
                        
                    }, 500);
                    
                },
                geoEnter: function () {
                    // 创建地址解析器实例
                    var myGeo = new BMap.Geocoder();
                    // 将地址解析结果显示在地图上,并调整地图视野
                    myGeo.getPoint(this.BMapModalGeo, function (point) {
                        if (point) {
                            map.clearOverlays();
                            map.centerAndZoom(point, 16);
                            map.addOverlay(new BMap.Marker(point));
                            vue.BMapModalX = point.lng;
                            vue.BMapModalY = point.lat;
                        } else {
                            alert("您选择地址没有解析到结果!");
                        }
                    });
                },
                BMapModalButton: function () {
                    $("#BMapModal").modal("hide");
                    this.appX = this.BMapModalX;
                    this.appY = this.BMapModalY;
                }
            },
            watch: {
                BMapModalX: function (newQuestion,oldQuestion) {
                    map.clearOverlays();
                    var p = new BMap.Point(newQuestion, this.BMapModalY);
                    var marker = new BMap.Marker(p);
                    map.addOverlay(marker);
                },
                BMapModalY: function (newQuestion,oldQuestion) {
                    map.clearOverlays();
                    var p = new BMap.Point(this.BMapModalX,newQuestion);
                    var marker = new BMap.Marker(p);
                    map.addOverlay(marker);
                }
            }
        });    
        // 创建地图实例  
        var map = new BMap.Map("container");
    </script>
</body>
</html>
【2018-07-26】百度地图窗口

猜你喜欢
