AngularJS中使用百度地图

前言

AngularJS作为一个成功的框架，营造出了完备的生态系统。尤其Directive，对于组件化起了非常大的作用。很多时候，如我这般懒人，网上搜一搜，就找到一个合用的Directive，省了自己诸多麻烦。今天就简单介绍一下我的一个懒人组件 － 百度地图。

源码地址：angular-baidu-map

效果图是这样的：

注：本章介绍的是AngularJS的百度地图指令组件，如果需要angular2支持的，请看这里angular2-baidu-map

安装

最low式

直接下载使用，为什么这种方式low，因为三方库不用个什么包管理工具，还随着自己的项目源码提交，浪费空间就算了，也丢了版本追踪的能力...吧啦吧啦吧啦

推荐式

npm install angular-baidu-map --save

有人问为什么不提供bower支持，那我建议你真该多逛逛社区了，bower已是明日黄花，诸多缺陷已经跟不上时代的节奏，更何况人人都用node，用自带的npm管理不是更省心么？(其实angular-baidu-map@2.0.0之前的版本也是支持bower的)

引入资源

最牛ES2015式

import {ngBaiduMap} from 'angular-baidu-map';

普通CommonJS式

var ngBaiduMap = require('angular-baidu-map').ngBaiduMap;

低调script直戳式

<script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="node_modules/angular-baidu-map/dist/angular-baidu-map.js"></script>
<script type="text/javascript">
    var ngBaiduMap = window.ngBaiduMap;
</script>

直戳式之所以写的多是因为需要手动显示指定AngularJS在angular-baidu-map.min.js之前加载

用法

作为迈向AngularJS的第一步，我们需要声明对angular-baidu-map的依赖：

//这里ngBaiduMap是上面得到的变量
var app = angular.module('app',[ngBaiduMap]);

然后找到html或者template，挑选一处希望显示地图的位置，放置如下Directive:

<baidu-map options="mapOptions" ak="<your-ak>" offline="offlineOpts" class="<style-for-it>"></baidu-map>

• mapOptions 表达式，用来描述地图本身。后面详细介绍该对象参数

• ak 字符串，是你在百度开放平台申请的AppKey，没有这个，你的地图显示不出来的

• offlineOpts 表达式，用来控制离线后的友好支持，后面详细介绍各参数。

• class或者style 必须为baidu-map标签指定一个样式(宽、高必须)，否则地图没了形状，显示不出来

简单示例

写一个DemoController

app.controller('DemoController',['$scope',function($scope) {

        //离线友好支持
        $scope.offlineOpts = {
            //无网络时，没10秒重试一次，看能否刷出地图
            retryInterval: 10000,//无网络时显示的文字
            txt: 'Offline Mode'
        };

        //地图显示中心经纬度
        var longitude = 121.506191;
        var latitude = 31.245554;
        $scope.mapOptions = {
            center: {
                longitude: longitude,latitude: latitude
            },zoom: 17,//缩放级别
            //显示一个标记
            markers: [{
                //标记坐标
                longitude: longitude,latitude: latitude,//标记图片
                icon: 'img/mappiont.png',//标记大小
                width: 49,height: 60,//点击标记后的提示框标题
                title: 'Where',//点击标记后的提示框内容
                content: 'Put description here'
            }]
        };
    }
]);

mapOptions详解

offlineOpts详解

这里有一个线上演示：github

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!