在Angularjs中使用百度地图

最近由于工作需要，需要在Angularjs中使用百度地图，所以特地和大家分享一下大致的思路以及代码。
页面：一个地址输入框以及一个百度地图显示区域。
实现功能：1、在地址输入框输入地址，百度地图显示区域实时更新视图，并在Angularjs的Controller中将输入的地址解析为经纬度并赋给相应的变量；2、点击百度地图并获取点击区域的建筑名称赋给地址输入框模型。

页面

在页面中你需要引入百度地图的js api，由于是个人测试使用，所以使用的是1.4版本http://api.map.baidu.com/api?v=1.4，1.4以后的版本则需要申请密钥。

<div class="row">
    <div class="col-lg-12">
        <!-- 地址输入框 -->
        <div class="form-group">
            <label class="control-label">地址：</label>
            <input class="form-control input-md" name="address" ng-model="address"/>
        </div>
        <!-- 百度地图显示区域 -->
        <div class="form-group" id="container" style="width: 100%;height: 500px;"></div>
    </div>
</div>

Controller

    /**
     * 初始化地址
     */
    $scope.address = null;
    /**
     * 初始化经度
     */
    $scope.longitude = 121.48;
    /**
     * 初始化纬度
     */
    $scope.latitude= 31.22;
/**
         * 初始化百度地图
         */
        $scope.initBap = function () {
            $scope.map = new BMap.Map("container"); // 创建地图实例
            $scope.map.centerAndZoom(new BMap.Point($scope.longitude, $scope.latitude), 18);  // 初始化地图，设置中心点坐标和地图级别
            $scope.map.addControl(new BMap.NavigationControl());
            $scope.map.addControl(new BMap.ScaleControl());
            $scope.map.addControl(new BMap.OverviewMapControl());
            $scope.map.enableScrollWheelZoom(true);
            // 创建地址解析器实例
            $scope.myGeo = new BMap.Geocoder();
            /**
             * 监听地图点击事件，获取点击处建筑物名称
             */
            $scope.map.addEventListener("click", function (e) {
                var pt = e.point;
                $scope.longitude = pt.lng;
                $scope.latitude = pt.lat;
                $scope.myGeo.getLocation(pt, function (rs) {
                    var addComp = rs.addressComponents;
                    /**
                     * 将获取到的建筑名赋值给$scope.address
                     */
                    $scope.address = addComp.province != addComp.city ? addComp.province + addComp.city : addComp.city + addComp.district + addComp.street + addComp.streetNumber;
                    /**
                     * 通知angularjs更新视图
                     */
                    $scope.$digest();
                });
            });
            /**
             * 初始化查询配置
             * @type {BMap.LocalSearch}
             */
            $scope.local = new BMap.LocalSearch($scope.map, {
                renderOptions: {
                    map: $scope.map,
                    panel: "results",
                    autoViewport: true,
                    selectFirstResult: true
                },
                pageCapacity: 8
            });
            /**
             * 监听地址改变事件，当地址输入框的值改变时
             */
            $scope.$watch('address', function () {
                /**
                 * 查询输入的地址并显示在地图上、调整地图视野
                 */
                $scope.local.search($scope.address);
                /**
                 * 将输入的地址解析为经纬度
                 */
                $scope.myGeo.getPoint($scope.address, function (point) {
                    if (point) {
                        /**
                         * 将地址解析为经纬度并赋值给$scope.longitude和$scope.latitude
                         */
                        $scope.longitude = point.lng;
                        $scope.latitude = point.lat;
                    }
                });
            });
        };

以上就是关键代码，在你的Angularjs系统的页面和页面所在的Controller中加上以上代码即可。