简体   繁体   English

Google Map问题-Ionic 2

[英]Google Map Issue - Ionic 2

Google map shows in the browser but when I run command ionic run android it build successfully and launch the app but everything works fine except Google map there are no errors in chrome://inspect it just says DEVICE READY FIRED AFTER 630 ms but no error for google map. 谷歌地图显示在浏览器中,但是当我运行命令ionic run android它可以成功构建并启动应用程序,但是除谷歌地图之外,其他一切都正常, chrome://inspect中没有错误,只是说DEVICE READY FIRED AFTER 630 ms对于谷歌地图。 I did register app on console.developers.google.com got the key and using it in www/index.html in the head but still no changes. 我确实在console.developers.google.com上注册了应用程序,并获得了密钥并在www/index.html中使用了它,但仍然没有任何更改。 Please help thank you. 请帮忙谢谢。 home.ts (Map function is inside of this file) 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);  

` `

Probably your map is not getting coordinates(position.coords.latitude, position.coords.longitude) , that's why your map is not rendering. 可能您的地图没有获得坐标(position.coords.latitude,position.coords.longitude),这就是为什么您的地图没有渲染。 try with navigator.Geoloaction.getCurrentPosition... or check if any plugin is required to get user geolocation. 请尝试使用navigator.Geoloaction.getCurrentPosition ...或检查是否需要任何插件才能获得用户地理位置信息。 & prefer to give some fallback coordinates. 并希望提供一些后备坐标。

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM