Карта Google на моем веб-сайте показывает серую область после увеличения и уменьшения масштаба (проблема видна только на Iphone и Ipad) - PullRequest
Новая
       0

Карта Google на моем веб-сайте показывает серую область после увеличения и уменьшения масштаба (проблема видна только на Iphone и Ipad)

0 голосов
/ 17 июня 2020

Я внедрил карты Google на своем веб-сайте, и все ключи API верны.

После увеличения или уменьшения изображение карты Google начинает мерцать, а на

* 1004 появляются частичные квадратные серые плитки *изображение. Это странно, поскольку эта проблема не возникает на других устройствах, кроме Iphone и Ipad.

Иногда, когда я вижу карту Google в вертикальном виде, она работает нормально, пока я не переключу экран на

горизонтальный вид или это бывает с обоими видами и наоборот .. 

defined( 'ABSPATH' ) || exit;
?>
<div id="aw-custom-map">

    <h4 style="display:inline-block;"><?php esc_html_e( 'Pin Address', 'woocommerce' ); ?></h4>
    <button type="button" style="display:inline-block;" id="get_location">Get My Location</button>
 <div id="map"></div>

 </div>
<div class="woocommerce-billing-fields">
    <?php if ( wc_ship_to_billing_address_only() && WC()->cart->needs_shipping() ) : ?>
        <h3><?php esc_html_e( 'Billing &amp; Shipping', 'woocommerce' ); ?></h3>
    <?php else : ?>
        <h3><?php esc_html_e( 'Billing details', 'woocommerce' ); ?></h3>
    <?php endif; ?>
    <?php do_action( 'woocommerce_before_checkout_billing_form', $checkout ); ?>
    <div class="woocommerce-billing-fields__field-wrapper">

        <?php
        $fields = $checkout->get_checkout_fields( 'billing' );
        foreach ( $fields as $key => $field ) {

            woocommerce_form_field( $key, $field, $checkout->get_value( $key ) );

        }
        ?>
    </div>
    <?php do_action( 'woocommerce_after_checkout_billing_form', $checkout ); ?>
</div>
<?php if ( ! is_user_logged_in() && $checkout->is_registration_enabled() ) : ?>
    <div class="woocommerce-account-fields">
        <?php if ( ! $checkout->is_registration_required() ) : ?>
            <p class="form-row form-row-wide create-account">
                <label class="woocommerce-form__label woocommerce-form__label-for-checkbox checkbox">
                    <input class="woocommerce-form__input woocommerce-form__input-checkbox input-checkbox" id="createaccount" <?php checked( ( true === $checkout->get_value( 'createaccount' ) || ( true === apply_filters( 'woocommerce_create_account_default_checked', false ) ) ), true ); ?> type="checkbox" name="createaccount" value="1" /> <span><?php esc_html_e( 'Create an account?', 'woocommerce' ); ?></span>
                </label>
            </p>
        <?php endif; ?>
        <?php do_action( 'woocommerce_before_checkout_registration_form', $checkout ); ?>
        <?php if ( $checkout->get_checkout_fields( 'account' ) ) : ?>
            <div class="create-account">
                <?php foreach ( $checkout->get_checkout_fields( 'account' ) as $key => $field ) : ?>
                    <?php woocommerce_form_field( $key, $field, $checkout->get_value( $key ) ); ?>
                <?php endforeach; ?>
                <div class="clear"></div>
            </div>
        <?php endif; ?>
        <?php do_action( 'woocommerce_after_checkout_registration_form', $checkout ); ?>
    </div>
<?php endif; ?>
<input type="hidden" id="checkout-check" value="false" name="checkout_check"/>
<input type="hidden" id="checkout-lat"  name="checkout_lat"/>
<input type="hidden" id="checkout-lng"  name="checkout_lng"/>
<style>
     #map {
        width: 100%;
        height: 350px;
      }
