angularjs地圖服務

❶ 用angularjs的service封裝百度地圖api出錯，請問原因

bmapService.bmap()返回的是一個promise對象，要對promise對象使用then(function(){})，在回調方法中才能使用載入完成的地圖API。

❷ 如何利用AngularJS服務接入外部API

如何利用AngularJS服務接入外部API

除了對HTML進行擴展的能力之外，AngularJS還提供一套簡便途徑、幫助我們與外部API實現交互。利用其服務與GitHub的API相對接，進而創建一套簡單的庫瀏覽器。

現在用這套基礎HTML模板為起點

一、准備工作

到了這一步，應該已經擁有了一套能夠切實運作的AngularJS應用程序——它可以根據搜索字元串獲取GitHub庫。

❸ 如何用angularjs做高德地圖區域指定

在上一篇博文中主要講述了如何利用AngularJs+Node+MySql構建項目，並實現地圖上的多點標注，今天在這篇文章中，我們將在上一個項目的基礎上，實現特定點的定位以及附加信息的展示。這樣我們的項目就更加完善了，從宏觀上看到每個點，從微觀上分析每個點的不同。這種方法往往在大數據可視化方面很有效果。
Angularjs+node+Mysql實現地圖上的多點標注原文地址：http://www.cnblogs.com/DonaHero/p/5815595.html（註：本文是在這篇博文的基礎上進行增加功能的，還請各位能仔細搭建自己的環境，搭建環境與運行，這里將不再贅述。）
項目源碼地址：https://github.com/zhangxy1035/Gould （項目中的源碼已經更新）
一、項目演示
我們經常在自己的業務中，需要搜索某一點，然後讓其在地圖中進行顯示，顯示時也必須帶上自己的附加信息。項目運行結果圖如下：
當點擊搜索按鈕之後，結果如圖
定位到了特定的點，並且還列印出了該點所攜帶的附加信息。
二、項目搭建
首先來說一下我們的數據集，在數據集中我們有兩張表，一張表為new_3,另一張表為sample表，其中所帶的欄位如下：
new_3中的欄位為前三個，sample表中的欄位為後面幾個。接下來我們將要實現的功能就是通過前台輸入Order_id,後台進行接收，執行查詢，並把返回的數據顯示到前台。
position.js文件代碼：
View Code
其中需要說明的一點：order_id需要前台進行接收，所以需要這樣書寫：var order_id = req.body.order_id;
start.js,由於在上一篇中我們已經將項目構建完成，現在我們只需要在start.js文件中增加這樣一句代碼即可：
1 app.post('/getAllMarker4',position.getAllMarker4);
controller.js
View Code
service.js
1 var getAllMarker4 = function (query,success) {
2 $http.post(CONFIG.host + '/getAllMarker4',query)
3 .success(function(data){
4 success(data);
5 });
6 };
html
View Code
在上述代碼中使用了ng-model雙向綁定，然後點擊button進行觸發，但凡前台後台數據傳輸，亦或者是獲取數據，用這種方法都是簡單易於實現的。還有不要忘記在自己的頁面中加入從高德地圖上獲取到的開發者key值。這樣一個搜索的功能就實現了。通過對於本文的學習，希望你能實現node架構前後台的交互傳值，快去動手試試吧。

❹ 怎麼在angularjs的config中使用service

Angular中有幾種不同類型的services。每一種都有自己的獨特用法。

需要記住的非常重要的一點是service總是一個單體，無論是哪種類型的service。
注釋：單體是一種設計模式，它限制了每一個類僅能夠實例化為一個對象。無論我們在什麼地方注入我們的service，將永遠使用同一個實例。
例子：
app.constant('fooConfig',{
config1: true,
config2: "Default config2" });

Constant是一個非常有用的service，它經常被用來在指令中提供默認配置。因此如果你正在創建一個指令，並且你想要在給指令傳遞可選參數的同時進行一個默認配置，一個Constant就是一個好辦法。
作為一個constant，我們放入其中的值將不會改變。Contant service 基本上回事一個基本類型的值或者是一個對象。
例子：
app.value('fooConfig',{
config1: true,
config2: "Default config2 but it can change" });

一個value service有點像是一個constant但是它是可以被改變的。它也經常被用在一個指令上面，來進行配置。一個value service有點像是一個factory service的縮小版，它經常用來保存值但是我們不能在其中對值進行計算。
我們可以使用angular對象的extend方法來改變一個value service：
app = angular.mole("app", []);

app.controller('MainCtrl', function($scope, fooConfig) { $scope.fooConfig = fooConfig;
angular.extend(fooConfig, {config3: "I have been extended"});
});

app.value('fooConfig', {
config1: true,
config2: "Default config2 but it can changes" });
例子：
app.factory('foo', function() { var thisIsPrivate = "Private"; function getPrivate() { return thisIsPrivate;
} return {
variable: "This is public",
getPrivate: getPrivate
};
});
// or..
app.factory('bar', function(a) { return a * 2;
});

Factory service是最普遍使用的service。它同樣也非常容易理解。

一個Factory是一個能夠返回任何數據類型的service。對於你如何創建它並沒有什麼可選項，你僅僅需要在其中返回一些東西即可。

正如前面所說的，所有的service類型都是單體，因此如果我們在一個地方修改了foo.variable，其他的地方也會相應的發生改變。
例子：
app.service('foo', function() { var thisIsPrivate = "Private"; this.variable = "This is public"; this.getPrivate = function() { return thisIsPrivate;
};
});

