angularJs集成百度地图

简介: 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=自己的ak&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);
                        });
                    }
相关文章
|
关系型数据库 MySQL 定位技术
Python web框架 之Django + Python3.7 + 集成百度地图【视频讲解】
python集成百度地图 介绍 python集成百度地图demo
448 0
Python web框架 之Django + Python3.7 + 集成百度地图【视频讲解】
|
9月前
|
资源调度 JavaScript
vue项目:集成富文本编辑器 - 百度ueditor(vue-ueditor-wrap)
vue项目:集成富文本编辑器 - 百度ueditor(vue-ueditor-wrap)
276 0
|
9月前
|
定位技术
街道社区网格化信息管理Echarts集成百度地图bmap样式表冲突导致的无法显示地图的解决方案
街道社区网格化信息管理Echarts集成百度地图bmap样式表冲突导致的无法显示地图的解决方案
98 0
|
存储 前端开发 定位技术
Python FastApi集成百度地图并反显到地图
百度地图有海量api可进行调用,FastApi集成百度地图api调用
92 0
Python FastApi集成百度地图并反显到地图
|
定位技术 API 开发工具
【Vue3.0移动端项目--旅游网】-- 集成百度地图以及底部模块
【Vue3.0移动端项目--旅游网】-- 集成百度地图以及底部模块
267 0
【Vue3.0移动端项目--旅游网】-- 集成百度地图以及底部模块
|
人工智能 Dart Java
Flutter集成百度语音识别(Android端)实战
Flutter集成百度语音识别(Android端)实战
1041 0
Flutter集成百度语音识别(Android端)实战
|
移动开发 JavaScript 语音技术
开源:ReactNative集成百度语音开源库
开源:ReactNative集成百度语音开源库
327 0
|
移动开发 人工智能 编解码
ReactNative集成百度语音合成
ReactNative集成百度语音合成
332 0
ReactNative集成百度语音合成
|
SQL Java 关系型数据库
搞定全局ID生成器:SpringBoot2.x 集成百度 uidgenerator
不成功,最后自己一步一步升级引入依赖,修改增加接口注入来源,最后成功。 升级成功后的源码地址