前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >angularJs集成百度地图

angularJs集成百度地图

作者头像
JQ实验室
发布2022-02-09 19:17:57
3510
发布2022-02-09 19:17:57
举报
文章被收录于专栏:实用技术
代码语言:javascript
复制
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);
        }
});
代码语言:javascript
复制
                        $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);
                            });
                        }
代码语言:javascript
复制
<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>
代码语言:javascript
复制
var city = document.getElementById("cityName").value;
        if(city != ""){
            map.centerAndZoom(city,11);      // 用城市名设置地图中心点
        }
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-03-03 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档