我编写了以下html/js代码，该代码正常。
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var lat = 1;
var lng = 0;
var pos = "x";
var mapOptions = {
center:new google.maps.LatLng(45.10,20.10),
zoom:5
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
icon: {
path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
scale: 5,
strokeWeight:2,
strokeColor:"#B40404"
},
draggable:true,
map: map,
});
google.maps.event.addListener(marker, 'dragend', function() {
lat = marker.getPosition().lat();
lng = marker.getPosition().lng();
pos = " - " + lat + " - " + lng + " - ";
infowindow = new google.maps.InfoWindow({
content: pos
});
infowindow.open(map,marker);
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>
您可以看到，我没有使用任何API键<script src = "https://maps.googleapis.com/maps/api/js">，对我而言，这种用法就足够了。
我开发的第二步是在我的Ionic2应用中使用此代码。因此，我开始尝试在应用程序中加载一张简单的地图，但我面临一些问题。
我的Ionic2项目带有一个标签模板，作为第一步，我在src/index.html
<head>
...
<script src="https://maps.googleapis.com/maps/api/js"></script>
...
</head>
然后在我的相关页面（搜索页）中，我只是在html文件中插入以下内容：
<ion-content>
<div #map id="map"></div>
</ion-content>
和ts文件看起来像这样：
export class SearchPage {
@ViewChild('map') mapElement: ElementRef;
map: any;
...
text: any;
lat : any;
lon : any;
constructor(public navCtrl: NavController, public recoshService: Recosh, public alertCtrl: AlertController) {
Geolocation.getCurrentPosition().then(
pos => {
this.lat = pos.coords.latitude;
this.lon = pos.coords.longitude;
this.loadMap();
this.loadGuides();
},
err => {
.....
loadMap(){
let latLng = new google.maps.LatLng(this.lat, this.lon);
let mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
显示Ionic2正在构建错误时，跨pile失败。所有这些都与以下错误有关：
找不到名称'google''
看来我以错误的方式使用JS库。我该如何修复？
这只是打字稿，抱怨什么都不知道google是什么。您可以通过宣布这样的属性来解决它：
// imports ...
declare var google: any
@Component({
...
})
export class ....
我通过安装googlemaps解决了它：
$npm install @types/googlemaps --save-dev
只是导入Google地图的类型：
npm i --save-dev @types/google.maps