level 1
王超峰iam
楼主
在地图散点图显示上面，在页面引入bmap.js文件一直报错：BMap api is not loaded
页面代码：
<!DOCTYPE html><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><title>ECharts</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=r5bamWIj1I5qN6yL8xL4ECFHzeP5EM7X"></script><!-- <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.1&key=201b941aa1fd40b1d94a2ef0a6b53f09"> -->
js代码：
controllers.controller('testMapsCtrl', ['$scope', function ($scope) {
$scope.data = [{name: '海门', value: 9},{name: '鄂尔多斯', value: 12},{name: '招远', value: 12}];
$scope.geoCoordMap = {'海门':[121.15,31.89],'鄂尔多斯':[109.781327,39.608266],'招远':[120.38,37.35]};
//开始界面调用
$scope.res = [];$scope.$on('$ionicView.beforeEnter', function () {
for (var i = 0; i < $scope.data.length; i++) {var geoCoord = $scope.geoCoordMap[$scope.data[i].name];if (geoCoord) {$scope.res.push({name: $scope.data[i].name,value: geoCoord.concat($scope.data[i].value)});}}$scope.lodas();});
$scope.lodas = function () {
$scope.options = {backgroundColor: '#404a59',tooltip: {trigger: 'item'},bmap: {center: [116.307698, 40.056975], // 中心位置坐标zoom: 5, // 地图缩放比例roam: true // 开启用户缩放},visualMap: { // 视觉映射组件type: 'continuous',min: 0,max: 200,calculable: true,inRange: {color: ['#50a3ba','
#eac736','#
d94e5d']},textStyle: {color: '#fff'}},series : [{name: '销量',type: 'scatter',coordinateSystem: 'bmap', // 坐标系使用bmapdata: $scope.res}]};}
}]);
angularjs自定义指令：
.directive('echarts', function($parse, $interval){return {restrict: 'AE',replace: true,scope: {id:'@',options: '=',height: '@',width: '@'},restrict: 'E',template: '',link: function($scope, element, attrs, controller) {var myChart = echarts.init(document.getElementById($scope.id));window.addEventListener('resize',function(){myChart.resize();//监测图表自适应});$scope.$watch('options', function(n, o){if (typeof(n)=='object') {myChart.setOption($scope.options);// var bmap = myChart.getModel().getComponent('bmap').getBMap();// bmap.addControl(new BMap.MapTypeControl());}});
}};});
这个问题怎么解决呢？使用的是angularjs1+ionic1做的app
2017年11月15日 03点11分
1
页面代码：
<!DOCTYPE html><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><title>ECharts</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=r5bamWIj1I5qN6yL8xL4ECFHzeP5EM7X"></script><!-- <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.1&key=201b941aa1fd40b1d94a2ef0a6b53f09"> -->
js代码：
controllers.controller('testMapsCtrl', ['$scope', function ($scope) {
$scope.data = [{name: '海门', value: 9},{name: '鄂尔多斯', value: 12},{name: '招远', value: 12}];
$scope.geoCoordMap = {'海门':[121.15,31.89],'鄂尔多斯':[109.781327,39.608266],'招远':[120.38,37.35]};
//开始界面调用
$scope.res = [];$scope.$on('$ionicView.beforeEnter', function () {
for (var i = 0; i < $scope.data.length; i++) {var geoCoord = $scope.geoCoordMap[$scope.data[i].name];if (geoCoord) {$scope.res.push({name: $scope.data[i].name,value: geoCoord.concat($scope.data[i].value)});}}$scope.lodas();});
$scope.lodas = function () {
$scope.options = {backgroundColor: '#404a59',tooltip: {trigger: 'item'},bmap: {center: [116.307698, 40.056975], // 中心位置坐标zoom: 5, // 地图缩放比例roam: true // 开启用户缩放},visualMap: { // 视觉映射组件type: 'continuous',min: 0,max: 200,calculable: true,inRange: {color: ['#50a3ba','
#eac736','#
d94e5d']},textStyle: {color: '#fff'}},series : [{name: '销量',type: 'scatter',coordinateSystem: 'bmap', // 坐标系使用bmapdata: $scope.res}]};}
}]);
angularjs自定义指令：
.directive('echarts', function($parse, $interval){return {restrict: 'AE',replace: true,scope: {id:'@',options: '=',height: '@',width: '@'},restrict: 'E',template: '',link: function($scope, element, attrs, controller) {var myChart = echarts.init(document.getElementById($scope.id));window.addEventListener('resize',function(){myChart.resize();//监测图表自适应});$scope.$watch('options', function(n, o){if (typeof(n)=='object') {myChart.setOption($scope.options);// var bmap = myChart.getModel().getComponent('bmap').getBMap();// bmap.addControl(new BMap.MapTypeControl());}});
}};});
这个问题怎么解决呢？使用的是angularjs1+ionic1做的app