Question

我编写了以下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>

然后在我的相关页面（SearchPage）中，我刚刚在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出现错误时，会显示错误并且转换失败。所有这些都与以下错误有关：

找不到名称＆＃39; google＆＃39;

我似乎错误地使用了js库。我该如何解决？

Answer 1

那只是因为抱怨我不知道google是什么。你可以通过声明这样的属性来修复它：

// imports ...

declare var google: any

@Component({
    ...
})
export class ....

Answer 2

我通过安装googlemaps解决了这个问题：

$npm install @types/googlemaps --save-dev

找不到名字＆＃39; google＆＃39; - 在Ionic2上使用谷歌地图

2 个答案: