我正在尝试使用PubNub和angular创建Google地图，但是如果我使用angular框架，则不会显示地图，但是如果我直接使用javascript和HTML，它将起作用。
谁能告诉我我做错了什么。
HTML：app.component.html
<!doctype html>
<html>
<head>
<title>Google Maps Example</title>
<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.19.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
</head>
<body>
<div class="container">
<h1>PubNub Google Maps Tutorial - Live Device Location</h1>
<div id="map-canvas" style="width:600px;height:400px"></div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=APIKEY&callback=initialize"></script>
<script src="../app/app.js"></script>
</body>
此后，我创建了Javascript文件，而不是使用Typescript。
app.js：
window.lat = 37.7850;
window.lng = -122.4383;
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(updatePosition);
}
return null;
};
function updatePosition(position) {
if (position) {
window.lat = position.coords.latitude;
window.lng = position.coords.longitude;
}
}
setInterval(function(){updatePosition(getLocation());}, 10000);
function currentLocation() {
return {lat:window.lat, lng:window.lng};
};
var map;
var mark;
var initialize = function() {
map = new google.maps.Map(document.getElementById('map-canvas'), {center:{lat:lat,lng:lng},zoom:12});
mark = new google.maps.Marker({position:{lat:lat, lng:lng}, map:map});
};
window.initialize = initialize;
var redraw = function(payload) {
lat = payload.message.lat;
lng = payload.message.lng;
map.setCenter({lat:lat, lng:lng, alt:0});
mark.setPosition({lat:lat, lng:lng, alt:0});
};
var pnChannel = "map2-channel";
var pubnub = new PubNub({
publishKey: 'YOUR_PUB_KEY',
subscribeKey: 'YOUR_SUB_KEY'
});
pubnub.subscribe({channels: [pnChannel]});
pubnub.addListener({message:redraw});
setInterval(function() {
pubnub.publish({channel:pnChannel, message:currentLocation()});
}, 5000);
任何人都可以帮助我解决此问题的方法。。
这可能与您执行打字稿代码的组件生命周期的阶段有关。您的代码需要在呈现模板后执行，因为它希望元素存在：document.getElementById('map-canvas')
您可以尝试在组件的ngAfterViewInit方法中执行代码