Как добавить Bing Maps v8 в Angular 2.0?
Я хочу добавить элемент управления Bing Map V8 в мой проект Anguar 2.0. Я хочу знать, что мне нужно сделать, чтобы добавить Bing Map V8 в проект Angular 2.0. Я приложил свою реализацию. Компонент, который я создал, не может быть загружен. Как я могу ссылаться на Microsoft.Maps.Map?
Вот пример карты bing 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);
}