Saya ingin memperkenalkan perkhidmatan peta Baidu dengan cara berikut. Mengapakah terdapat ralat?
angular.module('bmap',[])
.factory('bmapService', ['$document', '$q', '$rootScope',
function($document, $q, $rootScope) {
var map = $q.defer();
function onScriptLoad() {
// Load client in the browser
$rootScope.$apply(function() { map.resolve(window.bmap); });
}
// Create a script tag with d3 as the source
// and call our onScriptLoad callback when it
// has been loaded
var scriptTag = $document[0].createElement('script');
scriptTag.type = 'text/javascript';
scriptTag.async = true;
scriptTag.src = 'http://api.map.baidu.com/api?type=quick&ak=XXXX&v=1.0';
scriptTag.onreadystatechange = function () {
if (this.readyState == 'complete') onScriptLoad();
};
scriptTag.onload = onScriptLoad;
var s = $document[0].getElementsByTagName('body')[0];
s.appendChild(scriptTag);
return {
bmap: function() { return map.promise; }
};
}]);
Gunakan perkhidmatan peta (kebergantungan aplikasi sudah termasuk bmap, kod berikut ialah pengawal yang menggunakan perkhidmatan)
app.controller('backup',function($rootScope,bmapService){
$rootScope.gotoBackup();
map = new bmapService.bmap()
.BMap.Map('map');
})
Contoh penggunaan yang diberikan oleh Baidu:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#l-map {width: 100%;height: 100%;overflow: hidden;margin:0;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?type=quick&ak=您的密钥&v=1.0"></script>
<title>显示地图</title>
</head>
<body>
<p id="l-map"></p>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("l-map");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);
</script>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
bmapService.bmap() anda mengembalikan objek promise Anda perlu menggunakan then(function(){}) pada objek promise untuk menggunakan API peta yang dimuatkan dalam kaedah panggil balik