AngularJSAngularJS指令封装高德地图组件

3.4 学习AngularJS指令用法

1
在AngularJS菜鸟教程中学习有关directive的相关知识

点击上边包车型客车链接进入学习页面

http://www.runoob.com/try/try.php?filename=try_ng_directive_comment

 

 2 领悟AngularJS菜鸟教程中的directive的相干知识后上查找引擎学习directive的有关文化,进一步询问directive的用法

AngularJS 1

3
能够参见上面代码,同盟搜索引擎学习继续刺探directive中的相关属性的学问:restrict,replace,template,link

.directive("appMap", function () {

        return {

          restrict: "E",

          replace: true,

          template: "<div id=’allMap’></div>",

        scope:{

             ‘options’: ‘=’

        },

          link: function ($scope, element, attrs) {

             var map = new BMap.Map("allMap");

             $scope.$watch("options", function (newValue, oldValue) {

                   var allOverlay = map.getOverlays();

                   

                   if (allOverlay && allOverlay.length > 0){

                          for (var i=0;i < allOverlay.length;i++){

                                 map.removeOverlay(allOverlay[i]);                                  

                          }

                       }

                   

                    if ($scope.options && $scope.options.longitude && $scope.options.latitude){

                          var longitude = $scope.options.longitude;

                          var latitude = $scope.options.latitude;

                           var point = new BMap.Point(longitude,latitude); 

                        map.centerAndZoom(point,17); 

                          var mk = new BMap.Marker(point); 

                          var label = new BMap.Label("我在这里",{offset:new BMap.Size(20,-10)});

                          label.setStyle({

                               "color":"green",

                               "fontSize":"14px",

                               "border":"1",

                               "textAlign":"center"

                          });

                          mk.setLabel(label);

                          map.addOverlay(mk);

                    };

             },true);

       }           

        };

})

3.2 在地点html页面显示地图样例

1
本地创制html文件,与连锁的css文件,将上面包车型客车代码考贝到该公文内

创建css文件,下面是css代码

html, body {

      margin: 0;

      height: 100%;

      width: 100%;

      position: absolute;

}

 

#container {

      position: absolute;

      top: 0;

      left: 0;

      right: 0;

      bottom: 0;

      width: 100%;

      height: 100%;

}

 

.button-group {

      position: absolute;

      bottom: 20px;

      right: 20px;

      font-size: 12px;

      padding: 10px;

}

 

.button-group .button {

      height: 28px;

      line-height: 28px;

      background-color: #0D9BF2;

      color: #FFF;

      border: 0;

      outline: none;

      padding-left: 5px;

      padding-right: 5px;

      border-radius: 3px;

      margin-bottom: 4px;

      cursor: pointer;

}

.button-group .inputtext {

      height: 26px;

      line-height: 26px;

      border: 1px;

      outline: none;

      padding-left: 5px;

      padding-right: 5px;

      border-radius: 3px;

      margin-bottom: 4px;

      cursor: pointer;

}

  

#tip {

      background-color: #fff;

      padding-left: 10px;

      padding-right: 10px;

      position: absolute;

      font-size: 12px;

      right: 10px;

      top: 20px;

      border-radius: 3px;

      border: 1px solid #ccc;

      line-height: 30px;

}

 

 

.amap-info-content {

      font-size: 12px;

}

 

#myPageTop {

      position: absolute;

      top: 5px;

      right: 10px;

      background: #fff none repeat scroll 0 0;

      border: 1px solid #ccc;

      margin: 10px auto;

      padding:6px;

      font-family: "Microsoft Yahei", "微软雅黑", "Pinghei";

      font-size: 14px;

}

#myPageTop label {

      margin: 0 20px 0 0;

      color: #666666;

      font-weight: normal;

}

#myPageTop input {

      width: 170px;

}

#myPageTop .column2{

      padding-left: 25px;

}

#container {

      height: 50%;

      position: initial;

}

创设html文件,将上面的代码拷贝到html文件中

注意:key的值填写你本身的

<link rel="stylesheet"      href="../org/css/gaodeMap.css" />

<script        src="http://webapi.amap.com/maps?v=1.3&key=837a9bdb426d81b6862135983d1d715c"></script>

<div id="container"></div>

      <div style="height:100px; text-align: center; margin: 50px;">

