谷歌地图不会在科尔多瓦加载 [英] Google map wont load in Cordova

查看：93
本文介绍了谷歌地图不会在科尔多瓦加载的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

目前我正在尝试构建一个应该使用Google地图的科尔多瓦应用程序，以便我可以显示路线和内容。出于测试的原因，我也有一个服务器上的代码，一切都在那里完美的工作，地图加载可能。但是，当我将项目转换为Cordova应用程序时，谷歌地图不会加载，我不知道为什么。



这就是我在index.html中的JS代码的样子： 

 <！DOCTYPE html> 
< html> 
< head> 
< meta name =viewportcontent =width = device-width，initial-scale = 1> 
< meta http-equiv =X-UA-Compatiblecontent =IE = edge> 
< meta charset =utf-8> 
< title> -----< / title> 
< / head> 
 
 <！ -  jQuery版本1.11.0  - > 
< script type =application / javascriptsrc =./ js / jquery-1.11.0.js>< / script> 
 
 <！ -  Google Maps API  - > 
< script type =text / javascript
 src =http://maps.googleapis.com/maps/api/js?key=AIzaSyCr0wsx4a5_o03hPTpC_CtRARjzCnOEGX4&sensor=false&libraries=places> ; 
< / script> 
 
 <！ - 样式CSS  - > 
< link href =./ css / style.css =stylesheet> 
 
< script> 
 
 
 var directionsDisplay; 
 var directionsService = new google.maps.DirectionsService（）; 
 var map; 
 
 var isMobile = {
 Android：function（）{
 return navigator.userAgent.match（/ Android / i）; 
}，
 BlackBerry：function（）{
 return navigator.userAgent.match（/ BlackBerry / i）; 
}，
 iOS：function（）{
 return navigator.userAgent.match（/ iPhone | iPad | iPod / i）; 
}，
 Opera：function（）{
 return navigator.userAgent.match（/ Opera Mini / i）; 
}，
 Windows：function（）{
 return navigator.userAgent.match（/ IEMobile / i）; 
}，
 any：function（）{
 return（isMobile.Android（）|| isMobile.BlackBerry（）|| isMobile.iOS（）|| isMobile.Opera（）|| isMobile.Windows（））; 
} 
}; 
 
 if（isMobile.any（））{
 
（function（global）{
use strict; 
 
 function onDeviceReady （）{
 document.addEventListener（online，onOnline，false）; 
 document.addEventListener（resume，onResume，false）; 
 loadMapsApi（）; 
} 
 
函数onOnline（）{
 loadMapsApi（）; 
} 
 
函数onResume（）{
 loadMapsApi（）; 
} 
 
函数loadMapsApi（）{
 if（navigator.connection.type === Connection.NONE || google.maps）{
 return; 
} 
 $ .getScript（'http://maps.googleapis.com/maps/api/js?key=AIzaSyCr0wsx4a5_o03hPTpC_CtRARjzCnOEGX4&sensor=false&libraries=places'）; 
} 
 
 global.onMapsApiLoaded = function（）{
 // Maps API已加载并可以使用
 var map = new google.maps.Map（document.getElementById（map），{} ）; 
}; 
 
 document.addEventListener（deviceready，onDeviceReady，initialize）; 
}）（window）; 
 alert（）; 
 
 
 
函数initialize（）{
 var styles = [{featureType：water，elementType：all，stylers ：[{ 色相： ＃76aee3}，{ 饱和：38}，{ 亮度： -  11}，{ 能见度： 上}]}，{ 类型特征：道路。高速公路， 元素类型： 所有， 造型器：[{ 色相： ＃8dc749}，{ 饱和度： -  47}，{ 轻： -  17}，{ 可见性： 上}]}，{ 类型特征： poi.park， 的ElementType： 所有， 造型器：[{ 色相： ＃c6e3a4}，{ 饱和：17}， { 亮度： -  2}，{ 能见度： 上}]}，{ 类型特征： road.arterial， 的ElementType： 所有， 造型器：[{ 色相： #CCCCCC}，{ 饱和： -  100}，{ 亮度：13}，{ 能见度： 上}]}，{ 类型特征： administrative.land_parcel， 的ElementType： 所有， 造型器：[{ 色相： ＃5f5855}，{ 饱和：6}，{ 亮度： -  31}，{ 能见度： 上}]}，{ 类型特征： road.local， 的ElementType： 所有， 造型器：[{ 色相： ＃FFFFFF}，{ 饱和： -  100}，{ 亮度：100} ，{ 能见度： 简化}]}，{ 类型特征： 水， 的ElementType： 所有， 造型器：[]}]; 
 var styledMap = new google.maps.StyledMapType（styles，{name：}）; 
 
 directionsDisplay = new google.maps.DirectionsRenderer（{polylineOptions：{
 strokeColor：red
}}）; 
 var mapOptions = {
 center：new google.maps.LatLng（47.6826215,13.0984208,17），
 zoom：15，
 disableDefaultUI：true，
 mapTypeControlOptions： {
 mapTypeIds：[google.maps.MapTypeId.ROADMAP，'map_style'] 
} 
}; 
 map = new google.maps.Map（document.getElementById（'map-canvas'），mapOptions）; 
 map.mapTypes.set（'map_style'，styledMap）; 
 map.setMapTypeId（'map_style'）; 
 map.setOptions（{styles：styles}）; 
 
 var defaultBounds = new google.maps.LatLngBounds（
 new google.maps.LatLng（47.67052,13.114028），
 google.maps.LatLng（47.6910273,13.1153865）） ; 
 
 var options = {
界限：defaultBounds，
}; 
 
 var start_input = document.getElementById（'start'）; 
 start_autocomplete = new google.maps.places.Autocomplete（start_input，options）; 
 var end_input = document.getElementById（'end'）; 
 end_autocomplete = new google.maps.places.Autocomplete（end_input，options）; 
 
 directionsDisplay.setMap（map）; 
} 
 
函数calcRoute（）{
 var start = document.getElementById（'start'）。value; 
 var end = document.getElementById（'end'）。value; 
 var request = {
 origin：start，
 destination：end，
 travelMode：google.maps.TravelMode.DRIVING 
}; 
 directionsService.route（request，function（response，status）{
 if（status == google.maps.DirectionsStatus.OK）{
 directionsDisplay.setDirections（response）; 
 } 
}）; 
} 
 
 google.maps.event.addDomListener（window，'load'，initialize）; 
 
< / script>


解决方案

工作：



相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