Google地图不会在Cordova中加载
目前我正在尝试构建一个应该使用谷歌地图的Cordova应用程序，这样我就可以显示路线和内容。出于测试原因，我也在服务器上有代码，一切都在那里工作得很好，地图正在加载。但是，当我将项目转换为Cordova应用程序时，谷歌地图不会加载，我不知道为什么。
这就是我在index.html中的JS代码的样子：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>-----</title>
</head>
<!-- jQuery Version 1.11.0 -->
<script type="application/javascript" src="./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>
<!-- Style CSS -->
<link href="./css/style.css" rel="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();
}
function onOnline () {
loadMapsApi();
}
function onResume () {
loadMapsApi();
}
function 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 loaded and ready to be used.
var map = new google.maps.Map(document.getElementById("map"), {});
};
document.addEventListener("deviceready", onDeviceReady, initialize);
})(window);
alert("");
}
function initialize() {
var styles = [{"featureType":"water","elementType":"all","stylers":[{"hue":"#76aee3"},{"saturation":38},{"lightness":-11},{"visibility":"on"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"hue":"#8dc749"},{"saturation":-47},{"lightness":-17},{"visibility":"on"}]},{"featureType":"poi.park","elementType":"all","stylers":[{"hue":"#c6e3a4"},{"saturation":17},{"lightness":-2},{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"all","stylers":[{"hue":"#cccccc"},{"saturation":-100},{"lightness":13},{"visibility":"on"}]},{"featureType":"administrative.land_parcel","elementType":"all","stylers":[{"hue":"#5f5855"},{"saturation":6},{"lightness":-31},{"visibility":"on"}]},{"featureType":"road.local","elementType":"all","stylers":[{"hue":"#ffffff"},{"saturation":-100},{"lightness":100},{"visibility":"simplified"}]},{"featureType":"water","elementType":"all","stylers":[]}];
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),
new google.maps.LatLng(47.6910273,13.1153865));
var options = {
bounds: 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);
}
function 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>
2 个答案:
答案 0 :(得分：2)
可能有几个原因导致您发布的示例无效：
-
Google地图的加载事件：
google.maps.event.addDomListener(window, 'load', initialize);马上似乎是一个好主意，但即使我在 deviceready 中使用了domlistener，它也无效。但这可能是cordova-apps以异步方式加载谷歌库的更好解决方案：
function loadAsynchronousScript() { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' +'&signed_in=true&callback=initialize'; document.body.appendChild(script); }我测试过您甚至可以在 deviceready 中单独调用初始化，但使用 loadAsynchronousScript 会更好，因为它可以执行domlistener的工作为你所以它知道库何时就绪（Param：＆amp; callback = ）。在上面的示例中， loadAsynchronousScript 加载标准库，但您也可以使用具体的键控库替换它。
参考：https://developers.google.com/maps/documentation/javascript/examples/map-simple-async
-
多次插入Google地图错误：
在您的示例中，您检查库是否存在，但我甚至遇到了问题，因此在我的示例中，我省略了index.html中的脚本标记：
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=...."></script>但在我的例子中，无论如何都不需要这个标签。
-
我没有看到你称之为地图的div-tag（id：'map-canvas'）。但可能是我忽略了它。我也省略了calcRoute函数，因为你没有在任何地方调用它，它不是原始问题的一部分。
不幸的是我更改了你的一些代码片段，它可以在我的 android -emulator中运行，但是我无法在IOS-Devices上测试它：
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
document.addEventListener("online", onOnline, false);
document.addEventListener("resume", onResume, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicity call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
console.log('Received Event: ' + id);
if(isMobile.any()) {
if(googleLibExists()){
initialize();
}
else{
loadMapsApi();
}
}
}
};
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();
}
};
function googleLibExists(){
return typeof(google) != "undefined" && google.maps;
}
function loadAsynchronousScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://maps.googleapis.com/maps/api/js?key=AIzaSyCr0wsx4a5_o03hPTpC_CtRARjzCnOEGX4&sensor=false&libraries=places&callback=initialize';
document.body.appendChild(script);
}
function loadMapsApi () {
if(navigator.connection.type === Connection.NONE) {
alert('google maps library not loaded');
return;
}
if(!googleLibExists()){
loadAsynchronousScript();
}
}
function onOnline () {
loadMapsApi();
}
function onResume () {
loadMapsApi();
}
var directionsDisplay;
var map;
function initialize() {
console.log('map init');
var styles = [{"featureType":"water","elementType":"all","stylers":[{"hue":"#76aee3"},{"saturation":38},{"lightness":-11},{"visibility":"on"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"hue":"#8dc749"},{"saturation":-47},{"lightness":-17},{"visibility":"on"}]},{"featureType":"poi.park","elementType":"all","stylers":[{"hue":"#c6e3a4"},{"saturation":17},{"lightness":-2},{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"all","stylers":[{"hue":"#cccccc"},{"saturation":-100},{"lightness":13},{"visibility":"on"}]},{"featureType":"administrative.land_parcel","elementType":"all","stylers":[{"hue":"#5f5855"},{"saturation":6},{"lightness":-31},{"visibility":"on"}]},{"featureType":"road.local","elementType":"all","stylers":[{"hue":"#ffffff"},{"saturation":-100},{"lightness":100},{"visibility":"simplified"}]},{"featureType":"water","elementType":"all","stylers":[]}];
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),
new google.maps.LatLng(47.6910273,13.1153865));
var options = {
bounds: 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);
}<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<title>Hello World</title>
</head>
<body>
<h1>Map:</h1>
<div id="map-canvas" style="width:200px; height:200px"></div>
<script type="application/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
证据图片：
答案 1 :(得分：1)
对于这些任务，我会尝试使用cordova插件来集成本机sdk。这是一个谷歌地图：
您还可以在以下位置搜索其他插件：
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？