`
agileai
  • 浏览: 61698 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
社区版块
存档分类
最新评论

AngularJS指令封装高德地图组件

 
阅读更多

1 概述

      公司移动门户原来是基于AngularJS指令封装的百度地图组件，用于签到、签退、定位等功能，在使用过程中发现百度地图频繁的弹出广告，所以打算重新引用其它地图组件，最后决定基于AngularJS指令来封装高德地图组件，本文主要与大家分享我的学习思路及开发具体过程。

注意：本文假定读者基本掌握html、css、js以及angularjs，了解百度、高德或者腾讯地图JS API的基本概念。

2 开发思路

       由于之前没有开发过地图组件，所以在开发之前需要做好学习计划，预想下开发组件时可能会遇到的技术点与难题，之后有针对性的进行学习。首先学习高德地图api，把简单的基本功能实现出来，再做一个带按钮的，保证在本地可以运行，然后学习angularjs的指令，参考公司基于百度地图样例定位指令，基于angularjs封装高德地图组件，先基本显示出地图及标注，最后学习$watch监听功能的用法，当地图坐标发生改变，使用angularjs里$watch监听属性，在地图对经度、维度进行动态标记。下面是被分解后的学习步骤供大家参考。

3 具体步骤

3.1 高德地图JavaScriptAPI学习

1 运行下面的链接进入高德地图网站

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

2 注册一个帐号，并创建一个key，如下图选择一个web端

 

3 点击下面的链接开始高德地图的入门学习

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

从左侧菜单目录看出可以由深至浅的学习，中间有代码编辑区，右边可以直接看到结果，非常方便

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>

下面是这两个文件的路径关系，为同级关系

2 双击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>

最终效果如下

3.4 学习AngularJS指令用法

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

点击下面的链接进入学习页面

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

 2 了解AngularJS菜鸟教程中的directive的相关知识后上搜索引擎学习directive的相关知识，进一步了解directive的用法

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.5 封装AngularJS指令显示地图

参考公司网站的定义功能，用angularjs的方式将一个简单的地图显示出来，可以先不考虑$watch的用法

1．查看公司定位的方法在什么地方

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.3/images/newpc/poi-1.png) no-repeat;

            cursor: pointer;

}

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

            background-position: -334px -18px;

}

4．下面是导入的angularjs的库文件，拷贝出去放到自己的电脑里,放入相应目录

5．下面是我的路径供参考

6．用浏览器打开该文件查看，f12打开控制台切换到手机模式查看预览效果

3.6 扩展$watch监听动态显示位置

学习$watch的用法，监听坐标数据变化状态，添加一个按钮为地图设置marker标记，完善上面功能。

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

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.下面为浏览器中执行后的效果

4 个人总结 

学习任何新东西，甚至做任何事情之前，首先要明确目标，然后制定计划、分解计划、明确重点、攻克难点。计划要先总后分，先全局再局部，对粗分过的步骤再细分，把不明白的知识点重点标注，尽可能细化的分解，让过程可操作、易落地。

在学习研究过程中要做好笔记，把相关学习资料、参考文件存放在一个目录，过程文件需要备份。

遇到不能解决的难点一定要努力尝试思考过以后，再去询问，在询问之前要明确自己的问题、要能阐述清楚自己的问题，有时候明确问题怎么阐述之后，还没有去咨询别人，可能问题就自己解决了。只有思考过的东西、有了实践、有了交付物、有了笔记、能够简单明了阐述清楚，才能算是真正认知。

5 附件说明

下列附件为学习过程中整理的4个样例文件，由浅入深，逼近最终目标。4个文件都一样，解压至本地，浏览器运行gaodeMap.html文件即可

5.1 附件1，基础演示高德地图

附件说明：解压至本地，浏览器运行gaodeMap.html文件即可

运行效果：

5.2 附件2，支持标注动态设置

 

5.3 附件3，AngularJS指令封装地图

 

5.4 附件4，扩展监听指令动态显示位置

运行效果：

文档及附件下载地址：http://pan.baidu.com/s/1mi7F8yG

分享到：
| AEAI DP开发统计分析
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    基于 React 封装的高德地图组件，帮助你轻松的接入地图到 React 项目中

    这是一个基于 React 封装的高德地图组件，帮助你轻松的接入地图到 React 项目中。除了必须引用的 APILoader/Map 组件外，我们目前提供了最常用的地图组件，能满足大部分简单的业务场景；如果你有更复杂的需求，或者...

    基于 React 封装的高德地图组件，帮助你轻松的接入地图到 React 项目中。.zip

    这个“基于 React 封装的高德地图组件”就是为了满足这种需求而创建的，它使得在React项目中集成高德地图变得更加简单、快捷。 首先，我们要了解React的基本原理。React是一个用于构建用户界面的JavaScript库，它...

    android高德地图封装工具类

    android高德地图封装工具类地图定位，绘制路径等等android高德地图封装工具类地图定位，绘制路径等等android高德地图封装工具类地图定位，绘制路径等等android高德地图封装工具类地图定位，绘制路径等等android高德...

    安卓高德地图实时定位方法的封装

    本篇文章将深入探讨如何使用高德地图SDK来实现一个简单的实时定位功能，并进行方法封装，使得代码更加模块化，易于理解和复用。 首先，你需要在项目中引入高德地图的SDK。在`build.gradle`文件中添加对应的依赖，...

    基于 vue3 封装的高德地图组件集合，配合猎鹰轨迹服务搭建了简易的电子围栏管理系统与企业签到 demo.zip

    Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者...

    高德地图常用方法封装

    "高德地图常用方法封装"是一个关于如何高效地利用高德地图JavaScript API进行开发的实践项目，通常包括对地图初始化、标记、信息窗口、路径规划、地理编码、事件监听等常见功能的封装，以提高代码复用性和易维护性。...

    react-reactamap是一个基于React封装的高德地图组件

    这个库将高德地图API与React组件化思想相结合，为开发者提供了便捷的方式来在React应用中嵌入地图功能。让我们深入探讨一下`react-amap`的关键特性和使用方法。 ### 一、`react-amap`概述 `react-amap`是一个基于...

    高德地图 fragment 封装，定位，弹窗

    本主题将深入探讨如何在Fragment中封装高德地图的使用，以及如何实现定位和弹窗功能。 首先，我们要了解`Fragment`。在Android应用中，Fragment是一种可以包含UI组件的模块化单元，它可以在Activity之间共享，也...

    Rax-map 是一个基于 Rax 封装的高德地图组件；帮助你轻松的接入地图到 Rax 项目中.zip

    而`Rax-map`则是专门为`Rax`框架打造的一个高德地图组件，旨在帮助开发者将地图功能无缝地集成到他们的`Rax`项目中，以实现丰富的地理信息展示和交互功能。 `Rax-map`组件充分利用了`Rax`的组件化思想，将地图的...

    AngularJS封装jQuery DateTimepicker

    指令是AngularJS中封装可重用功能的组件，它们可以看作是增强HTML元素的“迷你应用”。 指令的定义可能包括以下部分： 1. `restrict`属性：定义指令的使用方式，如`E`(元素)，`A`(属性)，`C`(类)或`M`(注释)。 2. ...

    WebUI4Angular是基于angularjs实现的一套UI组件

    WebUI4Angular是基于... 整套组件借鉴了UI Bootstrap等开源组件的写法，主要对指令进行了自己的封装，我们希望通过angular的指令编写一套类似flex的声明式UI组件,使得页面代码更加简洁，可读性更强，复用性更好

    基于TypeScript的React封装百度地图组件设计源码

    该项目是基于TypeScript的React封装百度地图组件设计源码，共包含211个文件。其中，77个文件为TSX格式，62个为JSON配置文件，30个Markdown文档，29个TypeScript源文件，2个YAML配置文件，2个HTML模板文件，以及1个...

    百度地图、高德地图、腾讯地图三位一体地图定位开发

    现在将市面上应用最广泛的三家地图服务集成到一个APP上，实现百度地图、高德地图、腾讯地图的对比。现将整个开发步骤进行记录。 ———————————————— 版权声明：本文为CSDN博主「nanjumufeng」的原创...

    AngularJS封装jQuery Datepicker

    总结，AngularJS封装jQuery Datepicker是将两者的优势结合，利用AngularJS的双向数据绑定和指令系统，以及jQuery Datepicker的易用性和灵活性，为开发者提供了一种高效且定制化的日期选择解决方案。通过理解这些知识...

    react-amap：基于React封装的高德地图组件。基于React的AMap组件

    react-amap是一个基于React封装的高德地图组件；帮助您轻松的接收地图到React项目中。此外必须引用的Map组件外，我们目前提供了最常用的10个地图组件，能满足大部分简单的业务场景；如果你有更复杂的需求，或者找到...

    gmap中添加高德地图(标准，卫星，和混合路网地图)

    本篇将详细介绍如何在gmap（可能是基于高德地图API的一个封装库）中添加高德地图的三种视图：标准地图、卫星地图以及混合路网地图。 首先，我们需要了解高德地图API的基本概念。高德地图API是高德地图提供的一套...

    mapboxwms天地图，高德地图，谷歌地图

    在本主题中，我们将深入探讨如何使用Mapbox WMS集成天地图、高德地图和谷歌地图，以及如何通过最新的Mapbox库进行基类封装。 首先，天地图是中国官方提供的公开地理信息服务，提供多种地图源，包括地形图、影像图等...

    《基于 vue3 封装的高德地图组件集合，配合猎鹰轨迹服务搭建了简易的电子围栏管理系统与企业签到》+源代码+文档说明+数据库

    基于 vue3 封装的高德地图组件集合，配合猎鹰轨迹服务搭建了简易的电子围栏管理系统与企业签到 - 不懂运行，下载完可以私聊问，可远程教学 该资源内项目源码是个人的毕设，代码都测试ok，都是运行成功后才上传资源，...

    高德地图 添加路线 删除路线 demo

    在实际开发过程中，为了提高代码复用性和可维护性，可以封装成独立的函数或者组件，如“addRoute”、“deleteRoute”和“styleRoute”。同时，为了响应用户的交互，需要监听地图事件，比如点击、拖动等，以便在合适...

    高德地图的二次封装

    本文将深入探讨“高德地图的二次封装”，基于作者deng690990的开源项目SF_GaoDeMAP，讲解如何进行地图功能的自定义与优化。 一、定位功能 高德地图SDK内置了定位服务，可以获取到用户当前的位置信息。二次封装的...

Magicbox
Global site tag (gtag.js) - Google Analytics