Google 地图问题 - Ionic 2

Question

Google 地图显示在浏览器中但是当我运行命令时 ionic run android 它成功构建并启动了应用程序，但除 Google 地图外一切正常 chrome://inspect 中没有错误它只是说 DEVICE READY FIRED AFTER 630 ms 但 google 地图没有错误。我确实在 console.developers.google.com 上注册了应用程序，得到了密钥并在头部的 www/index.html 中使用了它，但仍然没有任何变化。请帮忙谢谢。 home.ts（地图函数在这个文件里面）

  // Get the current location
   Geolocation.getCurrentPosition().then((position) => {
  // Set latitude and longtitude variable
  this.lat = position.coords.latitude;
  this.long = position.coords.longitude;

  // This function will get the name of the city where user is located
  this.getCityName(this.lat, this.long);

  // this function sets up the google map 
  let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

  let mapOptions = {
    center: latLng,
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var  mapi  =  new  google.maps.Map(this.mapDiv.nativeElement, mapOptions);  
  // Below code is provided by a ai pollution control website (http://aqicn.org/faq/2015-09-18/map-web-service-real-time-air-quality-tile-api/)
  // haven't changed anything in below code copied as it is from web
  var  waqiMapOverlay  =  new  google.maps.ImageMapType({  
              getTileUrl:  function(coord,  zoom)  {  
                        return  'http://tiles.aqicn.org/tiles/usepa-aqi/'  +  zoom  +  "/"  +  coord.x  +  "/"  +  coord.y  +  ".png?token=_TOKEN_ID_";  
              },  
              name:  "Air  Quality",  
    });  
  // Insert above received data into map
  mapi.overlayMapTypes.insertAt(0,waqiMapOverlay);

`

Answer 1

可能您的地图未获取坐标(position.coords.latitude, position.coords.longitude) ，这就是您的地图未呈现的原因。尝试 navigator.Geoloaction.getCurrentPosition... 或检查是否需要任何插件来获取用户地理定位。＆更愿意提供一些后备坐标。

this.lat = position.coords.latitude || "21.1610858";
this.long = position.coords.longitude || "79.0725101";

Google 地图问题 - Ionic 2

Google Map Issue - Ionic 2

google-maps

hybrid-mobile-app

ionic-framework

ionic2

angular