如何将Bing Maps v8添加到Angular 2.0？ [英] How to add Bing Maps v8 to Angular 2.0?
问题描述
我想将Bing Map V8控件添加到我的Anguar 2.0项目中。我想知道将Bing Map V8添加到Angular 2.0项目中需要做些什么。我附上了我的实施。我创建的组件无法加载。如何引用Microsoft.Maps.Map？
I want to add Bing Map V8 control to my Anguar 2.0 project. I want to know what I need to do to add Bing Map V8 into Angular 2.0 project. I have attached my implementation. The component I created couldn't be loaded. How do I reference Microsoft.Maps.Map?
以下是bing map v8的示例。如果将以下示例保存为HTML，则一切正常。 bing map键已被剪裁。
Here is an example of the bing map v8. Everything works well if saving the following example as HTML. The bing map key was clipped.
<!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。
Her is the file I created as map.component.html.
<div class='panel panel-primary'>
<div class='panel-heading'>
{{pageTitle}}
</div>
<div id='myMap' style='width: 100vw; height: 100vh;'></div>
</div>
这是我创建的地图文件.component.ts。
Here is the file I created as 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);
}
推荐答案
您的代码几乎没问题，只需要很少的修改
Your code is almost ok, you just need few modifications
1- in index.html 删除回调函数和 div
1- in index.html remove the callback function and the 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 中，删除脚本导入中的回调参数。
Also, in index.html, remove the callback parameter from the script import.
< 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>
现在，你有加载脚本，您需要做的就是在组件中创建地图
Now, you have the script loaded, all you need to do is create the map in your component
@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);
}
}
这篇关于如何将Bing Maps v8添加到Angular 2.0？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
