javascript - Phonegap - iOS - 谷歌地图 "Sorry no imagery here"

标签 javascript ios cordova google-maps phonegap-plugins

在浏览器中运行以下代码时没有问题。当通过 Phonegap 运行时，除了 map 之外，一切都很好。我看到一切正常，除了 map 是灰色的并且有文字“抱歉，我们这里没有图像。”

缩放设置为 4，所以我看不出有什么问题。我也包含了 phonegap 的 config.xml。下面她将 url 列入白名单，并允许在 iOS 平台上访问 origin 到 google。

非常感谢任何帮助! 

<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() {
		
 // 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="support@phonegap.com" 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/icon@2x.png" 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/icon-40@2x.png" 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/icon-50@2x.png" 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/icon-60@2x.png" width="120" />
        <icon height="180" platform="ios" src="www/res/icon/ios/icon-60@3x.png" 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/icon-72@2x.png" 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/icon-76@2x.png" 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/icon-small@2x.png" width="58" />
        <icon height="87" platform="ios" src="www/res/icon/ios/icon-small@3x.png" width="87" />
        <splash height="1136" platform="ios" src="www/res/screen/ios/Default-568h@2x~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/Default-Landscape@2x~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/Default-Portrait@2x~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/Default@2x~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>

最佳答案 

<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *; img-src * data: 'unsafe-inline'">

请添加上面的元标记。

关于javascript - Phonegap - iOS - 谷歌地图 "Sorry no imagery here"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41795529/

上一篇：ios - Xamarin iOS : Filtering out the FileType show on Document Picker

下一篇：ios - Swift 3 - 动画序列停止时执行Segue

相关文章：

javascript - 如何将错误消息从 meteor 服务器传递到客户端

javascript - 弃用的 jQuery 回调 - 澄清？

javascript - React-Native:访问另一个类中的 TextField 值

iOS:本地化的 UILabel 文本未对齐

javascript - 在 Cordova 中更改项目目录结构

javascript - 为自动分频器设置自定义属性

android - PhoneGap-联系人未加载

javascript - 无法理解这段JS代码【数组和过滤器】

ios - Swift 3 : how to convert a UTF8 data stream (1, 每个字符 2,3 或 4 个字节)到字符串？

ios - 快速创建多部分主体请求

©2024 IT工具网  联系我们