zoukankan      html  css  js  c++  java
  • 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);
                                });
                            }
    <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>
    var city = document.getElementById("cityName").value;
            if(city != ""){
                map.centerAndZoom(city,11);      // 用城市名设置地图中心点
            }
  • 相关阅读:
    剑指offer——关于排序算法的应用(一):归并排序
    剑指offer——关于排序算法的应用:选择排序和冒泡排序
    剑指offer:将矩阵选择、螺旋输出矩阵——Python之光
    剑指offer:链表——常见的多指针协同操作:
    剑指Offer:编程习惯篇:代码鲁棒性,代码可扩展性——防御性的编程习惯,解决问题时方法分模块考虑
    剑指offer:数字二进制含1个数,快速幂运算:二进制位运算的运用
    剑指offer:斐波那契数列,跳台阶,变态跳台阶——斐波那契数列类题目:
    回溯法实现各种组合的检索:
    剑指offer:二维数组中查找
    jdk生成https证书的方法
  • 原文地址:https://www.cnblogs.com/liangblog/p/10464253.html
Copyright © 2011-2022 走看看