</style>
<?php
$id = get_option( 'woocommerce_checkout_page_id' );
$map = get_field('map_location');
$distance = get_field('allowed_distance')?get_field('allowed_distance'):15;
$error = get_field('error_message')?get_field('error_message'):'Sorry Delivery not avalible at this location';
?>
<script>
 var marker = null;

    jQuery(document).ready(function(){
        setTimeout(function(){
            jQuery("#address_details_field").after(jQuery("#aw-custom-map"));
        },10);

    var map, infoWindow;
    var geocoder = new google.maps.Geocoder();

    var lat = <?= $map?$map['lat']:25.326017; ?>;
    var lng = <?= $map?$map['lng']:51.524358; ?>;
    var zoom = <?= $map?$map['zoom']:6; ?>;

        mapOptions = {
            center: {lat: lat, lng: lng},
            zoom: zoom,
            streetViewControl: false,
        };

        map = new google.maps.Map(document.getElementById('map'), mapOptions);

        infoWindow = new google.maps.InfoWindow

        var autocomplete = new google.maps.places.Autocomplete(jQuery("#billing_address_1")[0]);

         //autocomplete.bindTo("bounds", map);    
         // autocomplete.setFields(
         //   ["address_components", "geometry", "icon", "name"]);

             autocomplete.addListener("place_changed", function() {

                 var place = autocomplete.getPlace();

                 if(marker){
                    marker.setMap(null);
                    marker = null;
                 }

                  marker = new google.maps.Marker({
                  map: map,
                  anchorPoint: new google.maps.Point(0, -29)

                 });

         if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);

          } else {
            map.setCenter(place.geometry.location);
            map.setZoom(17);

          }

          marker.setPosition(place.geometry.location);
          marker.setVisible(true);

          console.log(place.geometry.location);
          var pizza_min_dis = <?= $distance?>;

          var origin1 = {lat:lat,lng:lng};

          var destinationA = {lat:place.geometry.location.lat(),lng:place.geometry.location.lng()};

        jQuery("#checkout-lat").val(place.geometry.location.lat());
        jQuery("#checkout-lng").val(place.geometry.location.lng());
        var service = new google.maps.DistanceMatrixService;
        service.getDistanceMatrix({
          origins: [origin1],
          destinations: [destinationA],
          travelMode: 'DRIVING',
          unitSystem: google.maps.UnitSystem.METRIC,
          avoidHighways: false,
          avoidTolls: false
        }, function(response, status) {
          if (status !== 'OK') {
            alert('Error was: ' + status);
          } else {

            var originList = response.originAddresses;
            var destinationList = response.destinationAddresses;

            for (var i = 0; i < originList.length; i++) {
              var results = response.rows[i].elements;
              for (var j = 0; j < results.length; j++) {

                  console.log(results);
                  var km = results[j].distance.value;

                  km = km / 1000;

                  if(km <= pizza_min_dis){

                      jQuery("#checkout-check").val("true");

                  }else{
                       jQuery("#checkout-check").val("false");
                       alert('<?= $error?>');

                  }
                }
              }
            }
          });       
        });

             jQuery("#get_location").click(function(){

                 if (navigator.geolocation) {
                  navigator.geolocation.getCurrentPosition(function(position) {
                    var pos = {
                      lat: position.coords.latitude,
                      lng: position.coords.longitude
                    };

                    jQuery("#checkout-lat").val(pos.lat);
                    jQuery("#checkout-lng").val(pos.lng);

                    placeMarker(pos);

                    var pizza_min_dis = <?= $distance?>;


        var origin1 = {lat:lat,lng:lng};

        var destinationA = pos;
        var service = new google.maps.DistanceMatrixService;
        service.getDistanceMatrix({
          origins: [origin1],
          destinations: [destinationA],
          travelMode: 'DRIVING',
          unitSystem: google.maps.UnitSystem.METRIC,
          avoidHighways: false,
          avoidTolls: false,
          gestureHandling: 'none',
          zoomControl: false
          }, function(response, status) {
          if (status !== 'OK') {
            alert('Error was: ' + status);
          } else {

            var originList = response.originAddresses;
            var destinationList = response.destinationAddresses;

            for (var i = 0; i < originList.length; i++) {
              var results = response.rows[i].elements;
              for (var j = 0; j < results.length; j++) {

                  var km = results[j].distance.value;
                  km = km / 1000;
                  if(km <= pizza_min_dis){

                      jQuery("#checkout-check").val("true");

                  } else {
                      jQuery("#checkout-check").val("false");
                      alert('<?= $error?>');

                  }
                }
              }
            }
          });
                      geocoder.geocode({
                        'latLng': pos
                      }, function(results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                          if (results[0]) {
                              jQuery("#billing_address_1").val(results[0].formatted_address);
                          }
                        }
                      }); 
                  map.setCenter(pos);
                  }, function() {
                    //handleLocationError(true, infoWindow, map.getCenter());
                  });
                } else {
                  // Browser doesn't support Geolocation
                 // handleLocationError(false, infoWindow, map.getCenter());
                }
             });

   google.maps.event.addListener(map, 'click', function(event) {
   placeMarker(event.latLng);

     jQuery("#checkout-lat").val(event.latLng.lat());
        jQuery("#checkout-lng").val(event.latLng.lng());

   console.log(event.latLng);
   geocoder.geocode({
    'latLng': event.latLng
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (results[0]) {

          var pizza_min_dis = <?= $distance?>;


         var origin1 = {lat:lat,lng:lng};

        var destinationA = event.latLng;
        var service = new google.maps.DistanceMatrixService;
        service.getDistanceMatrix({
          origins: [origin1],
          destinations: [destinationA],
          travelMode: 'DRIVING',
          unitSystem: google.maps.UnitSystem.METRIC,
          avoidHighways: false,
          avoidTolls: false
        }, function(response, status) {
          if (status !== 'OK') {
            alert('Error was: ' + status);
          } else {

            var originList = response.originAddresses;
            var destinationList = response.destinationAddresses;

            for (var i = 0; i < originList.length; i++) {
              var results = response.rows[i].elements;
              for (var j = 0; j < results.length; j++) {

                  var km = results[j].distance.value;
                  km = km / 1000;
                  if(km <= pizza_min_dis){

                      jQuery("#checkout-check").val("true");

                  }else{
                       jQuery("#checkout-check").val("false");
                      alert('<?= $error?>');              
                  }       
                }
              }
            }
          });       
          jQuery("#billing_address_1").val(results[0].formatted_address);
      }
    }
  });

});
function placeMarker(location) {

    if(marker){
        marker.setMap(null);
        marker = null;
    }

        marker = new google.maps.Marker({
        position: location, 
        map: map
    });
  }  
});

function handleLocationError(browserHasGeolocation, infoWindow, pos) {
        infoWindow.setPosition(pos);
        infoWindow.setContent(browserHasGeolocation ?
                              'Error: The Geolocation service failed.' :
                              'Error: Your browser doesn\'t support geolocation.');
        infoWindow.open(map);
}
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...