Angular 2谷歌地图的实现 [英] Angular 2 google map implementation
本文介绍了Angular 2谷歌地图的实现的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是angular 2.的新手。我想使用Google地图API进行指导服务，并实施了 https://developers.google.com/maps/documentation/javascript/examples/directions-simple 到我的项目中，如下所示的代码。
但由于某种原因地图没有加载。有人可以帮我吗？
map.html
$ b
<！DOCTYPE html>
< html>
< head>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no>
< meta charset =utf-8>
< title>路线服务< / title>
< style>
html，body {
height：500px;
保证金：0;
padding：0;
}
#map {
height：500px;
}
＃浮动面板{
position：absolute;
top：10px;还剩
：25％;
z-index：5;
background-color：#fff;
padding：5px;
border：1px solid＃999;
text-align：center;
font-family：'Roboto'，'sans-serif';
line-height：30px;
padding-left：10px;
}
< / style>
< / head>
< body>
< div id =浮动面板>
< b>开始：< / b>
< select id =start>
< option value =chicago，il>芝加哥< / option>
< option value =st louis，mo>圣路易斯< / option>
< option>选项值=joplin，mo> Joplin，MO< / option>
< option value =oklahoma city，ok>俄克拉何马城< / option>
< option value =amarillo，tx> Amarillo< / option>
< option value =gallup，nm>盖洛普，NM< / option>
< option value =flagstaff，az> Flagstaff，AZ< / option>
< option>选项值=winona，az> Winona< / option>
< option>选项值=barstow，ca>巴斯托< / option>
< option value =san bernardino，ca>圣贝纳迪诺< / option>
< option value =los angeles，ca>洛杉矶< / option>
< / select>
< b>结束：< / b>
< select id =end>
< option value =chicago，il>芝加哥< / option>
< option value =st louis，mo>圣路易斯< / option>
< option>选项值=joplin，mo> Joplin，MO< / option>
< option value =oklahoma city，ok>俄克拉何马城< / option>
< option value =amarillo，tx> Amarillo< / option>
< option value =gallup，nm>盖洛普，NM< / option>
< option value =flagstaff，az> Flagstaff，AZ< / option>
< option>选项值=winona，az> Winona< / option>
< option>选项值=barstow，ca>巴斯托< / option>
< option value =san bernardino，ca>圣贝纳迪诺< / option>
< option value =los angeles，ca>洛杉矶< / option>
< / select>
< / div>
< div id =map>< / div>
< script>
函数initMap（）{
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map（document.getElementById（'map'），{
zoom：7，
center：{lat：41.85，lng：-87.65}
}）;
directionsDisplay.setMap（map）;
var onChangeHandler = function（）{
calculateAndDisplayRoute（directionsService，directionsDisplay）;
};
document.getElementById（'start'）。addEventListener（'change'，onChangeHandler）;
document.getElementById（'end'）。addEventListener（'change'，onChangeHandler）;
}
功能calculateAndDisplayRoute（为DirectionsService，directionsDisplay）{
directionsService.route（{
来源：的document.getElementById（ '开始'）值，
destination：document.getElementById（'end'）。value，
travelMode：'DRIVING'
}，function（response，status）{
if（status ==='OK'） {
directionsDisplay.setDirections（response）;
} else {
window.alert（'Directions requests failed to +'status'）;
}
}）;
}
< / script>
< script async defer
src =https://maps.googleapis.com/maps/api/js?key=MY-KEY&callback=initMap>
< / script>
< / body>
< / html>
MapComponent
从'@ angular / core'导入{Component};
$ b $ @Component（{
selector：'map'，
templateUrl：'app / dashboard / features / map.html'
}）
export class MapComponent {}
解决方案
为此。
1）在index.html中添加google map api脚本
$ b
index.html
< script src =https://maps.googleapis.com/maps/api/js？ key = [YOUR-KEY]async defer>< / script>
2）在您的html文件中只添加与html相关的代码。
map.html
< div id =map> < / DIV>
3）在单独的css文件或组件中添加与样式相关的代码。 b
map.css
#map {
height ：500px;
}
4）将google声明为变量。并在ngOnInit（）方法中添加所有javascript。
$ b MapComponent.ts
declare var google：any;
@Component（{
selector：'map'，
templateUrl：'app / dashboard / features / map.html'，
styleUrls：['app / dashboard / features / map.css']
}）
导出类MapComponent实现OnInit，OnChanges {
ngOnInit（）{
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map（document.getElementById（'map'），{
zoom：7，
center：{lat：41.85，lng：-87.65}
}）;
directionsDisplay.setMap（map）;
calculateAndDisplayRoute（directionsService，directionsDisplay）;
函数calculateAndDisplayRoute（directionsService，directionsDisplay）{
var waypts = [];
var checkboxArray：any [] = [
'winnipeg'，'regina'，'calgary'
];
for（var i = 0; i< checkboxArray.length; i ++）{
waypts.push（{
location：checkboxArray [i]，
stopover ：true
}）;
directionsService.route（{
origin：{lat：41.85，lng：-87.65}，
destination：{lat：49.3， LNG：-123.12}，
航点：waypts，
optimizeWaypoints：真，
travelMode： 'DRIVING'
}，功能（响应，状态）{
如果（状态==='OK'）{
directionsDisplay.setDirections（response）;
} else {
window.alert（'Directions requests failed to +'status'）;
}
}）;
}
}
I'm new to angular 2. I wanted to use google map API for direction service and implemented the example shown in https://developers.google.com/maps/documentation/javascript/examples/directions-simple to my project as shown below code. But for some reason the map is not loading. Can someone help me with this?
map.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Directions service</title>
<style>
html, body {
height: 500px;
margin: 0;
padding: 0;
}
#map {
height: 500px;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
</style>
</head>
<body>
<div id="floating-panel">
<b>Start: </b>
<select id="start">
<option value="chicago, il">Chicago</option>
<option value="st louis, mo">St Louis</option>
<option value="joplin, mo">Joplin, MO</option>
<option value="oklahoma city, ok">Oklahoma City</option>
<option value="amarillo, tx">Amarillo</option>
<option value="gallup, nm">Gallup, NM</option>
<option value="flagstaff, az">Flagstaff, AZ</option>
<option value="winona, az">Winona</option>
<option value="kingman, az">Kingman</option>
<option value="barstow, ca">Barstow</option>
<option value="san bernardino, ca">San Bernardino</option>
<option value="los angeles, ca">Los Angeles</option>
</select>
<b>End: </b>
<select id="end">
<option value="chicago, il">Chicago</option>
<option value="st louis, mo">St Louis</option>
<option value="joplin, mo">Joplin, MO</option>
<option value="oklahoma city, ok">Oklahoma City</option>
<option value="amarillo, tx">Amarillo</option>
<option value="gallup, nm">Gallup, NM</option>
<option value="flagstaff, az">Flagstaff, AZ</option>
<option value="winona, az">Winona</option>
<option value="kingman, az">Kingman</option>
<option value="barstow, ca">Barstow</option>
<option value="san bernardino, ca">San Bernardino</option>
<option value="los angeles, ca">Los Angeles</option>
</select>
</div>
<div id="map"></div>
<script>
function initMap() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: 41.85, lng: -87.65}
});
directionsDisplay.setMap(map);
var onChangeHandler = function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
};
document.getElementById('start').addEventListener('change', onChangeHandler);
document.getElementById('end').addEventListener('change', onChangeHandler);
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
directionsService.route({
origin: document.getElementById('start').value,
destination: document.getElementById('end').value,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MY-KEY&callback=initMap">
</script>
</body>
</html>
MapComponent
import {Component} from '@angular/core';
@Component({
selector: 'map',
templateUrl: 'app/dashboard/features/map.html'
})
export class MapComponent {}
解决方案
Found a solution for this.
1) Add google map api script in index.html
index.html
<script src="https://maps.googleapis.com/maps/api/js?key=[YOUR-KEY]" async defer></script>
2) Add only html related code in your html file.
map.html
<div id="map"></div>
3) Add style related codes in separate css file or in component.
map.css
#map {
height: 500px;
}
4) Declare google as variable. And add all javascript in ngOnInit() method.
MapComponent.ts
declare var google: any;
@Component({
selector: 'map',
templateUrl: 'app/dashboard/features/map.html',
styleUrls: ['app/dashboard/features/map.css']
})
export class MapComponent implements OnInit, OnChanges {
ngOnInit() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: 41.85, lng: -87.65}
});
directionsDisplay.setMap(map);
calculateAndDisplayRoute(directionsService, directionsDisplay);
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
var waypts = [];
var checkboxArray:any[] = [
'winnipeg', 'regina','calgary'
];
for (var i = 0; i < checkboxArray.length; i++) {
waypts.push({
location: checkboxArray[i],
stopover: true
});
}
directionsService.route({
origin: {lat: 41.85, lng: -87.65},
destination: {lat: 49.3, lng: -123.12},
waypoints: waypts,
optimizeWaypoints: true,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
}
这篇关于Angular 2谷歌地图的实现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