Service service 和factory差不多。它們之間的區別在於service會接收一個構造器，因此當你第一次使用它的時候，它將會自動運行newFoo()來實例化一個對象。一定要記住如果你在其他的地方也使用了這個service，它將返回同一個對象。
事實上，上面的代碼和下面的代碼等價：
app.factory('foo2', function() { return new Foobar();
}); function Foobar() { var thisIsPrivate = "Private"; this.variable = "This is public"; this.getPrivate = function() { return thisIsPrivate;
};
}

Foobar是一個類，我們在首次使用它的時候在我們的factory中將它實例化然後將它返回。和service一樣，Foobar將只會實例化一次然後下次當我們再次使用factory時它將返回同一個實例。
如果我們已經有了一個類，並且我們想將它用在service中，我們只需要編寫如下的代碼：
app.service('foo3',Foobar);

Provider是factory的加強版。事實上，上一個例子中的factory代碼等價於下面的provider代碼：
app.provider('foo', function() { return { $get: function() { var thisIsPrivate = "Private"; function getPrivate() { return thisIsPrivate;
} return {
variable: "This is public",
getPrivate: getPrivate
};
}

};

});

一個provider中應當由一個$get函數，其中的內容就是我們想要注入我們應用中的部分，因此當我們將foo注入一個控制器時，我們實際上注入的是$get函數。
既然factory如此簡單，那我們為什麼還要使用provider呢？因為我們可以在config階段配置一個provider。因此我們可以編寫下面的代碼：
app.provider('foo', function() { var thisIsPrivate = "Private"; return {

setPrivate: function(newVal) { thisIsPrivate = newVal;
}, $get: function() { function getPrivate() { return thisIsPrivate;
} return {
variable: "This is public",
getPrivate: getPrivate
};
}

};

});

app.config(function(fooProvider) { fooProvider.setPrivate('New value from config');
});

在這里我們將thisIsPrivate移到了我們的$get函數的外面，然後我們創建了一個setPrivate來在一個config函數中修改thisIsPrivate。為什麼我們需要這樣做？這難道不比在factory中添加setter要容易嗎？除此之外，還有另外一個原因。

我們想要注入一個特定的對象但是我們想要提供一種方式來根據我們的需求進行一些配置。例如：一個service包含了一個使用jsonp的資源，我們想要配置具體使用的URL，或者我們想要使用一個第三方的service比如restangular來允許我們根據我們的需求來進行配置。

要注意到我們在config函數中放入的是nameProvider而不是name。在這里，我們實際上還是對name進行配置。

看到這里我們其實已經意識到了我們已經在應用中進行過一些配置了，像是$routeProvider以及$locationProvider，兩者分別用來配置我們的路由了html5模式。

那麼現在已經決定要使用前面的 foo service，但是其中還是缺少一個你想要的greet函數。你可以修改factory嗎？答案是不行！但是你可以裝飾它：
app.config(function($provide){ $provide.decorator('foo',function($delegate){ $delegate.greet = function(){ return "Hello, I am a new function of 'foo'";
}
});
});

$provide是Angular用來在內部創建我們的service的東西。如果我們想要使用它的話可以手動來使用它或者僅僅使用在我們的模塊中提供的函數（我們需要使用$provide來進行裝飾）。$provide有一個函數，decorator，它讓我們可以裝飾我們的service。它接收我們想要裝飾的service的名字並且在回調函數中接收一個$delegate來代表我們實際上的service實例。

在這里我們可以做一切我們想要的事情來裝飾我們的service。在上面的例子中，我們為我們原來的service添加了一個greet函數。接著我們返回了修改後的service。

經過修改以後，現在我們的factory中已經有了一個叫做greet的函數。

裝飾一個service的能力是非常實用的，尤其是當我們想要使用第三方的service時，此時我們不需要將代碼復制到我們的項目中，而只需要進行一些修改即可。

注意：constant service不能被裝飾。

我們的services都是單體但是我們可以創建一個單體factory來創建新的實例。在你深入之前，記住Angular中的服務都是單體並且我們不想改變這一點。但是，在極少數的情況下你需要生成一個新的實例，你可以像下面這樣做：
function Person(json){ angular.extend(this,json);
}

Person.prototype = {
update: function(){ this.name = "Dave"; this.country = "Canada";
}
};

Person.getById = function(id){ return new Person({
name: "Jesus",
country: "Spain" });
};
app.factory('personService',function(){ return {
getById: Person.getById
};
});

在這里我們創建了一個Person對象，它接收一些json數據來初始化對象。然後我們在我們的原型（原型中的函數可以被Person的實例所用）中創建了一個函數，並且在Person上直接創建了一個函數（就像是類函數一樣）。

因此現在我們擁有了一個類函數，它將基於我們提供的id來創建一個新的Person對象，並且每一個對象都可以自我更新。現在我們僅僅需要創建一個能夠使用它的service。

當每次我們調用personService.getById時，我們都在創建一個新的Person對象，因此你可以在不同的控制器中使用這個service，即便當factory是一個單體，它也能生成新的對象。

Service是Angular中最酷的特性之一。我們可以使用很多方法來創造它們，我們僅僅需要找到符合我們需求的方法然後實現它。

❺ angularjs單頁面應用引入地圖時無法顯示時什麼原因

1。你要知道來angularjs是做單源頁面應用的，他視覺上跳轉頁面，實際上的局部動態渲染2。用路由控制渲染模板，地址欄變化沒跳轉，檢查是不是路由配置有誤，導致對應模板沒有，渲染出來。3。建議：做個404模板，只要你路由有錯誤，都給他配置到404模板上。