angularJs集成百度地图

app.controller('mapSignController',function($scope,$rootScope,Message, $window,$uibModalInstance){
        var script = document.createElement("script");
        script.src = 'http://api.map.baidu.com/api?v=2.0&ak=y5IRmngMMIXg7Fs7L92GA2le8r7Zh3Ii&callback=baiduMapLoaded';
        document.body.appendChild(script);
        $window.baiduMapLoaded = function () {
            // 实例化一个地图
            $scope.mapObj = new BMap.Map(document.getElementById("map-container"));
            // 鼠标双击地图时会触发此事件
            $scope.mapObj.addEventListener('dblclick', function(event) {
                var pt = event.point;
                // 移除之前的标注
                if ($scope.mapNewMarker) {
                    $scope.mapObj.removeOverlay($scope.mapNewMarker);
                }
                var myIcon = new BMap.Icon("http://api.map.baidu.com/images/markers.png", 
                                            new BMap.Size(19, 25), { 
                                                offset: new BMap.Size(0, 0), 
                                                imageOffset: new BMap.Size(0, -250)
                                            });
                $scope.mapNewMarker = new BMap.Marker(pt, { icon: myIcon });
                $scope.mapObj.addOverlay($scope.mapNewMarker);
                $scope.mapNewMarker.enableDragging();
                var mapGeoc = new BMap.Geocoder();
                
                $scope.mapNewMarker.addEventListener("click", function(event) {
                    mapGeoc.getLocation(event.target.point, function(rs) {
                        var address = rs.address;
                        console.log(event.target.point);
                        console.log(rs);
                    });
                });
                mapGeoc.getLocation(pt, function(rs) {
                    var address = rs.address;
                    console.log(rs);
                    $scope.addressInfo.lat = rs.point['lat'];
                    $scope.addressInfo.lng = rs.point['lng'];
                    $scope.addressInfo.searchAddr = address; 
                });
            });
            
            //定义一个控件类
            function ResourceMapControl(){
                
            }
            ResourceMapControl.prototype = new BMap.Control();
            
            $scope.mapObj.addControl(new ResourceMapControl());
            
            // 左上角,添加比例尺
            var top_left_control = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT }); 
            // 左上角,添加默认缩放平移控件
            var top_left_navigation = new BMap.NavigationControl(); 
            var overView = new BMap.OverviewMapControl();
            // 右下角缩略图
            var overViewOpen = new BMap.OverviewMapControl({ isOpen: false, anchor: BMAP_ANCHOR_BOTTOM_RIGHT });
            $scope.mapObj.enableScrollWheelZoom();
            $scope.mapObj.enableKeyboard();
            $scope.mapObj.disableDoubleClickZoom();
            $scope.mapObj.addControl(top_left_navigation);
            $scope.mapObj.addControl(top_left_control);
            $scope.mapObj.addControl(overViewOpen);
            $scope.mapObj.addControl(new BMap.MapTypeControl());
            
            //浏览器定位
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function(r){
                if(this.getStatus() == BMAP_STATUS_SUCCESS){
                    var mk = new BMap.Marker(r.point);
                    $scope.mapObj.centerAndZoom(r.point, 12);
                }else {
                    console.log('failed'+this.getStatus());
                    var point = new BMap.Point(34.819696, 113.63872);
                    $scope.mapObj.centerAndZoom(point, 1);
                }        
            },{enableHighAccuracy: true})
            
        }
        
        $scope.addressInfo = {
                searchAddr:null,
                lat:null,
                lng:null
        }
        
        $scope.searchAddress = function(){
            if(!$scope.addressInfo.searchAddr){
                Message.danger('请输入地址')
            }else{
                if ($scope.mapNewMarker) {
                     $scope.mapObj.removeOverlay($scope.mapNewMarker);
                 }
                var myGeo = new BMap.Geocoder();      
                // 将地址解析结果显示在地图上,并调整地图视野    
                myGeo.getPoint($scope.addressInfo.searchAddr, function(point){      
                    if (point) {      
                         $scope.mapObj.centerAndZoom(point, 16);      
                         $scope.mapObj.addOverlay(new BMap.Marker(point));
                         $scope.addressInfo.lat = point['lat'];
                         $scope.addressInfo.lng = point['lng'];
                    }      
                 }, 
                "河南省");
            }
        }
        
        $scope.closeModal = function(){
            $uibModalInstance.close($scope.addressInfo);
        }
});
                        $scope.openMap = function(){
                            event.stopPropagation();// 阻止点击事件冒泡
                            var modalInstance = $uibModal.open({
                                keyboard: 'false',
                                backdrop: 'static',
                                size: 'lg',
                                templateUrl: 'mediajob/session/template/mapSignModal.html',
                                scope: $scope,
                                controller: 'mapSignController',
                                resolve: {
                                    task: function() {
                                        return task;
                                    },
                                    activity: function() {
                                        return activity;
                                    }
                                }
                            });
                            
                            modalInstance.result.then(function (result) {
                                $scope.sign.place = result.searchAddr;
                                $scope.sign.lat = result.lat;
                                $scope.sign.lng = result.lng;
                                console.log(result);
                            }, function (reason) {
                                console.log(reason);
                            });
                        }
<div class="popup-modal">
    <div class="modal-header ">
        <div class="close" data-dismiss="modal" data-ng-click="closeModal()">
            <span>×</span>
        </div>
        <h4 class="modal-title" id="modal-title">地图选点</h4>
    </div>
    <div class="modal-body" id="modal-body" style="height: 500px; overflow: auto;">
        <div style="display:inline">
            <input type="text" class="form-control" data-ng-model="addressInfo.searchAddr" placeholder="搜索地点">
            <button class="btn btn-default btn-flat left-most" data-ng-click="searchAddress()">确定</button>
        </div>
        <div id="map-container" style="height:100%"></div>
    </div>
</div>

猜你喜欢

转载自www.cnblogs.com/liangblog/p/10464253.html