我在编码和PhoneGap时非常环保，所以请耐心等待。
我正在尝试在我的PhoneGap应用程序中加载自定义Google地图。地图加载但标记没有。我可以看到该应用程序正在获取我当前的位置以及连接到互联网。我的应用程序从在线数据库中获取标记。
<?xml version='1.0' encoding='utf-8'?>
<widget id="-----" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
<name>---</name>
<description>
--app.
</description>
<author email="---" href="----">
---
</author>
<preference name="permissions" value="none" />
<preference name="phonegap-version" value="3.6.3" />
<preference name="orientation" value="portrait" />
<preference name="target-device" value="universal" />
<preference name="fullscreen" value="true" />
<preference name="webviewbounce" value="true" />
<preference name="prerendered-icon" value="true" />
<preference name="stay-in-webview" value="false" />
<preference name="ios-statusbarstyle" value="black-opaque" />
<preference name="detect-data-types" value="true" />
<preference name="exit-on-suspend" value="false" />
<preference name="show-splash-screen-spinner" value="true" />
<preference name="auto-hide-splash-screen" value="true" />
<preference name="disable-cursor" value="false" />
<preference name="android-minSdkVersion" value="7" />
<preference name="android-installLocation" value="auto" />
<preference name="StatusBarOverlaysWebView" value="true" />
<preference name="StatusBarStyle" value="lightcontent" />
<gap:plugin name="com.phonegap.plugin.statusbar" version="1.1.0" />
<gap:plugin name="org.apache.cordova.battery-status" />
<gap:plugin name="org.apache.cordova.console" />
<gap:plugin name="org.apache.cordova.device" />
<gap:plugin name="org.apache.cordova.device-motion" />
<gap:plugin name="org.apache.cordova.device-orientation" />
<gap:plugin name="org.apache.cordova.dialogs" />
<gap:plugin name="org.apache.cordova.file" />
<gap:plugin name="org.apache.cordova.file-transfer" />
<gap:plugin name="org.apache.cordova.geolocation" />
<gap:plugin name="org.apache.cordova.globalization" />
<gap:plugin name="org.apache.cordova.inappbrowser" />
<gap:plugin name="org.apache.cordova.media" />
<gap:plugin name="org.apache.cordova.network-information" />
<gap:plugin name="org.apache.cordova.splashscreen" />
<gap:plugin name="org.apache.cordova.vibration" />
<icon src="res/icon/ios/icon3.png" />
<icon gap:platform="android" gap:qualifier="ldpi" src="res/icon/android/icon-36-ldpi.png" />
<icon gap:platform="android" gap:qualifier="mdpi" src="res/icon/android/icon-48-mdpi.png" />
<icon gap:platform="android" gap:qualifier="hdpi" src="res/icon/android/icon-72-hdpi.png" />
<icon gap:platform="android" gap:qualifier="xhdpi" src="res/icon/android/icon-96-xhdpi.png" />
<icon gap:platform="ios" height="57" src="res/icon/ios/icon-57.png" width="57" />
<icon gap:platform="ios" height="72" src="res/icon/ios/icon-72.png" width="72" />
<icon gap:platform="ios" height="114" src="res/icon/ios/icon-57-2x.png" width="114" />
<icon gap:platform="ios" height="144" src="res/icon/ios/icon-72-2x.png" width="144" />
<gap:splash gap:platform="android" gap:qualifier="port-ldpi" src="res/screen/android/screen-ldpi-portrait.png" />
<gap:splash gap:platform="android" gap:qualifier="port-mdpi" src="res/screen/android/screen-mdpi-portrait.png" />
<gap:splash gap:platform="android" gap:qualifier="port-hdpi" src="res/screen/android/screen-hdpi-portrait.png" />
<gap:splash gap:platform="android" gap:qualifier="port-xhdpi" src="res/screen/android/screen-xhdpi-portrait.png" />
<gap:splash gap:platform="ios" height="480" src="res/screen/ios/screen-iphone-portrait.png" width="320" />
<gap:splash gap:platform="ios" height="960" src="res/screen/ios/screen-iphone-portrait-2x.png" width="640" />
<gap:splash gap:platform="ios" height="1136" src="res/screen/ios/screen-iphone-portrait-568h-2x.png" width="640" />
<gap:splash gap:platform="ios" height="1024" src="res/screen/ios/screen-ipad-portrait.png" width="768" />
<gap:splash gap:platform="ios" height="768" src="res/screen/ios/screen-ipad-landscape.png" width="1024" />
<gap:splash gap:platform="winphone" src="res/screen/windows-phone/screen-portrait.jpg" />
<access origin="*" />
<plugin name="cordova-plugin-whitelist" version="1"/>
<allow-intent href="http://*/*"/>
<allow-intent href="https://*/*"/>
<allow-intent href="tel:*"/>
<allow-intent href="sms:*"/>
<allow-intent href="mailto:*"/>
<allow-intent href="geo:*"/>
<access origin="*" />
<access origin="*.google.com" />
<access origin="*.mywebsite.com" subdomains="true" />
<access origin="www.mywebsite.com/m/get_locations.php" />
<access origin="*.googleapis.com" />
<access origin="*.gstatic.com" />
<access origin="*.googleusercontent.com" />
<access origin="google.com" subdomains="true"/>
<access origin="googleapis.com" subdomains="true"/>
<access origin="gstatic.com" subdomains="true"/>
<access origin="googleusercontent.com" subdomains="true"/>
</widget>
这是地图的主要代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8" />
<!-- 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="width=device-width, initial-scale=1">
<script src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="javascript/bootstrap.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-transition.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<meta charset="utf-8">
<title>----</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=-----&libraries=places"></script>
<script type="text/javascript">
function makeRequest(url, callback) {
var request;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest(); // IE7+, Firefox, Chrome, Opera, Safari
} else {
request = new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5
}
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
callback(request);
}
}
request.open("GET", url, true);
request.send();
}
// This example adds a search box to a map, using the Google Place Autocomplete
// feature. People can enter geographical searches. The search box will return a
// pick list containing a mix of places and predicted search terms.
function initialize() {
infowindow = new google.maps.InfoWindow();
var initialLocation;
var markers = [];
var map = new google.maps.Map(document.getElementById('map-canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-37.926032, 145.098479),
new google.maps.LatLng(-38.229056, 145.779930));
map.fitBounds(defaultBounds);
var options = {enableHighAccuracy: true};
if(navigator.geolocation) {
var options = {enableHighAccuracy: true};
browserSupportFlag = true;
navigator.geolocation.getCurrentPosition(function(position, options) {
initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
map.setCenter(initialLocation);
}, function() {
handleNoGeolocation(browserSupportFlag);
});
}
// Browser doesn't support Geolocation
else {
browserSupportFlag = false;
handleNoGeolocation(browserSupportFlag);
}
function handleNoGeolocation(errorFlag) {
if (errorFlag == true) {
alert("Geolocation service failed, Please enable Geolocation on your browser or device.");
initialLocation = defaultBounds;
} else {
alert("Please enable Geolocation on your browser or device");
initialLocation = defaultBounds;
}
map.setCenter(initialLocation);
}
//Put location here
function displayLocation(location) {
var geocoder= new google.maps.Geocoder();
var content = '<div class="infoWindow"><strong>' + location.name + '</strong>'
+ '<br/>' + location.address + '<br/>' + '<a href="tel:' + location.phone +' " target="_blank" > '+ location.phone +' </a>'
+ '<br/>' + '<a href="' + location.web +' " target="_blank" > '+ location.web +' </a>' + '<br/>' + location.type + '</div>';
if (parseInt(location.lat) == 0) {
geocoder.geocode( { 'address': location.address }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var iconBase = '/img/marker.png';
var marker = new google.maps.Marker({
map: map,
size: new google.maps.Size(71, 71),
icon: iconBase,
position: results[0].geometry.location,
title: location.name
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(content);
infowindow.open(map,marker);
});
}
});
} else {
var position = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.lon));
var iconBase = '/img/marker.png';
var marker = new google.maps.Marker({
icon: iconBase,
map: map,
size: new google.maps.Size(71, 71),
position: position,
title: location.name
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(content);
infowindow.open(map,marker);
});
}
} //Ends display location
makeRequest('get_locations.php', function(data) {
var data = JSON.parse(data.responseText);
for (var i = 0; i < data.length; i++) {
displayLocation(data[i]);
}
});
// Create the search box and link it to the UI element.
var input = /** @type {HTMLInputElement} */(
document.getElementById('pac-input'));
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var searchBox = new google.maps.places.SearchBox(
/** @type {HTMLInputElement} */(input));
// [START region_getplaces]
// Listen for the event fired when the user selects an item from the
// pick list. Retrieve the matching places for that item.
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
var content = '<div class="infoWindow"><strong>' + location.name + '</strong>'
+ '<br/>' + location.address
+ '<br/>' + location.type + '</div>';
// For each place, get the icon, place name, and location.
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = {
url: '/img/marker.png',
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
var marker = new google.maps.Marker({
map: map,
size: new google.maps.Size(71, 71),
title: place.name,
position: place.geometry.location
});
markers.push(marker);
bounds.extend(place.geometry.location);
map.fitBounds(bounds);
}
}); //Ends add listener
// Bias the SearchBox results towards places that are within the bounds of the
// current map's viewport.
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
} //Ends init
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div data-role="page" id="fix">
<div data-role="header" class="header">
Search for pet accommodation in Australia!
<a data-icon="home" data-iconpos="notext" href="index.html" rel="external"></a>
</div>
<div id="home">
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map-canvas"></div>
<br><br>
<div id="scroll">
<marquee behavior="scroll" direction="left" bgcolor="#2ecc71" font-family= "Comic Sans MS" width="100%"><img src="img/paws1.gif" alt="paws" width="40" height="20"/> Please do not leave your pets unattended on a lead/leash <img src="img/paws1.gif" alt="paws" width="40" height="20"/> Gold Coast Spots - training for you and your dog, puppies to golden oldies! Call Sharon at 0410159026 mention Cruisin' pets for 5% discount!<img src="img/paws1.gif" alt="paws" width="40" height="20"/> </marquee>
</div>
</div>
非常感谢任何帮助。该代码适用于我的笔记本电脑和移动版本。该应用程序似乎是唯一的问题。
答案 0 :(得分：0)
尝试使用此代码并尝试在您的phonegap应用中打开。将其另存为.html文件，然后在您的应用中打开此页面。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Info windows</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">text</h1>'+
'<div id="bodyContent">'+
'<p><b>Some text</b>, text' +
'.</p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'text'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>