</div>

<script type="text/javascript">

                    var map = new AMap.Map("container", {

                           resizeEnable : true,

                           zoom : 17

                    });

                    var cpoint=map.getCenter( );

                    var marker = new AMap.Marker({

                           map : map,

                           draggable: true,  //是否可拖动

                           bubble : true

                    })

</script>

AngularJS,上边是那多少个文件的路子关系,为同级关系

AngularJS 2

两双击gaodeMap.html文件,查看执行结果

AngularJS 3

5.2 附属类小部件2,扶助标注动态设置

AngularJS 4

 

AngularJS 5

3.1 高德地图JavaScriptAPI学习

1 运行上面包车型地铁链接进入高德地图网站

http://id.amap.com/?ref=http%3A%2F%2Flbs.amap.com%2Fdev%2Fkey#/account/info

2
注册3个帐号,并创建多个key,如下图选择八个web端

AngularJS 6

 

AngularJS 7

3 点击上面包车型客车链接初步高德地图的入门学习

http://lbs.amap.com/api/javascript-api/example/map/asynchronous-loading-map/

从左边菜单目录看出能够由深至浅的上学,中间有代码编辑区,右侧能够一向看出结果,非凡有利于

AngularJS 8

2 开发思路

      
由于事先从没支付过地图组件,所以在开发在此以前要求加强学习布置,预想下支付组件时只怕会遇见的技术点与难点,之后有针对性的展开学习。首先学习高德地图api,把差不离的基本成效完成出来,再做二个带按钮的,保障在当地能够运营,然后学习angularjs的通令,参考公司根据百度地图样例定位指令,基于angularjs封装高德地图组件,先基本展现出地图及标明,最终学习$watch监听功能的用法,当地图坐标发生转移,使用angularjs里$watch监听属性,在地图对经度、维度进行动态标记。下边是被演说后的上学步骤供我们参考。

3.5 封装AngularJS指令显示地图

参考公司网站的定义功用,用angularjs的办法将多个大约的地形图彰显出来,能够先不考虑$watch的用法

1.查看集团定点的措施在如哪个地点方

AngularJS 9

AngularJS 10

2.创制2个html文件,将上面包车型大巴代码考入,注意那里导入的css文件,与angular.min.js文件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

      <link rel="stylesheet"

      href="../css/gaodeMap.css" />

      <script src="http://webapi.amap.com/maps?v=1.3&key=837a9bdb426d81b6862135983d1d715c"></script>

    <script src="../js/angular.min.js"></script>

    </head>

<body>

 

<div ng-app="hd" ng-controller="ctrlA">

<gaode-map options="mapOptions" style="height:400px"></gaode-map>

</div>

 

<script>

    var m = angular.module(‘hd’, []);

    m.directive(‘gaodeMap’, [function () {

        return {

            restrict: ‘E’,

                    replace:true,

            template: ‘<div id="container"></div>’,

                    scope: {

                options:’=’

            },

                    link: function ($scope, elem, attr) {

                           var map = new AMap.Map("container", {

                                  resizeEnable : true,

                                  zoom : 17

                           });

                           var marker = new AMap.Marker({

                                         map : map,

                                         bubble : true ,

                                         content: ‘<div class="marker-route marker-marker-bus-from"></div>’  //自定义点标记覆盖物内容,

                           })

                               

                           marker.setLabel({

                                  offset: new AMap.Pixel(20, 0),

                                  content: "我在这里"

                           });

                           $scope.$watch("options", function (newValue, oldValue) {    

                                  if ($scope.options && $scope.options.lng && $scope.options.lat){

                                         map.setCenter([$scope.options.lng ,$scope.options.lat]);

                                         marker.setPosition([$scope.options.lng ,$scope.options.lat]);

                                  }     

                           },true);

                    }

        }

    }]);

      m.controller("ctrlA",function($scope){

              

      });

</script>

</body>

</html>

3.导入相应的css文件与AngularJS文件

上边是css文件的代码

html, body {

       margin: 0;

       height: 100%;

       width: 100%;

       position: absolute;

}

 

#container {

       position: absolute;

       top: 0;

       left: 0;

       right: 0;

       bottom: 0;

       width: 100%;

       height: 100%;

}

 

