2

我面临传单库的问题。当我尝试加载地图时，图像加载不止一次。我正在使用带有 angular、grunt 和 browserify 的传单。我怀疑这可能是因为加载库和异步执行的顺序，但我不确定。没有 js 错误消息，传单只是中断。

这是我的咕噜声文件：

var $ = require('jquery');
window.jQuery = $;

//require boostrap.js for bootstrap components
var angular = require('angular');


require('ui.bootstrap');
require('showErrors');

require('leaflet');
require('leaflet-directive');

angular.module('common', [
   require('angular-resource')
]);

var requires = [
    'ngRoute',
    'leaflet-directive',
    'common',
    'ui.bootstrap',
    'ui.bootstrap.showErrors'
];
require('./common');


angular.module('app', requires).config(function($routeProvider) {

    customRouteProvider.when('/common', {templateUrl: 'js/common/1.html'});
    customRouteProvider.otherwise({redirectTo: '/'});
});

html代码：

<div ng-controller="mapController">
    <div id="map" style="height: 440px; border: 1px solid #AAA;"></div>
</div>

地图控制器：

module.exports = function ($scope, leafletData) {
    var map = L.map( 'map', {
        center: [20.0, 5.0],
        minZoom: 2,
        zoom: 2
    });

    L.tileLayer( 'http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright" title="OpenStreetMap" target="_blank">OpenStreetMap</a> contributors | Tiles Courtesy of <a href="http://www.mapquest.com/" title="MapQuest" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png" width="16" height="16">',
        subdomains: ['otile1','otile2','otile3','otile4']
    }).addTo( map );
}

但是当我执行代码传单时，我的地图看起来像：在此处输入图像描述

我也尝试过使用标准的角度传单指令，但它仍然会中断。以前有人遇到过这个问题吗？有什么建议么？

4

3 回答 3

0

在您的文件 Html 代码中

更改样式 div 进行测试：高度：80vh；

<div ng-controller="mapController">
   <div id="map" style="height: 80vh; border: 1px solid #AAA;"></div>
</div>

并检查初始化组件生命周期：

Angular 6 是 ngOnInit。

离子是 ionViewDidEnter。

这个想法是在组件初始化之后完成小册子加载。

于 2019-06-19T15:43:37.970 回答
0

如果您在 Vue3 上遇到此问题，则需要导入 CSS：

<script>
import "leaflet/dist/leaflet.css";
于 2022-03-04T15:46:14.320 回答
0

由于在地图已经初始化时调整任何父容器的大小，通常会发生此问题。

这是我在 Angular 12链接中的解决方案

于 2021-07-23T11:25:31.120 回答