0
在瀏覽器中運行以下代碼時，沒有問題。當通過Phonegap運行時，除了地圖外，一切都很好。除了地圖是灰色的並且有文字「我很抱歉，我們在這裏沒有圖像」之外，我看到了正在進行的工作。Phonegap - iOS - Google地圖「對不起，沒有圖像」
縮放設置爲4，所以我沒有看到這個問題。我也從phonegap中包含了config.xml。下面她將網址列入白名單，並允許在iOS平臺上訪問谷歌。
任何幫助，非常感謝！
<preference name="OpenAllWhitelistURLsInWebView" value="true" />
<platform name="ios">
<access origin="*.google.*" />
<access origin="*" />
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<!DOCTYPE html>
<head>
<link rel="icon" href="brew-marker.png" >
<title>BrewsLocal - Find More Local Breweries</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDUIshgyijJP94STQUaMirmDj5eAVx-BuA&callback=initMap" async defer></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
Brewery: {
icon: 'brew-marker.png',
anchor: new google.maps.Point(30,0),
scale: 1
},
Brewpub: {
icon: 'pub-marker.png',
anchor: new google.maps.Point(30,0),
scale: 1
}
};
var gmarkers1 = [];
function initialize() {
\t \t
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
map.setCenter(pos);
});
} else {
alert("Browser Says No");
}
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(37.541458, -77.446578),
zoom: 4,
mapTypeId: 'roadmap',
disableDefaultUI: true,
gestureHandling: 'greedy'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("http://brewslocal.com/phpsqlajax_genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var id = markers[i].getAttribute("id");
var address = markers[i].getAttribute("address");
var lat = markers[i].getAttribute("lat");
var lng = markers[i].getAttribute("lng");
var mon = markers[i].getAttribute("monday");
var tue = markers[i].getAttribute("tuesday");
var wed = markers[i].getAttribute("wednesday");
var thur = markers[i].getAttribute("thursday");
var fri = markers[i].getAttribute("friday");
var sat = markers[i].getAttribute("saturday");
var sun = markers[i].getAttribute("sunday");
var facebook = markers[i].getAttribute("facebook");
var twitter = markers[i].getAttribute("twitter");
var instagram = markers[i].getAttribute("instagram");
var website = markers[i].getAttribute("website");
var type = markers[i].getAttribute("type");
var logo = markers[i].getAttribute("logo");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var day;
switch (new Date().getDay()) {
case 0:
day = markers[i].getAttribute("sunday");
break;
case 1:
day = markers[i].getAttribute("monday");
break;
case 2:
day = markers[i].getAttribute("tuesday");
break;
case 3:
day = markers[i].getAttribute("wednesday");
break;
case 4:
day = markers[i].getAttribute("thursday");
break;
case 5:
day = markers[i].getAttribute("friday");
break;
case 6:
day = markers[i].getAttribute("saturday");
}
if(day != "closed") {
openStatus = "Open: ";
}
else {
openStatus = "Closed Today";
day = "";
}
var html = "<div class='infoblock'><div class='smallblock'><img src='" + logo + "'/></div><div class='largeblock'><h2>" + name + "</h2><h3><strong>" + openStatus + "</strong>" + day + "</h3><a href='http://www.google.com/maps/?q=" + point
+ "' target='_blank' '>" + address + "</a></div><div class='socialblock'><a class='socialicon' target='_blank' href='" + facebook + "'><img src='https://maxcdn.icons8.com/Color/PNG/96/Social_Networks/facebook-96.png'/></a><a class='socialicon' target='_blank' href='" + twitter + "'><img src='https://maxcdn.icons8.com/Color/PNG/96/Social_Networks/twitter-96.png'/></a><a class='socialicon' target='_blank' href='" + instagram + "'><img src='https://maxcdn.icons8.com/Color/PNG/96/Social_Networks/instagram-96.png'/></a><a class='socialicon' target='_blank' href='" + website + "'><img src='https://maxcdn.icons8.com/Color/PNG/96/Network/domain-96.png' /></a></div></div>";
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
type: type,
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(0, 0),
shadow: icon.shadow
});
gmarkers1.push(markers);
filterMarkers = function (type) {
for (i = 0; i < markers.length; i++) {
marker = gmarkers1[i];
// If is same category or category not picked
if (marker.type == type || type.length === 0) {
marker.setVisible(true);
}
// Categories don't match
else {
marker.setVisible(false);
}
}
}
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map,marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('http://brewslocal.com/phpsqlajax_genxml.php') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
</head>
<body onload="initialize()">
<div class="menu-icon">
<img src="menu-button.png" title="Menu" width="100">
</div>
<div class="close-icon">
<img src="close-button.png" title="Multiply" width="100">
</div>
<div class="filter-icon">
<img src="search-button.png" title="Search" width="96">
</div>
<div class="main-menu">
<div class="logo-main-menu">
<img src="main-logo.png"/>
</div>
<ul class="nav-menu-main">
<li><a href="" class="menu-button">
Search A Location</a>
</li>
<li><a href="" class="menu-button">
View Breweries</a>
</li>
<li class="menu-button push-second">
Map Legend <span class="glyphicon glyphicon-chevron-down" style="height: 100px; width: 100px; color: #fff;"></span>
<ul class="second-menu">
<li><a href="" class="menu-button">
<img src="brew-marker.png"/>Brewery</a>
</li>
<li><a href="" class="menu-button">
<img src="pub-marker.png" />Brewpub</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="overlay-background">
</div>
<div class="search-box">
<input type="text" placeholder="Enter A Location" /><div class="search-image"><a href=""><img src="/near-button.png" title="Near Me" width="96"></a></div>
</div>
<div id="map"></div>
<div class="show-brewery">
<div class="brewery-logo" id="breweryimage">
</div>
</div>
</div>
<script>
$(document).ready(function(){
$(".menu-icon").click(function(){
$("#map").animate({"left": "60%"},700);
$(".main-menu").animate({"display": "block"},700);
$(".menu-icon").animate({"left": "60%","top": "-200px"},700);
$(".close-icon").animate({"top": "25px"},700);
$(".filter-icon").animate({"right": "-135px"},700);
});
});
$(document).ready(function(){
$(".close-icon").click(function(){
$("#map").animate({"left": "0px"},700);
$(".main-menu").animate({"display": "none"},700);
$(".menu-icon").animate({"left": "15px","top": "25px"},700);
$(".close-icon").animate({"top": "-200px"},700);
$(".filter-icon").animate({"right": "15px"},700);
});
});
$(document).ready(function(){
$(".push-second").click(function(){
$(".second-menu").slideToggle();
});
});
$(document).ready(function(){
$(".overlay-background").click(function(){
$(".search-box").animate({"top": "-200px"},500);
$(".overlay-background").delay(200).slideToggle();
});
});
$(document).ready(function(){
$(".filter-icon").click(function(){
$(".overlay-background").slideToggle(500);
$(".search-box").delay(100).animate({"top": "50%"},500);
});
});
</script>
</body>
</html><?xml version='1.0' encoding='utf-8'?>
<widget id="com.phonegap.simpleApp" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
<name>Simple App</name>
<description>
Hello World sample application that responds to the deviceready event.
</description>
<author email="[email protected]" href="http://phonegap.com">
PhoneGap Team
</author>
<content src="index.html" />
<preference name="DisallowOverscroll" value="true" />
<preference name="OpenAllWhitelistURLsInWebView" value="true" />
<preference name="android-minSdkVersion" value="14" />
<plugin name="cordova-plugin-battery-status" source="npm" spec="~1.1.1" />
<plugin name="cordova-plugin-camera" source="npm" spec="~2.1.1" />
<plugin name="cordova-plugin-media-capture" source="npm" spec="~1.2.0" />
<plugin name="cordova-plugin-console" source="npm" spec="~1.0.2" />
<plugin name="cordova-plugin-contacts" source="npm" spec="~2.0.1" />
<plugin name="cordova-plugin-device" source="npm" spec="~1.1.1" />
<plugin name="cordova-plugin-device-motion" source="npm" spec="~1.2.0" />
<plugin name="cordova-plugin-device-orientation" source="npm" spec="~1.0.2" />
<plugin name="cordova-plugin-dialogs" source="npm" spec="~1.2.0" />
<plugin name="cordova-plugin-file" source="npm" spec="~4.1.1" />
<plugin name="cordova-plugin-file-transfer" source="npm" spec="~1.5.0" />
<plugin name="cordova-plugin-geolocation" source="npm" spec="~2.1.0" />
<plugin name="cordova-plugin-globalization" source="npm" spec="~1.0.3" />
<plugin name="cordova-plugin-inappbrowser" source="npm" spec="~1.3.0" />
<plugin name="cordova-plugin-media" source="npm" spec="~2.2.0" />
<plugin name="cordova-plugin-network-information" source="npm" spec="~1.2.0" />
<plugin name="cordova-plugin-splashscreen" source="npm" spec="~3.2.1" />
<plugin name="cordova-plugin-statusbar" source="npm" spec="~2.1.2" />
<plugin name="cordova-plugin-vibration" source="npm" spec="~2.1.0" />
<plugin name="cordova-plugin-whitelist" source="npm" spec="~1.2.1" />
<platform name="android">
<icon density="ldpi" src="www/res/icon/android/drawable-ldpi-icon.png" />
<icon density="mdpi" src="www/res/icon/android/drawable-mdpi-icon.png" />
<icon density="hdpi" src="www/res/icon/android/drawable-hdpi-icon.png" />
<icon density="xhdpi" src="www/res/icon/android/drawable-xhdpi-icon.png" />
<icon density="xxhdpi" src="www/res/icon/android/drawable-xxhdpi-icon.png" />
<icon density="xxxhdpi" src="www/res/icon/android/drawable-xxxhdpi-icon.png" />
<splash density="land-ldpi" src="www/res/screen/android/drawable-land-ldpi-screen.png" />
<splash density="land-mdpi" src="www/res/screen/android/drawable-land-mdpi-screen.png" />
<splash density="land-hdpi" src="www/res/screen/android/drawable-land-hdpi-screen.png" />
<splash density="land-xhdpi" src="www/res/screen/android/drawable-land-xhdpi-screen.png" />
<splash density="land-xxhdpi" src="www/res/screen/android/drawable-land-xxhdpi-screen.png" />
<splash density="land-xxxhdpi" src="www/res/screen/android/drawable-land-xxxhdpi-screen.png" />
<splash density="port-ldpi" src="www/res/screen/android/drawable-port-ldpi-screen.png" />
<splash density="port-mdpi" src="www/res/screen/android/drawable-port-mdpi-screen.png" />
<splash density="port-hdpi" src="www/res/screen/android/drawable-port-hdpi-screen.png" />
<splash density="port-xhdpi" src="www/res/screen/android/drawable-port-xhdpi-screen.png" />
<splash density="port-xxhdpi" src="www/res/screen/android/drawable-port-xxhdpi-screen.png" />
<splash density="port-xxxhdpi" src="www/res/screen/android/drawable-port-xxxhdpi-screen.png" />
</platform>
<platform name="ios">
<icon height="57" platform="ios" src="www/res/icon/ios/icon.png" width="57" />
<icon height="114" platform="ios" src="www/res/icon/ios/[email protected]" width="114" />
<icon height="40" platform="ios" src="www/res/icon/ios/icon-40.png" width="40" />
<icon height="80" platform="ios" src="www/res/icon/ios/[email protected]" width="80" />
<icon height="50" platform="ios" src="www/res/icon/ios/icon-50.png" width="50" />
<icon height="100" platform="ios" src="www/res/icon/ios/[email protected]" width="100" />
<icon height="60" platform="ios" src="www/res/icon/ios/icon-60.png" width="60" />
<icon height="120" platform="ios" src="www/res/icon/ios/[email protected]" width="120" />
<icon height="180" platform="ios" src="www/res/icon/ios/[email protected]" width="180" />
<icon height="72" platform="ios" src="www/res/icon/ios/icon-72.png" width="72" />
<icon height="144" platform="ios" src="www/res/icon/ios/[email protected]" width="144" />
<icon height="76" platform="ios" src="www/res/icon/ios/icon-76.png" width="76" />
<icon height="152" platform="ios" src="www/res/icon/ios/[email protected]" width="152" />
<icon height="29" platform="ios" src="www/res/icon/ios/icon-small.png" width="29" />
<icon height="58" platform="ios" src="www/res/icon/ios/[email protected]" width="58" />
<icon height="87" platform="ios" src="www/res/icon/ios/[email protected]" width="87" />
<splash height="1136" platform="ios" src="www/res/screen/ios/[email protected]~iphone.png" width="640" />
<splash height="1334" platform="ios" src="www/res/screen/ios/Default-667h.png" width="750" />
<splash height="2208" platform="ios" src="www/res/screen/ios/Default-736h.png" width="1242" />
<splash height="1242" platform="ios" src="www/res/screen/ios/Default-Landscape-736h.png" width="2208" />
<splash height="1536" platform="ios" src="www/res/screen/ios/[email protected]~ipad.png" width="2048" />
<splash height="768" platform="ios" src="www/res/screen/ios/Default-Landscape~ipad.png" width="1024" />
<splash height="2048" platform="ios" src="www/res/screen/ios/[email protected]~ipad.png" width="1536" />
<splash height="1024" platform="ios" src="www/res/screen/ios/Default-Portrait~ipad.png" width="768" />
<splash height="960" platform="ios" src="www/res/screen/ios/[email protected]~iphone.png" width="640" />
<splash height="480" platform="ios" src="www/res/screen/ios/Default~iphone.png" width="320" />
</platform>
<platform name="wp8">
<icon height="99" platform="wp8" src="www/res/icon/wp8/ApplicationIcon.png" width="99" />
<icon height="159" platform="wp8" src="www/res/icon/wp8/Background.png" width="159" />
<splash height="1280" platform="wp8" src="www/res/screen/wp8/screen-portrait.jpg" width="768" />
</platform>
<platform name="windows">
<icon height="150" platform="windows" src="www/res/icon/windows/Square150x150Logo.scale-100.png" width="150" />
<icon height="30" platform="windows" src="www/res/icon/windows/Square30x30Logo.scale-100.png" width="30" />
<icon height="50" platform="windows" src="www/res/icon/windows/StoreLogo.scale-100.png" width="50" />
<splash height="300" platform="windows" src="www/res/screen/windows/SplashScreen.scale-100.png" width="620" />
<icon height="120" platform="windows" src="www/res/icon/windows/StoreLogo.scale-240.png" width="120" />
<icon height="44" platform="windows" src="www/res/icon/windows/Square44x44Logo.scale-100.png" width="44" />
<icon height="106" platform="windows" src="www/res/icon/windows/Square44x44Logo.scale-240.png" width="106" />
<icon height="70" platform="windows" src="www/res/icon/windows/Square70x70Logo.scale-100.png" width="70" />
<icon height="71" platform="windows" src="www/res/icon/windows/Square71x71Logo.scale-100.png" width="71" />
<icon height="170" platform="windows" src="www/res/icon/windows/Square71x71Logo.scale-240.png" width="170" />
<icon height="360" platform="windows" src="www/res/icon/windows/Square150x150Logo.scale-240.png" width="360" />
<icon height="310" platform="windows" src="www/res/icon/windows/Square310x310Logo.scale-100.png" width="310" />
<icon height="150" platform="windows" src="www/res/icon/windows/Wide310x150Logo.scale-100.png" width="310" />
<icon height="360" platform="windows" src="www/res/icon/windows/Wide310x150Logo.scale-240.png" width="744" />
<splash height="1920" platform="windows" src="www/res/screen/windows/SplashScreenPhone.scale-240.png" width="1152" />
</platform>
<access origin="*" />
<platform name="android">
<access origin="*" />
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<access origin="*.google.*" />
<access origin="*" />
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<access origin="*" />
</widget>