AngularJS中使用百度地图

沈建明发布于2019-08-19 18:15 / 3115人阅读

摘要：尤其，对于组件化起了非常大的作用。今天就简单介绍一下我的一个懒人组件百度地图。后面详细介绍该对象参数字符串，是你在百度开放平台申请的，没有这个，你的地图显示不出来的表达式，用来控制离线后的友好支持，后面详细介绍各参数。

前言

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直戳式

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

用法

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

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

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

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详解

Attribute	Type	Required	Description	Example
options.center.longitude	number	是	地图中心点经度	121.506191
options.center.latitude	number	是	地图中心点纬度	31.245554
options.zoom	number	是	地图缩放级别，取值范围3 ~ 19	9
options.navCtrl	boolean	否	是否显示地图导航控制条，默认显示	false
options.scaleCtrl	boolean	否	是否显示地图比例尺，默认显示	false
options.overviewCtrl	boolean	否	是否显示缩略图，默认显示(在地图右下角)	false
options.enableScrollWheelZoom	boolean	否	是否开启鼠标滚轮调整地图缩放级别，默认开启	false
options.markers	array	否	地图标注	[{longitude: longitude,latitude: latitude,icon: "img/mappiont.png",width: 49,height: 60,title: "Where",content: "Put description here"}]
marker.longitude	number	是	标注经度	121.506191
marker.latitude	number	是	标注纬度	31.245554
marker.icon	string	否	标注自定义图标URL	"img/mappiont.png"
marker.width	number	否	标注图片宽度	40
marker.height	number	否	标注图片高度	60
marker.title	string	否	点击标注显示的信息窗口里的标题	"hello"
marker.content	string	否	点击标注显示的信息窗口里的内容	"hello world"
marker.enableMessage	boolean	否	是否开启短信发送功能，默认关闭	true

offlineOpts详解

Attribute	Type	Required	Description	Example
offline.retryInterval	number	否	无网络时重试间隔，默认30000浩渺	5000
offline.txt	string	否	无网络时显示的字符，默认"OFFLINE"	OFFLINE MODE

这里有一个线上演示：github

云服务器 GPU云服务器 ios百度地图使用百度地图百度地图百度地图标注

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79384.html

angular - 收藏集 - 掘金

摘要：如何在中使用动画前端掘金本文讲一下中动画应用的部分。与的快速入门指南推荐前端掘金是非常棒的框架，能够创建功能强大，动态功能的。自发布以来，已经广泛应用于开发中。如何在 Angular 中使用动画 - 前端 - 掘金本文讲一下Angular中动画应用的部分。首先，Angular本生不提供动画机制，需要在项目中加入Angular插件模块ngAnimate才能完成Angular的动画机制...

AlexTuan 2019-08-20 17:19 评论0 收藏0
Android Studio导入并显示国内地图SDK步骤对比以及需要注意的点（百度地图和高德地图为例

摘要：本文为第一次导入地图类，以百度地图和高德地图为例，腾讯地图后续加入。高德或百度地图高德或百度地图高德或百度地图百度地图独有管理地图生命周期合理管理地图生命周期。本文为第一次导入地图类SDK，以百度地图和高德地图为例，腾讯地图后续加入。本文若有不当之处以及勘误，欢迎留言指正。百度和高德地图开放平台官网链接百度地图开放平台高德开放平台步骤 1.获取KEY 在相应的国内SDK开发者...

lavor 2019-08-27 10:56 评论0 收藏0
Android Studio导入并显示国内地图SDK步骤对比以及需要注意的点（百度地图和高德地图为例

摘要：本文为第一次导入地图类，以百度地图和高德地图为例，腾讯地图后续加入。高德或百度地图高德或百度地图高德或百度地图百度地图独有管理地图生命周期合理管理地图生命周期。本文为第一次导入地图类SDK，以百度地图和高德地图为例，腾讯地图后续加入。本文若有不当之处以及勘误，欢迎留言指正。百度和高德地图开放平台官网链接百度地图开放平台高德开放平台步骤 1.获取KEY 在相应的国内SDK开发者...

xiangchaobin 2019-08-19 11:06 评论0 收藏0
百度地图开发实例番外篇--实用方法（持续更新）

摘要：一前言在使用百度地图开发的过程中，查阅百度地图官网基本上就能满足开发的需求，但是有时候需要设置一些东西，很难在官网上查阅到相关的方法技巧。希望百度地图能够越来越强大，这样开发者就可以愉快的开发了一前言在使用百度地图开发的过程中，查阅百度地图官网demo基本上就能满足开发的需求，但是有时候需要设置一些东西，很难在官网上查阅到相关的方法技巧。笔者特意把开发过程中遇到的一些疑难杂症和解...

CocoaChina 2019-08-22 13:53 评论0 收藏0