.button-group {

       position: absolute;

       bottom: 20px;

       right: 20px;

       font-size: 12px;

       padding: 10px;

}

 

.button-group .button {

       height: 28px;

       line-height: 28px;

       background-color: #0D9BF2;

       color: #FFF;

       border: 0;

       outline: none;

       padding-left: 5px;

       padding-right: 5px;

       border-radius: 3px;

       margin-bottom: 4px;

       cursor: pointer;

}

.button-group .inputtext {

       height: 26px;

       line-height: 26px;

       border: 1px;

       outline: none;

       padding-left: 5px;

       padding-right: 5px;

       border-radius: 3px;

       margin-bottom: 4px;

       cursor: pointer;

}

 #tip {

       background-color: #fff;

       padding-left: 10px;

       padding-right: 10px;

       position: absolute;

       font-size: 12px;

       right: 10px;

       top: 20px;

       border-radius: 3px;

       border: 1px solid #ccc;

       line-height: 30px;

}

 

.amap-info-content {

       font-size: 12px;

}

 

#myPageTop {

       position: absolute;

       top: 5px;

       right: 10px;

       background: #fff none repeat scroll 0 0;

       border: 1px solid #ccc;

       margin: 10px auto;

       padding:6px;

       font-family: "Microsoft Yahei", "微软雅黑", "Pinghei";

       font-size: 14px;

}

#myPageTop label {

       margin: 0 20px 0 0;

       color: #666666;

       font-weight: normal;

}

#myPageTop input {

       width: 170px;

}

#myPageTop .column2{

       padding-left: 25px;

}

#container {

       height: 1000px;

       position: initial;

}

.amap-marker-label {

                     border: 0px;

                     color: #0bc00f;

                     background: rgba(255, 255, 255, 0);

              }

