anjularjs 干货+ionic +百度地图

最近在做公司自己的app ，借鉴移动端开发的模式，混合开发，看了一些国内的appcan(
http://www.appcan.cn/),apicloud(http://www.apicloud.com/)也用它们的IDE 做了一些demo,感觉联网编译，各种不爽。这里不多说，自己可以去体验。最后用anjularjs，ionic 开发项目。
这里说一下我的心得体会。
配置环境，你要有配置cordova的基础，这是在cordova的基础上拓展的技术，配置这一块你可以参考（http://www.jikexueyuan.com/course/1862.html），这个极客学院的教程讲的很详细的。关于angularjs 这一块，你可以看官网文档，ionic这一块（ http://www.ionicframework.com/docs/），
下面重点：
在ionic 配置项目的时候，到这一步：
$ ionic platform add ios或者是ionic platform add android
之后
在platform里面有android 或者ios ,你可以把这个项目导到adt 和xcode 里面看到，哈哈，他就是一个cordova相类似的项目，还有一个引用，
给你们一些开发时候利于开发的工具。苹果手机端何以下载phoneGap (pc端也要下载类似的应用这是下载连接 http://download.csdn.net/detail/u012922981/9254505),苹果端在下载（cordova browser）,这两个都是调试工具。

这里写图片描述

                  下面讲解百度地图；随后附上两个demo;我的需求：1：定位，获取当前位置信息2：获取周围的热点3：可以添加自己标注的热点下载就是这个demo:具体的许久还需要自己根据具体情况自己修改。index.html

    <!doctype html>
<html class="no-js" ng-app="bMapApp">
<head><meta charset="utf-8"><title>map</title><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="description" content=""><meta name="keywords" content=""><meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><!-- Set render engine for 360 browser --><meta name="renderer" content="webkit"><!-- No Baidu Siteapp--><meta http-equiv="Cache-Control" content="no-siteapp"/><!-- Place favicon.ico and apple-touch-icon.png in the root directory --><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=91bc04aac3d665927d8c64750da556a9"></script><style>body, html {height: 100%;margin: 0;}</style>
</head>
<body ng-controller="AngularMapCtrl">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgradeyour browser</a> to improve your experience.</p>
<![endif]-->
<ng-view><angular-bmap></angular-bmap><div id="r-result" style="position:absolute;height:50%;width:80%;top:50%; left:10%; z-Index:99; "></div>
</ng-view>
<script src="http://www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script>
<!--<script src="src/angular-bmap.js"></script>-->
<!-- <script src="dist/angular-bmap.min.js"></script> --><script src="src/angular-bmap.js"></script>
<script>(function () {angular.module('bMapApp', ['angularBMap']).config(['angularBMapProvider', function (angularBMap) {angularBMap.setDefaultPosition(120.608447,31.349185);//设置默认中心点}]).controller('AngularMapCtrl', ['$scope',function ($scope) {}]);})();
</script>
</body>
</html>

anjular-bmap.js

/**** angularjs 使用指令封装百度地图* Created by xc on 2015/6/13.*/
(function (window, angular) {'use strict';var angularMapModule = angular.module('angularBMap', []);angularMapModule.provider('angularBMap', mapService);//定位服务angularMapModule.directive('angularBmap', mapDirective);//定位指令/** 定位相关服务*/function mapService() {//基础配置this.default_position = new BMap.Point(120.61146,31.344791);//地图默认中心点/*** 设置地图默认中心点* @param lng* @param lat* @returns {mapService}*/this.setDefaultPosition = function (lng, lat) {this.default_position = new BMap.Point(lng, lat);return this;};//返回的服务this.$get = BMapService;BMapService.$inject = ['$q', '$timeout'];function BMapService($q, $timeout) {var map,//全局可用的map对象default_position = this.default_position;//默认中心点return {initMap: initMap,//初始化地图getMap: getMap,//返回当前地图对象geoLocation: geoLocation,//获取当前位置geoLocationAndCenter: geoLocationAndCenter,//获取当前位置，并将地图移动到当前位置drawMarkers: drawMarkers,//添加兴趣点drawMarkersAndSetOnclick: drawMarkersAndSetOnclick//添加兴趣点同时添加点击事件};/*** 获取map对象* @alias getMap*/function getMap() {if (!map) {map = new BMap.Map('bMap');//地图对象}return map;}/*** 初始化地图* @constructor*/function initMap() {var defer = $q.defer();$timeout(function () {getMap().centerAndZoom(default_position, 14);defer.resolve();});return defer.promise;}/*** 调用百度地图获取当前位置* @constructor*/function geoLocation() {var defer = $q.defer(), location = new BMap.Geolocation();//百度地图定位实例location.getCurrentPosition(function (result) {if (this.getStatus() === BMAP_STATUS_SUCCESS) {//定位成功,返回定位地点和精度defer.resolve(result);} else {defer.reject('不能获取位置');}}, function (err) {defer.reject('定位失败');});return defer.promise;}/*** 获取当前位置，并将地图移动到当前位置* @constructor*/function geoLocationAndCenter() {var defer = $q.defer();geoLocation().then(function (result) {getMap().panTo(result.point);var marker = new BMap.Marker(result.point);var myGeo = new BMap.Geocoder();      // 根据坐标得到地址描述    myGeo.getLocation(new BMap.Point(result.point.lng,result.point.lat), function(results){      if (results){      console.log(results); alert(results.address);    } });
// 绘制地图菜场marker var local = new BMap.LocalSearch("苏州",   {renderOptions: {map: map,autoViewport: true},pageCapacity: 8});      local.searchNearby("菜场", "姑苏区");// 获取列表 菜场var options = {  onSearchComplete: function(results){      if (local.getStatus() == BMAP_STATUS_SUCCESS){      // 判断状态是否正确      var s = [];      for (var i = 0; i < results.getCurrentNumPois(); i ++){      s.push(results.getPoi(i).title + ", " + results.getPoi(i).address);      }      document.getElementById("r-result").innerHTML = s.join("<br>");      }      }      };      var local = new BMap.LocalSearch(map, options);      // local.search("菜市场");    local.searchNearby("菜场", "姑苏区");getMap().addOverlay(marker);defer.resolve(result);}, function (err) {//定位失败getMap().panTo(default_position);var marker = new BMap.Marker(default_position);getMap().addOverlay(marker);defer.reject('定位失败');});return defer.promise;}/*** 向地图添加兴趣点（marker）* @param markers*/function drawMarkers(markers) {var _markers = [],//待添加的兴趣点列表defer = $q.defer(),point,//当前添加的坐标点_length,//数组长度_progress;//当前正在添加的点的索引$timeout(function () {//判断是否含有定位点if (!markers) {defer.reject('没有传入兴趣点');return;}//传入了参数if (!angular.isArray(markers)) {//传入的不是arrayif (markers.loc) {_markers.push(markers);} else {defer.reject('获取不到loc对象信息');}} else {if (markers[0].loc) {_markers = markers;} else {defer.reject('获取不到loc对象信息');}}_length = _markers.length - 1;angular.forEach(_markers, function (obj, index) {_progress = index;if (angular.isObject(obj.loc)) {point = new BMap.Point(obj.loc.lng, obj.loc.lat);} else if (angular.isString(obj.loc)) {point = new BMap.Point(obj.loc.split(',')[0], obj.loc.split(',')[1]);} else {_progress = '第' + index + '个兴趣点loc对象不存在或格式错误，只支持object和string';}var marker = new BMap.Marker(point);getMap().addOverlay(marker);defer.notify(_progress);if (index === _length) {defer.resolve();}});});return defer.promise;}/*** 默认点击事件* @param obj*/function markerClick() {getMap().panTo(this.point);alert(1);}/*** 向地图添加兴趣点同时添加点击事件* @param markers* @param onClick* @returns {*}*/function drawMarkersAndSetOnclick(markers, onClick) {var _markers = [],//待添加的兴趣点列表defer = $q.defer(),point,//当前添加的坐标点_length,//数组长度_progress,//当前正在添加的点的索引_onClick;//点击事件函数if (onClick) {_onClick = onClick;} else {_onClick = markerClick;}$timeout(function () {//判断是否含有定位点if (!markers) {defer.reject('没有传入兴趣点');return;}//传入了参数if (!angular.isArray(markers)) {//传入的不是arrayif (markers.loc) {_markers.push(markers);} else {defer.reject('获取不到loc对象信息');}} else {if (markers[0].loc) {_markers = markers;} else {defer.reject('获取不到loc对象信息');}}_length = _markers.length - 1;angular.forEach(_markers, function (obj, index) {_progress = index;if (angular.isObject(obj.loc)) {point = new BMap.Point(obj.loc.lng, obj.loc.lat);} else if (angular.isString(obj.loc)) {point = new BMap.Point(obj.loc.split(',')[0], obj.loc.split(',')[1]);} else {_progress = '第' + index + '个兴趣点loc对象不存在或格式错误，只支持object和string';}var marker = new BMap.Marker(point);marker.obj = obj;marker.addEventListener('click', _onClick);getMap().addOverlay(marker);defer.notify(_progress);if (index === _length) {defer.resolve();}});});return defer.promise;}}}/**** 地图指令*/mapDirective.$inject = ['angularBMap'];function mapDirective(angularBMap) {return {restrict: 'EAC',replace: true,scope: true,template: '<div id="bMap" style="height: 100%;"></div>',link: mapLink,controller: mapController};/*** link* @constructor* @param scope* @param element* @param attr* @param ctrl*/function mapLink(scope, element, attr, ctrl) {ctrl.initMap();ctrl.geoLocationAndCenter().then(function (result) {//定位成功console.log(result);}, function (err) {//定位失败console.info(err);});var markers = [{loc: {lng: 120.608447, lat: 31.349185}},{lod: '120.608447,31.349185'},{loc: '120.617142,31.336141'},{lod: '120.612111,31.342741'},{loc: '120.612111,31.342741'}];ctrl.drawMarkersAndSetOnclick(markers).then(function (result) {console.log('兴趣点添加完成');}, function (err) {console.log(err);}, function (progress) {console.log(progress);});}/*** controller* @constructor* @type {string[]}*/function mapController() {this.geoLocation = angularBMap.geoLocation;//定位this.initMap = angularBMap.initMap;//初始化this.geoLocationAndCenter = angularBMap.geoLocationAndCenter;//获取当前定位并移动到地图中心this.drawMarkers = angularBMap.drawMarkers;//添加兴趣点this.drawMarkersAndSetOnclick = angularBMap.drawMarkersAndSetOnclick;//添加兴趣点同时添加点击事件}}
})(window, window.angular);

       myGeo.getLocation(new BMap.Point(result.point.lng,result.point.lat), function(results){      if (results){      console.log(results); alert(results.address);    } });
// 绘制地图菜场marker var local = new BMap.LocalSearch("苏州",   {renderOptions: {map: map,autoViewport: true},pageCapacity: 8});      local.searchNearby("菜场", "姑苏区");// 获取列表 菜场var options = {  onSearchComplete: function(results){      if (local.getStatus() == BMAP_STATUS_SUCCESS){      // 判断状态是否正确      var s = [];      for (var i = 0; i < results.getCurrentNumPois(); i ++){      s.push(results.getPoi(i).title + ", " + results.getPoi(i).address);      }      document.getElementById("r-result").innerHTML = s.join("<br>");      }      }      };      var local = new BMap.LocalSearch(map, options);      // local.search("菜市场");    local.searchNearby("菜场", "姑苏区");

这一块就是重点了，根据自己的需要适当拓展。百度地图api：http://developer.baidu.com/map/index.php?title=jsextreme/guide/service
下面是混合开发的一些工具及框架：
http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/question/1219
http://www.dcloud.io/mui.html
这个也是混合式开发的(https://crosswalk-project.org/)
许多的东西都需要自己体会，
anjularjs 百度地图demo：(http://download.csdn.net/detail/u012922981/9254669)

正在开发项目做技术储备，看到一个哥们写的里面有demo去下就可以了这是网址，
： http://ionichina.com/topic/5641b891b903cba630e25f10

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

angular4实战（2） router
router 单页面应用通过路由来去渲染不同的视图，为用户在同一个页面看到不同的场景，提供基础服务。在上一章节，通过新建项目之后，ngModule会自动引入路由模块，接下来需要做的事情就是对路由模块进行配置。为了方便维…...
2024/4/26 12:25:37
从无到有构建Angular2 后台管理系统的前端架构
该项目很久已不做维护，谢谢大家的支持最近公司的项目需求，需要设计一套后台管理系统的前端框架，我使用了Angular-cli构建Angualr2的模板，并按照需求，添加了ng2-charts/ng2-smart-table/file-upload等ng2的插件&#x…...
2024/4/30 15:52:23
angular zone.js:2969 GET http://localhost:4200/assets/mock-data/your.json 404 (Not Found)
在其他地方新建文件，访问报错。如果在请求本地json文件，报错，文件路径找不到，可能是文件放的地方不对，可以选择放在assets下。src | - app | - assets| - css|- img|- mock-data|your.json如果您正在使用Angular CLI和…...
2024/4/21 3:43:25
ECharts简单Demo之WEBFORM版本
前言本来今天上午已经快写完了，一个ctrl+w关闭了，草稿箱不知道怎么回事，没有保存O__O “…下午边看LPL比赛又重写一次。这篇博文应该是在2016年就完成的，因为种种原因耽误了。本来想实现一个数据和图形转换的简单功能，查阅了相关资料，感觉使用百度开发的ECharts比较简单…...
2024/4/27 6:33:05
发布服务器后的项目访问404,Angular 项目打包之后，部署到服务器，刷新访问404解决方法...
将前端代码打包部署到服务器中，当跳转到相应路由界面，刷新地址，服务找不到地址页面，所以会报 404 - Page Not Found。解决方法：只需要将路由转换成哈希值: userHash: true，将路由转化成“#”号的形式以下…...
2024/4/20 20:02:15
Django,Angular结合的一些问题解决方法
Django,Angular结合的一些问题解决方法 1 模板标签的问题 Django和Angular都使用{{varname}}的标签语法，存在冲突，解决方法之一是配置Angular使用不同的标签，例如使用[[varname]],这个需要在模块级别配置 angular.module(app,[]).config([$i…...
2024/5/7 15:18:16
Angular2--拦截器服务
前言最近小编做的一个有关Angular的项目，这是一个前端的项目，在项目的最后需要用到后端提供的接口来实现前端和后端的交互，这个时候就用到了拦截器服务。下面咱们就具体的了解一下拦截器服务是什么吧。叙述背景需求 1.项目开发、测试、发…...
2024/4/20 20:02:14
基于angular2 的 http服务封装
最近在项目中折腾了下angular2,所以出来跟大家分享，希望有帮助，每个公司业务不一样，按实际情况而定，个人学习心得，不作为标准。 1、定义http-interceptor.service.ts服务，统一处理http请求 /*** name:http…...
2024/5/2 1:33:50
Angular 项目打包之后，部署到服务器，刷新访问404解决方法
将前端代码打包部署到Java服务器中，当跳转到相应路由界面，刷新地址，服务找不到地址页面，所以会报 404 - Page Not Found。解决方法：只需要将路由转换成哈希值: userHash: true，将路由转化成“#”号的形…...
2024/4/20 19:05:36
Angular2 前端代码规范
不要重置对象的引用!(重置只应该在组件或服务的初始化时) why：会使页面产生闪烁不要给图片绑定一个空的值或空的图片引用（如果值从服务器异步过来，那应该在初始化时给它一个默认值）why：会触发一个404的请求 &#xff0…...
2024/5/1 22:12:09
Angular2发布思路整理
本文是按着ng2官网的高级内容“Deployment”的思路整理得出的，原文虽然在angular2的中文站下挂着，截止目前却还是英文版未翻译，笔者就在这里结合自己的理解给出原文的一点点整理。这是原文地址： https://angular.cn/docs/ts/lat…...
2024/5/2 4:09:49
Visual Studio 2015，Angular2进行开发快速入门
本文介绍了在 Visual Studio 2015 的 ASP.NET 4.x 项目中，用 Angular 实现“快速起步”所需的步骤。 ASP.NET 4.x 项目在 Visual Studio 的 ASP.NET 4.x 项目中实现“快速起步”的步骤如下： 前提条件 : 安装 Node.js 第一步 : 下载“快速起步”的文件…...
2024/5/1 21:57:04
解决angular 4.0项目打包后404错误
最近公司在使用一个开源项目，但是其无法全屏的问题收到公司同事的一致吐槽和内心拒绝。因此，尝试进行源码分析之后进行了魔改，然而在本地通过ng server调试正常的代码，使用ng build打包的程序上传到服务器后，居然出现了…...
2024/4/21 3:43:17
Angular/Vue 部署 IIS 刷新 404 的解决方案
在 Angular 或 Vue 部署到 IIS 上会遇到的问题，不能刷新，一刷新就会出现404，其原因就是自定义路由，下面我们来将这个问题解决。 1.从 IIS “获取新的 Web 平台组件” 2.进入 iis.net 官方网站去下载 WebPlatformInstaller_x64_en…...
2024/4/21 3:43:15
angular post php 404,解决Angular4项目部署到服务器上刷新404的问题
刚遇到Angular4项目npm run build 后部署到服务器可以访问,但是刷新页面会出现404的错误!在网上搜了一下看到有些人写的解决办法还有错误在里面,一眼看就知道的错误,感觉这些人真的有毛病,决定写了博客,为什么那么不仔细,写错误的上去,祸害别人吗!!解决angular2页面刷新后报404…...
2024/4/21 3:43:14
WebStrom里设置angular提示，可以在html中提示ts文件的内容
下面这样就是可以提示到在settings->languages&frameworks->javaScript->Libraries 下把你的工程添加进去这是我添加进来的，Type类型为project 我改了中文...
2024/5/2 1:39:03
使用 angular-cli 创建 angular2 项目
起初使用angular-cli创建angular2项目时，有好几次都是失败告终。最后发现是node-sass没有安装上，原来是npm翻墙的缘故。使用淘宝官方制作的npm镜像站点cnpm就可以正常创建项目了。下面是一部分报错信息： 说一下使用angular-cli 创建angul…...
2024/5/2 3:27:15
angular6学习(一)：用webStorm创建第一个项目
一：打开webstorm create即可要下载许多内容，耐心等待二运行选中package.json,右键，选择 show npm script 选中start,右键，再选择run ‘start’，然后浏览器访问http://localhost:4200...
2024/5/2 0:54:32
AngularJS2 教程 -- Webstorm下的Angular2.0
首先打开你的webstorm。这里插一句话，尽量保证你的webstorm是比较新的版本，在webstorm的右下角会有提示你更新的。因为就目前来看,我们的angualr2.0项目是采用typescript来编写的，而最新版本的webstorm都只能支持到typescript2.0.8&#xff0…...
2024/5/2 2:21:53
ng2-webstorm-snippets
用法输入格式指令按enter或tab即可 Installing the templates From JetBrains Plugin repository Open IDE preferences Cmd ,Go to Plugins -> Browse repositoriesType angular and install Angular 2 TypeScript TemplatesRestart WebStorm By Copy xml file Clo…...
2024/5/2 22:19:04

anjularjs 干货+ionic +百度地图

相关文章

最新文章