AngularJS directives for Baidu Maps
来源:互联网 发布:淘宝搜索进货渠道插件 编辑:程序博客网 时间:2024/06/05 05:55
/** * A directive which helps you easily show a baidu-map on your page. * * * Usages: * * <baidu-map options="options"></baidu-map> * * options: The configurations for the map * .width[Number]{M}: The width of the map * .height[Number]{M}: The height of the map * .center.longitude[Number]{M}: The longitude of the center point * .center.latitude[Number]{M}: The latitude of the center point * .zoom[Number]{O}: Map's zoom level. This must be a number between 3 and 19 * .navCtrl[Boolean]{O}: Whether to add a NavigationControl to the map * .scaleCtrl[Boolean]{O}: Whether to add a ScaleControl to the map * .overviewCtrl[Boolean]{O}: Whether to add a OverviewMapControl to the map * .enableScrollWheelZoom[Boolean]{O}: Whether to enableScrollWheelZoom to the map * .city[String]{M}: The city name which you want to display on the map * .markers[Array]{O}: An array of marker which will be added on the map * .longitude{M}: The longitude of the marker * .latitude{M}: The latitude of the marker * .icon[String]{O}: The icon's url for the marker * .width[Number]{O}: The icon's width for the icon * .height[Number]{O}: The icon's height for the icon * .title[String]{O}: The title on the infowindow displayed once you click the marker * .content[String]{O}: The content on the infowindow displayed once you click the marker * .enableMessage[Boolean]{O}: Whether to enable the SMS feature for this marker window. This option only available when title/content are defined. * * * * @author Howard.Zuo * @copyright April 9, 2014 * @version 1.0.4 * */(function(angular) { "use strict"; var defaults = { navCtrl: true, scaleCtrl: true, overviewCtrl: true, enableScrollWheelZoom: true, zoom: 10 }; var checkNull = function(obj) { return obj === null || obj === undefined; }; var checkMandatory = function(prop, desc) { if (!prop) { throw new Error(desc); } }; /** * Construction function * * @constructor */ var baiduMapDir = function() { // Return configured, directive instance return { restrict: 'E', scope: { 'options': '=' }, link: function($scope, element, attrs) { var ops = {}; ops.navCtrl = checkNull($scope.options.navCtrl) ? defaults.navCtrl : $scope.options.navCtrl; ops.scaleCtrl = checkNull($scope.options.scaleCtrl) ? defaults.scaleCtrl : $scope.options.scaleCtrl; ops.overviewCtrl = checkNull($scope.options.overviewCtrl) ? defaults.overviewCtrl : $scope.options.overviewCtrl; ops.enableScrollWheelZoom = checkNull($scope.options.enableScrollWheelZoom) ? defaults.enableScrollWheelZoom : $scope.options.enableScrollWheelZoom; ops.zoom = checkNull($scope.options.zoom) ? defaults.zoom : $scope.options.zoom; checkMandatory($scope.options.width, 'options.width must be set'); checkMandatory($scope.options.height, 'options.height must be set'); checkMandatory($scope.options.center, 'options.center must be set'); checkMandatory($scope.options.center.longitude, 'options.center.longitude must be set'); checkMandatory($scope.options.center.latitude, 'options.center.latitude must be set'); checkMandatory($scope.options.city, 'options.city must be set'); ops.width = $scope.options.width; ops.height = $scope.options.height; ops.center = { longitude: $scope.options.center.longitude, latitude: $scope.options.center.latitude }; ops.city = $scope.options.city; ops.markers = $scope.options.markers; element.find('div').css('width', ops.width + 'px'); element.find('div').css('height', ops.height + 'px'); // create map instance var map = new BMap.Map(element.find('div')[0]); // init map, set central location and zoom level map.centerAndZoom(new BMap.Point(ops.center.longitude, ops.center.latitude), ops.zoom); if (ops.navCtrl) { // add navigation control map.addControl(new BMap.NavigationControl()); } if (ops.scaleCtrl) { // add scale control map.addControl(new BMap.ScaleControl()); } if (ops.overviewCtrl) { //add overview map control map.addControl(new BMap.OverviewMapControl()); } if (ops.enableScrollWheelZoom) { //enable scroll wheel zoom map.enableScrollWheelZoom(); } // set the city name map.setCurrentCity(ops.city); if (!ops.markers) { return; } //create markers var openInfoWindow = function(infoWin) { return function() { this.openInfoWindow(infoWin); }; }; for (var i in ops.markers) { var marker = ops.markers[i]; var pt = new BMap.Point(marker.longitude, marker.latitude); var marker2; if (marker.icon) { var icon = new BMap.Icon(marker.icon, new BMap.Size(marker.width, marker.height)); marker2 = new BMap.Marker(pt, { icon: icon }); } else { marker2 = new BMap.Marker(pt); } // add marker to the map map.addOverlay(marker2); // 将标注添加到地图中 if (!marker.title && !marker.content) { return; } var infoWindow2 = new BMap.InfoWindow("<p>" + (marker.title ? marker.title : '') + "</p><p>" + (marker.content ? marker.content : '') + "</p>", { enableMessage: checkNull(marker.enableMessage) ? false : marker.enableMessage }); marker2.addEventListener("click", openInfoWindow(infoWindow2)); } }, template: '<div></div>' }; }; var baiduMap = angular.module('baiduMap', []); baiduMap.directive('baiduMap', [baiduMapDir]);})(angular);
0 0
- AngularJS directives for Baidu Maps
- angularJs directives
- AngularJS directives实践(一)
- Angularjs指令directives
- baidu & google maps 分析
- [AngularJS] How to create Directives?
- AngularJS Directives-Packt 2013 读书笔记
- google maps API 替换更换为 baidu maps API
- several frequently used directives for apache server
- [JS] Use repeat and list directives in AngularJS
- angularjs速成学习个人理解_7指令Directives
- Day37:Interview for Baidu
- vetur插件提示 'v-for' directives require 'v-bind:key' directives.错误的解决办法
- BMap API(Baidu)与google.maps API(Google)
- ng2-bootstrap——Native Angular2 directives for Bootstrap
- INTERACTIVE HEAT MAPS FOR R
- Day34:First Test for Baidu
- Correlation Directives -> Directives
- java Web程序的目录结构
- Android ListDialog 通过反射修改单选dialog的布局
- 用Eclipse插件Bytecode Outline来查看Java字节码
- Linux内核设计与实现读书笔记四——进程调度(内附思维导图)
- java如何获取ip地址
- AngularJS directives for Baidu Maps
- Jetson-TK1初始化操作以及安装cuda toolkit
- Red Hat Satellite 6:更好地管理服务器和云
- poj 3624 Charm Bracelet (01背包)
- 在Eclipse中配置spket(一)
- VB.NET对图片读取操作
- Neural Networks (Deep Learning) , NLP and Text Mining
- oracle数据库归档与非归档设置
- 八皇后问题(回溯法)