.amap-marker .marker-route {

            position: absolute;

            width: 40px;

            height: 44px;

            color: #e90000;

            background: url(http://webapi.amap.com/theme/v1.3newpc/poi-1.png) no-repeat;

            cursor: pointer;

}

.amap-marker .marker-marker-bus-from {

            background-position: -334px -18px;

}

4.底下是导入的angularjs的库文件,拷贝出去放到自身的电脑里,放入相应目录

AngularJS 11

5.底下是自作者的路线供参考

AngularJS 12

6.用浏览器打开该文件查看,f12打开控制台切换来手提式有线电话机格局查看预览效果

AngularJS 13

5.4 附属类小部件4,增添监听指令动态彰显地方

AngularJS 14

运作效果:

AngularJS 15

文书档案及附属类小部件下载地址:http://pan.baidu.com/s/1mi7F8yG

5.3 附属类小部件3,AngularJS指令封装地图

AngularJS 16

 

AngularJS 17

5.1 附属类小部件1,基础演示高德地图

AngularJS 18

附属类小部件表明:解压至本土,浏览器运维gaodeMap.html文件即可

运作效果:

AngularJS 19

1 概述

     
公司移动门户原来是基于AngularJS指令封装的百度地图组件,用于登录、签退、定位等效果,在利用进度中发觉百度地图频仍的弹出广告,所以打算重新引用此外地图组件,最终决定基于AngularJS指令来封装高德地图组件,本文首要与大家大饱眼福本身的上学思路及花费具体经过。

注意:本文假定读者基本控制html、css、js以及angularjs,明白百度、高德可能腾讯地图JS
API的基本概念。

4 个体总括 

读书其余新东西,甚至做任何事情在此以前,首先要旗帜鲜消痈标,然后制定布置、分解陈设、显著主要、攻克难题。布置要先中国人民解放军总后勤部分,先全局再有的,对粗分过的步子再分割,把不清楚的知识点重点标注,尽可能细化的说明,让进程可操作、易落地。

在上学钻研进度中要办好笔记,把相关学习材料、参考文件存放在二个索引,进程文件须求备份。

遭受不可能化解的困难一定要恪尽尝试思考过以往,再去打听,在打听之前要显明本人的标题、要能演讲清楚本身的难题,有时候显明难题怎么解说之后,还平昔不去问问外人,或许难题就协调解决了。唯有思想过的东西、有了实行、有了交付物、有了笔记、能够简单明了演讲清楚,才能算是真正体会。

3.6 扩大$watch监听动态展现地点

学学$watch的用法,监听坐标数据变动情状,添加贰个按钮为地图设置marker标记,完善地点功用。

1.上网学习有关$watch的相关用法

AngularJS 20

2.接续参照集团的不二法门,完善地点的职能,为地方的成效丰硕按钮为地图设置坐标上面为修改后的代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

       <link rel="stylesheet"

       href="../css/gaodeMap.css" />

       <script src="http://webapi.amap.com/maps?v=1.3&key=837a9bdb426d81b6862135983d1d715c"></script>

    <script src="../js/angular.min.js"></script>

    <script src="../js/jsjquery1.7.1.js"></script>

</head>

<body>

 

<div ng-app="hd" ng-controller="ctrlA">

<gaode-map options="mapOptions" style="height:400px"></gaode-map>

<input type="button"  ng-click="setMarkerA()" value="设置markerA">

<input type="button"  ng-click="setMarkerB()" value="设置markerB">

</div>

 

<script>

    var m = angular.module(‘hd’, []);

    m.directive(‘gaodeMap’, [function () {

        return {

            restrict: ‘E’,

                     replace:true,

            template: ‘<div id="container"></div>’,

                     scope: {

                options:’=’

            },

                     link: function ($scope, elem, attr) {

                            var map = new AMap.Map("container", {

                                   resizeEnable : true,

                                   zoom : 17

                            });

                            var marker = new AMap.Marker({

                                          map : map,

                                          bubble : true ,

                                          content: ‘<div class="marker-route marker-marker-bus-from"></div>’  //自定义点标记覆盖物内容,

                            })

                                

                            marker.setLabel({

                                   offset: new AMap.Pixel(20, 0),

                                   content: "我在这里"

                            });

                            $scope.$watch("options", function (newValue, oldValue) {    

                                   if ($scope.options && $scope.options.lng && $scope.options.lat){

                                          map.setCenter([$scope.options.lng ,$scope.options.lat]);

                                          marker.setPosition([$scope.options.lng ,$scope.options.lat]);

                                   }     

                            },true);

                     }

        }

    }]);

       m.controller("ctrlA",function($scope){

              $scope.mapOptions={"lng":123.42678393582929,"lat":41.79739087943974};              $scope.setMarkerA=function(){

                     $scope.mapOptions={"lng":123.43223420561884,"lat":41.7987619126648};

              }

              $scope.setMarkerB=function(){

                     $scope.mapOptions={"lng":123.42405344705162,"lat":41.798870569210926};

              }

       });

      

</script>

</body>

</html>

3.底下为浏览器中推行后的作用

AngularJS 21

5 附属类小部件表明

下列附属类小部件为上学进度中收拾的5个样例文件,安份守己,逼近最后指标。6个文件都一模一样,解压至当地,浏览器运行gaodeMap.html文件即可

3.3 为页面添加按钮设置地图标记

修改html文件的代码,将上面包车型客车代码拷贝到你的html文件中

<link rel="stylesheet"       href="../org/css/gaodeMap.css" />

<script src="http://webapi.amap.com/maps?v=1.3&key=837a9bdb426d81b6862135983d1d715c"></script>

<div id="container"></div>

<div style="height:100px; text-align: center; margin: 50px;">

       <div id="tip"></div>

       <input type="button"   onclick="setMarkerA()" value="设置markerA">

       <input type="button"   onclick="setMarkerB()" value="设置markerB">

 </div>

<script type="text/javascript">

           var map = new AMap.Map("container", {

                     resizeEnable : true,

                     zoom : 17

              });

              var cpoint=map.getCenter( );

              var marker = new AMap.Marker({

                  map : map,

                     draggable: true,  //是否可拖动

                     bubble : true

         })

              setMarkerA=function(){ 

                     var mapOptions={"lng":123.427476,"lat":41.797287};

                     map.setCenter([mapOptions.lng ,mapOptions.lat]);

                     marker.setPosition([mapOptions.lng ,mapOptions.lat]);

              }

              setMarkerB=function(){

                     var mapOptions={"lng":123.42405344705162,"lat":41.798870569210926};

                     map.setCenter([mapOptions.lng ,mapOptions.lat]);

                     marker.setPosition([mapOptions.lng ,mapOptions.lat]);

              }

</script>

说到底效果如下

AngularJS 22

3 具体步骤

相关文章