我想在基于Angular 2的项目中使用Google地图。我尝试从here实现代码,但我收到此错误:
ReferenceError:未定义initMap
下面的Angular 2代码和页面显示为pop ..但我不知道如何在我的Angular 2方法中使用initMap()
函数。
'use strict';
const angular = require('angular');
import * as properties from '../../../properties';
import { ReadableAddress, setCorrectPhotoPath } from '../../../Utility/Utility';
export default class ListComponent {
/*@ngInject*/
constructor($http, $scope, $location) {
var me = this;
this.$scope = $scope;
this.$http = $http;
this.$location = $location;
}
initMap() {
var myLatLng = {
lat: -25.363,
lng: 131.044
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
setLocation(mylocation) {
this.openComponentModalLocation();
}
ngOnInit() {
this.initMap(); /* Use "this" here. */
}
openComponentModalLocation() {
var modalInstance = this.$uibModal.open({
animation: this.animationsEnabled,
template: require('../show/location.html'),
scope: this.$scope,
size: 'lg'
});
this.$scope.modalInstance = modalInstance;
return modalInstance.result;
}
我在下面输入api code..in angularjs
<div class="modal-header">
<h4 class="job_header">Location</h4>
</div>
<div class="modal-body" id="modal-body">
<section class="panel">
<header class="panel-heading">
<h2 class="panel-title">Engineer Location</h2>
</header>
<style>
#map {
height: 100%;
}
</style>
<div class="panel-body">
<div id="map"></div>
</div>
</section>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</div>
<div class="modal-footer">
</div>
答案 0 :(得分:2)
那是因为initMap
函数未定义为ListComponent类的成员函数。
export default class ListComponent {
/*@ngInject*/
constructor($http, $scope, $location) {
var me = this;
this.$scope = $scope;
this.$http = $http;
this.$location = $location;
}
/* Define function as a member */
initMap() {
var myLatLng = {
lat: -25.363,
lng: 131.044
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
setLocation(mylocation) {
this.initMap(); /* Use "this" here. */
this.openComponentModalLocation();
}
openComponentModalLocation() {
var modalInstance = this.$uibModal.open({
animation: this.animationsEnabled,
template: require('../show/location.html'),
scope: this.$scope,
size: 'lg'
});
this.$scope.modalInstance = modalInstance;
return modalInstance.result;
}
}