后使用快捷导航没有帐号？
暂时没有人问过相似的问题，你可以做第一个提问题的人
查看: 4340|回复: 5
使用AngularJS在modal中展示地图的问题
本帖最后由 creativito 于
14:05 编辑
我使用了官方示例代码在modal中展示地图，参考的代码是：
核心代码为：
& && &&&var map = new BMap.Map(&allmap&);& & // 创建Map实例
& && &&&map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);&&// 初始化地图,设置中心点坐标和地图级别
& && &&&map.addControl(new BMap.MapTypeControl());& &//添加地图类型控件
& && &&&map.setCurrentCity(&北京&);& && && & // 设置地图显示的城市 此项是必须设置的
& && &&&map.enableScrollWheelZoom(true);& &&&//开启鼠标滚轮缩放
展示效果如下图所示：
当我再次打开modal时，地图不能够正常展示，效果如下：
地图只能展示左上角一块，其他部分不展示。用firebug诊断，浏览器没有发送其他部分地图图片的请求，只发送了左上角图片的请求：
其他部分地图图片的请求没有发送。
另外，即便只显示了左上角这一点地图，但这一点是可以拖拽的，拖拽效果如下：
拖拽过程中可以看到浏览器发送请求地图图片的请求
请问如何能够在modal多次打开的时候展示全部地图图片，而不是只展示左上角那一点？
(533.16 KB, 下载次数: 2)
14:00 上传
(248.16 KB, 下载次数: 1)
14:00 上传
我也遇到了同样的问题，第一次是好的，再打开一次就变成左上角显示一小块了，有解决方法了吗
我使用的AngularJS的modal方法是参考的这里：
我使用的AngularJS的modal方法是参考的这里：
https://angular-ui.github.io/bootstrap/#/modal ...
用Angular整合地图这块我们做的尝试也不多，我也不太专业，所以推荐您可以去Angular相关的论坛询问一下。
根据您的情况描述，应该是angular影响了地图容器的位置和大小导致了这个问题。
方便的话，，把您的图补一下。。都挂了
本帖最后由 creativito 于
14:05 编辑
用Angular整合地图这块我们做的尝试也不多，我也不太专业，所以推荐您可以去Angular相关的论坛询问一下。 ...
截图已经更新了
有两个图传不上去了，貌似超过限制了
截图已经更新了
有两个图传不上去了，貌似超过限制了
不是modal的原因，是不是当前页面有两个地图需要初始化的呢，我也遇到这种问题，弹出的地图拖动的时候显示不全了
Powered by转载请注明地址：/enzozo/p/4368081.html
此入门地图为简易的&广州大学城&公交寻路地图，采用很少量的AngularJS进行input的交互，绝大部分基于百度地图API。
index.html:
1 &!DOCTYPE html&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&
&!-- 使在移动设备上有较好显示 --&
&link rel="stylesheet" type="text/css" href="index.css"&
&script type="text/javascript" src="http://api./api?v=2.0&ak=91bc04aac3dc6"&&/script&
&!-- ak="xxx",xxx为百度地图秘钥，使用1.5及以上版本需申请 --&
&title&广州大学城寻路&/title&
&script type="text/javascript" src="angular.min.js"&&/script&
&script type="text/javascript" src="http://api./library/AreaRestriction/1.2/src/AreaRestriction_min.js"&&/script&
&!-- 用于设置地图显示范围 --&
&script type="text/javascript" src="myControl.js"&&/script&
22 &/head&
&div id="left"&
&div id="search" ng-app="" ng-controller="myCtrl"&
起点：&input type="text" ng-model="init" required&&br&
终点：&input type="text" ng-model="ended" required&&br&
&button ng-click="go()" style="position: top:20 left:250 z-Index:99; padding:5px"&查询&/button&
&div id="r-result"&&/div&
&div id="l-map"&&/div&
34 &/body&
35 &/html&
index.css:
1 body, html {
width: 100%;
height: 100%;
font-family:"Microsoft Yahei";
8 #l-map {
height:<span style="color: #%;
width:75%;
13 #left {
height: 100%;
width: 24.5%;
float:left;
overflow: hidden;
border-right-style: groove;
21 #search {
padding: 10px;
注：设置路线显示栏及input位于左侧，地图位于右侧。
myControl.js:
2 window.onload = function() {
// 百度地图API
map = new BMap.Map("l-map", {minZoom:15}); //初始化地图，规定最小缩放
map.centerAndZoom(new BMap.Point(113..056676), 16); //显示中心
map.enableScrollWheelZoom(); //启用滚轮缩放
var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL});//右上角平移和缩放按钮
map.addControl(top_right_navigation);
/* 由于设置了地图边界，即拖拽地图至超出&大学城&范围时地图会自动弹回，所以使用平移按钮时它可能会出现自己和自己较劲儿的现象 */
var b = new BMap.Bounds(new BMap.Point(113..033239),new BMap.Point(113.655));
BMapLib.AreaRestriction.setBounds(map, b); //设置边界
} catch (e) {
20 function myCtrl($scope){
$scope.go = function() {
document.getElementById('r-result').innerHTML = '';
map.clearOverlays(); //清空地图所有标注
var local = new BMap.LocalSearch(map, {
renderOptions:{
panel: "results"
var b = new BMap.Bounds(new BMap.Point(113..033239),new BMap.Point(113.655));
BMapLib.AreaRestriction.setBounds(map, b);
var s_marker = null; //起点marker
var e_marker = null; //终点marker
local.searchInBounds($scope.init, map.getBounds()); //在&大学城&范围内进行搜索
local.setMarkersSetCallback(function (pois) { //插入marker的回调函数
for(var i = 0; i & pois. i++){
var marker = pois[i].
marker.addEventListener("click", function(){ //添加监听事件
marker_trick = true;
var pos = this.getPosition();
setAdress_s(pos.lng, pos.lat);
function setAdress_s(s_lng, s_lat) {
if (confirm("设为起点？")) {
map.clearOverlays();
s_marker = new BMap.Marker(new BMap.Point(s_lng, s_lat));
map.addOverlay(s_marker); //创建标注
local.searchInBounds($scope.ended, map.getBounds());
local.setMarkersSetCallback(function (pois) {
//此函数写在setAdress_s里面保证先设置了起点后再设置终点
for(var i = 0; i & pois. i++){
var e_marker = pois[i].
e_marker.addEventListener("click", function(){
marker_trick = true;
var pos = this.getPosition();
setAdress_e(pos.lng, pos.lat);
function setAdress_e(e_lng, e_lat) {
if (confirm("设为终点？")) {
map.clearOverlays();
e_marker = new BMap.Marker(new BMap.Point(e_lng, e_lat));
map.addOverlay(e_marker);
var transit = new BMap.TransitRoute(map, {
renderOptions: {
panel: "r-result" //将结果显示在$('#r-result')中
transit.search(s_marker.getPosition(), e_marker.getPosition()); //公交线路查询
此地图并不是很完善，比如起点终点marker样式相同，未进行区分。之后会继续完善%&_&%
最后照例上一张测试图：
转载请注明出处：/enzozo/p/4368081.html
阅读(...) 评论()AngularJS页面访问时出现页面闪烁问题的解决
作者：小檀
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了AngularJS框架使用中出现页面闪烁问题的解决方法,闪烁问题一般是初始化未加载完毕造成的,需要的朋友可以参考下
我们知道在应用的页面或者组件需要加载数据时，浏览器和angular渲染页面都需要消耗一定的时间。这里的间隔可能很小，甚至让人感觉不到区别；但也可能很长，这样会导致让我们的用户看到了没有被渲染过的页面。
这种情况被叫做Flash Of Unrendered Content (FOUC)（K）？and is always unwanted.下面我们将要介绍几个不同的方式防止这种情况发生在我们的用户身上。
1、ng-cloak
ng-cloak指令是angular的内置指令，它的作用是隐藏所有被它包含的元素：
&div ng-cloak&
&h1&Hello {{ name }}&/h1&
Ng-cloak实现原理为一个directive，页面初始化是在DOM的heade增加一行CSS代码，如下：
&pre class= “prettyprint linenums”&
[ng\:cloak],[ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak{
Display:none !
&pre class= “prettyprint linenums”&
[ng\:cloak],[ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak{
Display:none !
Angular将带有ng-cloak的元素设置为display：none.
在等到angular解析到带有ng-cloak节点的时候，会把元素上ng-cloak& attribute和calss同时remove掉，这样就防止了节点的闪烁。如下：
&script type =”text/ng-template” id =”scenario.js-150”&
It(‘should remove the template directive and css class',function(){
Expect(element(‘.doc-example-live #template1').attr(‘ng-cloak'))
not().toBeDefined();
Expect(element(‘.doc-example-live #template2').attr(‘ng-cloak')).
Not().toBeDefined();
&script type =”text/ng-template” id =”scenario.js-150”&
It(‘should remove the template directive and css class',function(){
Expect(element(‘.doc-example-live #template1').attr(‘ng-cloak'))
not().toBeDefined();
Expect(element(‘.doc-example-live #template2').attr(‘ng-cloak')).
Not().toBeDefined();
2、ng-bind
ng-bind是angular里面另一个内置的用于操作绑定页面数据的指令。我们可以使用ng-bind代替{{ }}的形式绑定元素到页面上；
使用ng-bind替代{{& }}可以防止未被渲染的{{ }}就展示给用户了，使用ng-bind渲染的空元素替代{{ }}会显得友好很多。
上面的例子可以重写成下面那样，这样就可以防止页面出现{{ }}了
&h1&Hello &span ng-bind="name"&&/span&&/h1&
3、resolve
当在不同的页面之间使用routes（路由）的时候，我们有另外的方式防止页面在数据被完全加载到route之前被渲染。
在route（路由）里使用resolve可以让我们在route（路由）被完全加载之前获取我们需要加载的数据。当数据被加载成功之后，路由就会改变而页面也会呈现给用户；数据没有被加载成功route就不会改变， the $routeChangeError event will get fired.【$routeChangeError事件就（不）会被激活？】
angular.module('myApp', ['ngRoute'])
.config(function($routeProvider) {
$routeProvider
.when('/account', {
controller: 'AccountCtrl',
templateUrl: 'views/account.html',
resolve: {
// We specify a promise to be resolved
account: function($q) {
var d = $q.defer();
$timeout(function() {
d.resolve({
name: 'Ari Lerner'
resolve 项需要一个key/value对象，key是resolve依赖的名称，value可以是一个字符串（as a service）或者一个返回依赖的方法。
resolve is very useful when the resolve value returns a promise that becomes resolved or rejected.
当路由加载的时候，resolve参数里的keys可以作为可注入的依赖：
angular.module('myApp')
.controller('AccountCtrl',
function($scope, account) {
$scope.account =
我们同样可以使用resolve key传递$http方法返回的结果，as $http returns promises from it's method calls:
angular.module('myApp', ['ngRoute'])
.config(function($routeProvider) {
$routeProvider
.when('/account', {
controller: 'AccountCtrl',
templateUrl: 'views/account.html',
resolve: {
account: function($http) {
return $http.get('/account.json')
推荐定义一个独立的service的方式来使用resolve key，并且使用service来相应返回所需的数据（这种方式更容易测试）。要这样处理的话，我们需要创建一个service：
首先，看一下accountService，
angular.module('app')
.factory('accountService', function($http, $q) {
getAccount: function() {
var d = $q.defer();
$http.get('/account')
.then(function(response) {
d.resolve(response.data)
}, function err(reason) {
d.reject(reason);
定义好service之后我们就可以使用这个service来替换上面代码中直接调用$http的方式了：
angular.module('myApp', ['ngRoute'])
.config(function($routeProvider) {
$routeProvider
.when('/account', {
controller: 'AccountCtrl',
templateUrl: 'views/account.html',
resolve: {
// We specify a promise to be resolved
account: function(accountService) {
return accountService.getAccount()
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具AngularJs根据访问的页面动态加载Controller的解决方案
投稿：hebedich
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了AngularJs根据访问的页面动态加载Controller的解决方案,需要的朋友可以参考下
用Ng就是想做单页面应用(simple page application),就是希望站内所有的页面都是用Ng的Route,尽量不用location.href,但是这样的webapp好处是很多,但是美中不足的是当你的webapp随着时间的推移,用户变多,功能变得更丰富,controller也变得越来越多,你不得不把所有的controller当作全局模块进行加载,以使得在站内任何一个页面中按F5刷新后能route到任意一个其他页面,而不会发生找不到controller的错误,加载所有的controller使得在手机端上,页面的首次打开速度变慢,今天我就和大家分享我是怎么改善这个缺点的,实现Controller的模块化加载
app.config(function($controllerProvider, $compileProvider, $filterProvider, $provide) {
& app.register = {
&&& controller: $controllerProvider.register,
&&& directive: $compileProvider.directive,
&&& filter: $filterProvider.register,
&&& factory: $provide.factory,
&&& service: $provide.service
在route时阻塞一下去加载需要的js,加载成功后再继续,不知道$script是什么的同学请点
$routeProvider.when('/:plugin', {
& templateUrl: function(rd) {
&&& return 'plugin/' + rd.plugin + '/index.html';
& resolve: {
&&& load: function($q, $route, $rootScope) {
&&&&& var deferred = $q.defer();
&&&&& var dependencies = [
&&&&&&& 'plugin/' + $route.current.params.plugin + '/controller.js'
&&&&& $script(dependencies, function () {
&&&&&&& $rootScope.$apply(function() {
&&&&&&&&& deferred.resolve();
&&&&&&& });
&&&&& return deferred.
controller.js
app.register.controller('MyPluginCtrl', function ($scope) {
&index.html
&div ng-controller="MyPluginCtrl"&
这样改造就可以实现route时动态去加载这个route所依赖的js,但是一般我们的webapp中route都有很多,每个都要写那么一堆代码,既难看又难于维护,我们不妨再优化一下
app.config(function($controllerProvider, $compileProvider, $filterProvider, $provide) {
& app.register = {
&&& controller: $controllerProvider.register,
&&& directive: $compileProvider.directive,
&&& filter: $filterProvider.register,
&&& factory: $provide.factory,
&&& service: $provide.service
& app.asyncjs = function (js) {
&&&&&&& return ["$q", "$route", "$rootScope", function ($q, $route, $rootScope) {
&&&&&&&&&&& var deferred = $q.defer();
&&&&&&&&&&& var dependencies =
&&&&&&&&&&& if (Array.isArray(dependencies)) {
&&&&&&&&&&&&&&& for (var i = 0; i & dependencies. i++) {
&&&&&&&&&&&&&&&&&&& dependencies[i] += "?v=" +
&&&&&&&&&&&&&&& }
&&&&&&&&&&& } else {
&&&&&&&&&&&&&&& dependencies += "?v=" +//v是版本号
&&&&&&&&&&& }
&&&&&&&&&&& $script(dependencies, function () {
&&&&&&&&&&&&&&& $rootScope.$apply(function () {
&&&&&&&&&&&&&&&&&&& deferred.resolve();
&&&&&&&&&&&&&&& });
&&&&&&&&&&& });
&&&&&&&&&&& return deferred.
&&&&&&& }];
$routeProvider.when('/:plugin', {
& templateUrl: function(rd) {
&&& return 'plugin/' + rd.plugin + '/index.html';
& resolve: {
&&& load: app.asyncjs('plugin/controller.js')
到此只要把原来一个controller.js按模块拆分成多个js然后为route添加模块依赖便可提高加载速度,这个方法不仅仅可以用在controller按需加载,而且可以用在其他js模块,例如jquery.ui.datepicker.js这样的日期选择插件,在需要日期选择插件的route节点加上
$routeProvider.when('/:plugin', {
& templateUrl: function(rd) {
&&& return 'plugin/' + rd.plugin + '/index.html';
& resolve: {
&&& load: app.asyncjs(['plugin/controller.js','plugin/jquery.ui.datepicker.js'])
PS:$script可以对需要加载的js进行判断,如果之前已经加载过了他会直接返回成功,也就是说只有在第一次进入日期选择界面时会去请求jquery.ui.datepicker.js退出去再进就不会去请求啦
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具
