【第22期】观点:IT 行业加班,到底有没有价值?

在Angularjs中使用百度地图

原创 2016年08月30日 18:53:34

最近由于工作需要,需要在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中加上以上代码即可。

版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

AngularJS进阶(十九)在AngularJS应用中集成百度地图实现定位功能

在AngularJS应用中集成百度地图实现定位功能 注:请点击此处进行充电! 前言       根据项目需求,需要实现手机定位功能,考虑到百度业务的强大能力,遂决定使用百度地图第三方服务。      ...

angularjs 封装百度地图API(实现异步加载)

想用angular封装百度地图api,先吧最基础的异步加载完成,以后需要新功能在慢慢往上加,直接上code不废话。申请百度秘钥APIhttp://lbsyun.baidu.com/apiconsole...

程序员升职加薪指南!还缺一个“证”!

CSDN出品,立即查看!

AngularJS进阶(二十)HTML5实现获取地理位置信息并定位功能

HTML5实现获取地理位置信息并定位功能 注:请点击此处进行充电! 前言      这篇文章主要介绍了HTML5实现获取地理位置信息并定位功能,本文讲解了原生HTML5、百度地图、谷歌地图等三种获取理...

AngularJs 利用百度地图API 定位当前位置 获取地址信息

利用angular+百度地图API实现定位获取当前地址信息

anjularjs 干货+ionic +百度地图

最近在做公司自己的app ,借鉴移动端开发的模式,混合开发,看了一些国内的appcan( http://www.appcan.cn/),apicloud(http://www.apic...

IONIC 添加GOOGLE地图(angularJs+googleMap)

最近在做一个IONIC的移到开发,需添加地图;因为国外应用所以地图插件选择GOOGLE;废话不多说,下面开始上代码; 1、准备条件 angular.module('myApp', ['ngCord...

Angularjs+node+Mysql实现地图上的多点标注

注:本文适合对于node有一定基础的人,如果您是小白,请先用1个小时学习node。node文档https://nodejs.org/en/docs/ 该片博文的源码地址:https://github...

AngularJS directives for Baidu Maps

/** * A directive which helps you easily show a baidu-map on your page. * * * Usages: * * ...

带你走近AngularJS - 体验指令实例

之前我们已经介绍了所有的AngularJS 基础知识,下面让我们通过实例来加深记忆,体验自定义指令的乐趣。这里将展示三个实例:手风琴指令,Google Maps 指令和Wijmo Grid 指令。

AngularJS进阶(十九)在AngularJS应用中集成百度地图实现定位功能

在AngularJS应用中集成百度地图实现定位功能 注:请点击此处进行充电! 前言       根据项目需求,需要实现手机定位功能,考虑到百度业务的强大能力,遂决定使用百度地图第三方服务。      ...
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)