ton*_*yjy 10 javascript bing-maps angular
我想将Bing Map V8控件添加到我的Anguar 2.0项目中.我想知道将Bing Map V8添加到Angular 2.0项目中需要做些什么.我附上了我的实施.我创建的组件无法加载.我如何引用Microsoft.Maps.Map？
这是bing map v8的一个例子.如果将以下示例保存为HTML,则一切正常.bing地图键已被剪裁.
<!DOCTYPE html>
<html>
<head>
<title>addOneLayerItemHTML</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
</head>
<body>
<div id='printoutPanel'></div>
<div id='myMap' style='width: 100vw; height: 100vh;'></div>
<script type='text/javascript'>
function loadMapScenario() {
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: 'My Bing Map Key - I removed here'
});
var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null);
var layer = new Microsoft.Maps.Layer();
layer.add(pushpin);
map.layers.insert(layer);
}
</script>
<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=experimental&callback=loadMapScenario' async defer></script>
</body>
</html>她是我创建的文件map.component.html.
<div class='panel panel-primary'>
<div class='panel-heading'>
{{pageTitle}}
</div>
<div id='myMap' style='width: 100vw; height: 100vh;'></div>
</div>这是我创建的文件map.component.ts.
import { Component, OnInit } from 'angular2/core';
@Component({
selector: 'pm-map',
templateUrl: 'app/bingmap/map.component.html'
})
export class MapComponent implements OnInit {
public pageTitle: string = "Map";
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: 'Bing Map Key - I removed it here'
});
var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null);
var layer = new Microsoft.Maps.Layer();
layer.add(pushpin);
map.layers.insert(layer);
}我最初尝试了被接受的答案，然后遇到了某些人在评论中遇到的问题，该问题在加载时“原型”为空。
最初，我通过在catch中使用带有setTimeout的try / catch来解决此问题，该尝试将在一秒钟后尝试加载bing。这行得通，但解决方案很草率。
最终，我寻找人们如何以一定角度加载Google地图，以查看是否有更好的解决方案。值得庆幸的是，它使用了承诺。
在此答案中找到了对我有用的解决方案。他们为此全力以赴。
首先创建一个服务来加载地图...
map-loader-service.service
import { Injectable } from '@angular/core';
const url = 'http://www.bing.com/api/maps/mapcontrol?callback=__onBingLoaded&branch=release';
@Injectable()
export class BingMapsLoader {
private static promise;
public static load() {
// First time 'load' is called?
if (!BingMapsLoader.promise) {
// Make promise to load
BingMapsLoader.promise = new Promise( resolve => {
// Set callback for when bing maps is loaded.
window['__onBingLoaded'] = (ev) => {
resolve('Bing Maps API loaded');
};
const node = document.createElement('script');
node.src = url;
node.type = 'text/javascript';
node.async = true;
node.defer = true;
document.getElementsByTagName('head')[0].appendChild(node);
});
}
// Always return promise. When 'load' is called many times, the promise is already resolved.
return BingMapsLoader.promise;
}
}
在包含bing map元素的组件的父组件中，具有以下代码...
import { BingMapsLoader } from './services/map-loader-service/map-loader-service.service';
export class BingMapParentComponent {
mapReady = false;
constructor() {
BingMapsLoader.load()
.then(res => {
console.log('BingMapsLoader.load.then', res);
this.mapReady = true;
});
}
}
另外，在父组件的模板中具有此代码，这将防止bing映射组件初始化直到准备就绪。
<app-bing-map *ngIf='mapReady'></app-bing-map>
现在，在bing-map.component本身中，我们要等到该组件位于DOM中之后再加载地图。
ngOnInit() {
if (typeof Microsoft !== 'undefined') {
console.log('BingMapComponent.ngOnInit');
this.loadMap();
}
}
最后，您将bing地图加载到bing-map.component中
loadMap() {
this.map = new Microsoft.Maps.Map(document.getElementById('mapId'), {
credentials: 'Your Bing Maps Key Here',
});
}
你的代码几乎没问题,你只需要很少的修改
1-在index.html删除回调函数和div
<div id='myMap' style='width: 100vw; height: 100vh;'></div>
<script type='text/javascript'>
function loadMapScenario() {
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: 'My Bing Map Key - I removed here'
});
var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null);
var layer = new Microsoft.Maps.Layer();
layer.add(pushpin);
map.layers.insert(layer);
}
</script>
此外,在脚本导入中index.html删除callback参数.
<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=experimental&callback=loadMapScenario' async defer></script>
成为:
<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=experimental' async defer></script>
现在,您已加载脚本,您只需在组件中创建地图即可
@Component({
selector: 'pm-map',
template: `
<div class='panel panel-primary'>
<div class='panel-heading'>
{{pageTitle}}
</div>
<div #myMap style='width: 100%; height: 500px;'></div>
</div>`
})
export class MapComponent implements OnInit {
@ViewChild('myMap') myMap; // using ViewChild to reference the div instead of setting an id
public pageTitle: string = "Map";
ngAfterViewInit(){ // after the view completes initializaion, create the map
var map = new Microsoft.Maps.Map(this.myMap.nativeElement, {
credentials: 'Bing Map Key - I removed it here'
});
var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null);
var layer = new Microsoft.Maps.Layer();
layer.add(pushpin);
map.layers.insert(layer);
}
}
| 归档时间： |
|
| 查看次数： |
8020 次 |
| 最近记录： |