css - شرح - كيفية استخدام خرائط جوجل




عناصر تحكم خرائط Google ضخمة(خطأ محتمل؟) (5)

لقد لاحظت أولاً أن عناصر التحكم في خرائط Google الخاصة بي كانت كبيرة بشكل غير متناسب على تطبيق الويب الخاص بي (كما هو موضح أدناه).

في البداية اعتقدت أن بعضًا من CSS الخاص بي كان يلعب مع Google CSS على عناصر التحكم ؛ ومع ذلك ، أخبرتني زيارة صفحة الويب الخاصة بـ Google أن هذا الحادث لم يكن معزولًا بالنسبة لي ...

يوجد أدناه خريطة في وثائقهم: https://developers.google.com/maps/documentation/javascript/examples/control-positioning

تظهر عناصر التحكم الكبيرة في كل صفحة من وثائقها بالنسبة لي أيضًا. جربت أجهزة مختلفة ومتصفحات مختلفة (Chrome و Firefox).

جربت أيضًا مواقع أخرى تستخدم واجهة برمجة تطبيقات خرائط Google ورأيت ظاهرة مماثلة في بعض الحالات .

هل هناك شخص آخر يعاني من نفس المشكلات؟


أضفت بعض المغلق وهذا كل شيء.

/* Fix +/- zoom buttons design */
#map .gm-bundled-control-on-bottom {
  right: 30px !important;
  bottom: 116px !important;
}
#map .gm-bundled-control-on-bottom > div:first-child {
   top: 44px !important;
}
#map .gmnoprint > .gmnoprint > div {
  height: 60px !important;
  width: 30px !important;
}
#map .gmnoprint > .gmnoprint > div > div { /* seperator */
  width: 22.5px !important;
  margin: 0px 3.75px !important;
}
#map .gmnoprint > .gmnoprint button {
  width: 30px !important;
  height: 30px !important;
}
#map .gmnoprint > .gmnoprint button img {
  height: 13.5px !important;
  width: 13.5px !important;
  margin: 6.75px 8.25px 9.75px !important;
}

وهذا لزر الرجل الأصفر:

/* yellow person button design*/
#map .gm-svpc {
	width: 30px !important;
	height: 30px !important;
}
#map .gm-svpc img:nth-child(1), #map .gm-svpc img:nth-child(2){
	width: 13.5px !important;
	height: 22.5px !important;
	left: -7px !important;
	top: -12px !important;
}
#map .gm-svpc img:nth-child(3) {
	width: 24px !important;
	height: 30px !important;
}

ولآخر تصميم MAP | أزرار الأقمار الصناعية

/* MAP|Satellite buttons design*/
#map .gm-style-mtc > div:nth-child(1) {
  padding: 0px 9px !important;
  height: 30px !important;		
  font-size: 15px !important;
}
#map .gm-style-mtc > div:nth-child(2) {
  top: 30px !important;
}
#map .gm-style-mtc > div:nth-child(2) > div {
  padding: 2px 4px 2px 2px !important;
  font-size: 14px !important;
}


بالإضافة إلى @ שלומי الإجابة אהרוני الصورة، هذا إضافة إلى إصلاح زر ملء الشاشة. كما كان من قبل ، فهو ليس حلاً رائعًا على المدى الطويل ، ولكنه إصلاح جيد ليلي يوم الجمعة.

/* full screen button design */
#map .gm-fullscreen-control {
    width: 30px !important;
    height: 30px !important;
}
#map .gm-fullscreen-control img:nth-child(1), #map .gm-fullscreen-control img:nth-child(2), #map .gm-fullscreen-control img:nth-child(3) {
    margin: 6px !important;
}

بعد رد الفعل العكسي ، نشرت Google الآن مثالًا عن كيفية استبدال عناصر التحكم الافتراضية (الكبيرة): https://developers.google.com/maps/documentation/javascript/examples/control-replacement

إليك الرمز الذي نشرته Google:

<!DOCTYPE html>
<html>
  <head>
    <title>Replacing Default Controls</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

      .gm-style .controls {
        font-size: 28px;  /* this adjusts the size of all the controls */

        background-color: white;
        box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
        box-sizing: border-box;
        border-radius: 2px;
        cursor: pointer;
        font-weight: 300;
        height: 1em;
        margin: 6px;
        text-align: center;
        user-select: none;
        padding: 2px;
        width: 1em;
      }
      .gm-style .controls button {
        border: 0;
        background-color: white;
        color: rgba(0, 0, 0, 0.6);
      }
      .gm-style .controls button:hover {
        color: rgba(0, 0, 0, 0.9);
      }

      .gm-style .controls.zoom-control {
        display: flex;
        flex-direction: column;
        height: auto;
      }
      .gm-style .controls.zoom-control button {
        font: 0.85em Arial;
        margin: 1px;
        padding: 0;
      }

      .gm-style .controls.maptype-control {
        display: flex;
        flex-direction: row;
        width: auto;
      }
      .gm-style .controls.maptype-control button {
        display: inline-block;
        font-size: 0.5em;
        margin: 0 1px;
        padding: 0 6px;
      }
      .gm-style .controls.maptype-control.maptype-control-is-map .maptype-control-map     {
        font-weight: 700;
      }
      .gm-style .controls.maptype-control.maptype-control-is-satellite .maptype-control-satellite {
        font-weight: 700;
      }

      .gm-style .controls.fullscreen-control button {
        display: block;
        font-size: 1em;
        height: 100%;
        width: 100%
      }
      .gm-style .controls.fullscreen-control .fullscreen-control-icon {
        border-style: solid;
        height: 0.25em;
        position:absolute;
        width: 0.25em;
      }
      .gm-style .controls.fullscreen-control .fullscreen-control-icon.fullscreen-    control-top-left {
        border-width: 2px 0 0 2px;
        left: 0.1em;
        top: 0.1em;
      }
      .gm-style .controls.fullscreen-control.is-fullscreen .fullscreen-control-icon.fullscreen-control-top-left {
        border-width: 0 2px 2px 0;
      }
      .gm-style .controls.fullscreen-control .fullscreen-control-icon.fullscreen-control-top-right {
        border-width: 2px 2px 0 0;
        right: 0.1em;
        top: 0.1em;
      }
      .gm-style .controls.fullscreen-control.is-fullscreen .fullscreen-control-icon.fullscreen-control-top-right {
        border-width: 0 0 2px 2px;
      }
      .gm-style .controls.fullscreen-control .fullscreen-control-icon.fullscreen-control-bottom-left {
        border-width: 0 0 2px 2px;
        left: 0.1em;
        bottom: 0.1em;
      }
      .gm-style .controls.fullscreen-control.is-fullscreen .fullscreen-control-icon.fullscreen-control-bottom-left {
        border-width: 2px 2px 0 0;
      }
      .gm-style .controls.fullscreen-control .fullscreen-control-icon.fullscreen-control-bottom-right {
        border-width: 0 2px 2px 0;
        right: 0.1em;
        bottom: 0.1em;
      }
      .gm-style .controls.fullscreen-control.is-fullscreen .fullscreen-control-icon.fullscreen-control-bottom-right {
        border-width: 2px 0 0 2px;
      }

    </style>
  </head>
  <body>
    <div id="map"></div>
    <!-- Hide controls until they are moved into the map. -->
    <div style="display:none">
      <div class="controls zoom-control">
        <button class="zoom-control-in" title="Zoom In">+</button>
        <button class="zoom-control-out" title="Zoom Out"></button>
      </div>
      <div class="controls maptype-control maptype-control-is-map">
        <button class="maptype-control-map"
                title="Show road map">Map</button>
        <button class="maptype-control-satellite"
                title="Show satellite imagery">Satellite</button>
      </div>
      <div class="controls fullscreen-control">
        <button title="Toggle Fullscreen">
          <div class="fullscreen-control-icon fullscreen-control-top-left"></div>
          <div class="fullscreen-control-icon fullscreen-control-top-right"></div>
          <div class="fullscreen-control-icon fullscreen-control-bottom-left"></div>
          <div class="fullscreen-control-icon fullscreen-control-bottom-right"></div>
        </button>
      </div>
    </div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.querySelector('#map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8,
          disableDefaultUI: true,
        });

        initZoomControl(map);
        initMapTypeControl(map);
        initFullscreenControl(map);
      }

      function initZoomControl(map) {
        document.querySelector('.zoom-control-in').onclick = function() {
          map.setZoom(map.getZoom() + 1);
        };
        document.querySelector('.zoom-control-out').onclick = function() {
          map.setZoom(map.getZoom() - 1);
        };
        map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(
            document.querySelector('.zoom-control'));
      }

      function initMapTypeControl(map) {
        var mapTypeControlDiv = document.querySelector('.maptype-control');
        document.querySelector('.maptype-control-map').onclick = function() {
          mapTypeControlDiv.classList.add('maptype-control-is-map');
          mapTypeControlDiv.classList.remove('maptype-control-is-satellite');
          map.setMapTypeId('roadmap');
        };
        document.querySelector('.maptype-control-satellite').onclick =
            function() {
          mapTypeControlDiv.classList.remove('maptype-control-is-map');
          mapTypeControlDiv.classList.add('maptype-control-is-satellite');
          map.setMapTypeId('hybrid');
        };

        map.controls[google.maps.ControlPosition.LEFT_TOP].push(
            mapTypeControlDiv);
      }

      function initFullscreenControl(map) {
        var elementToSendFullscreen = map.getDiv().firstChild;
        var fullscreenControl = document.querySelector('.fullscreen-control');
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(
            fullscreenControl);


        fullscreenControl.onclick = function() {
          if (isFullscreen(elementToSendFullscreen)) {
            exitFullscreen();
          } else {
            requestFullscreen(elementToSendFullscreen);
          }
        };

        document.onwebkitfullscreenchange =
        document.onmsfullscreenchange =
        document.onmozfullscreenchange =
        document.onfullscreenchange = function() {
          if (isFullscreen(elementToSendFullscreen)) {
            fullscreenControl.classList.add('is-fullscreen');
          } else {
            fullscreenControl.classList.remove('is-fullscreen');
          }
        };
      }

      function isFullscreen(element) {
        return (document.fullscreenElement ||
                document.webkitFullscreenElement ||
                document.mozFullScreenElement ||
                document.msFullscreenElement) == element;
      }
      function requestFullscreen(element) {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullScreen) {
          element.msRequestFullScreen();
        }
      }
      function exitFullscreen() {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msCancelFullScreen) {
          document.msCancelFullScreen();
        }
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?    key=YOUR_API_KEY&callback=initMap"
    async defer></script>
  </body>
</html>

تبين أن هذا ليس خطأ. انظر المزيد هنا:

13 أغسطس ، 2018 03:56 م تم الإبلاغ عن المشكلة ، خرائط جوجل ، جافا سكريبت API القناة الأسبوعية (3.34) سوف تستخدم تحكم أكبر واجهة المستخدم.

بما أننا نشهد زيادة في عمليات اللمس على أجهزة مختلفة ، فقد قمنا بتعديل واجهة المستخدم للتحكم لتناسب كلاً من لمسات الأصابع ونقرات الماوس.

من الممكن إلغاء الاشتراك عن طريق تحميل واجهة برمجة التطبيقات (API) بـ v = ربع سنوي أو v = 3 أو v = 3.33 أو v = 3.32. ملاحظة: ستتلقى طلبات الإصدار المتقاعد القناة الافتراضية ، راجع 1 .

إذا كانت لديك أي طلبات أو مشكلات أخرى تتعلق بوحدة التحكم الجديدة ، فيرجى إخبارنا بذلك.

1 https://issuetracker.google.com/112519576

استخدم v = ربع سنوي ، v = 3 ، v = 3.33 أو v = 3.32 عند تحميل API لاستخدام عناصر تحكم أصغر.

تصحيح:

ارجع إلى إجابة منJonny van Beek حول كيفية توسيع نطاق عناصر التحكم في خريطة Google إلى حجم اختيارك.

ارجع إلى إجاباتgarethdn وPeter (أدناه) لمعرفة كيفية استبدال عناصر التحكم الكبيرة في Google بعناصر التحكم المخصصة الخاصة بك.


يبدو أن google اعترفت بهذا الآن وقدمت ميزة (غير موثقة حاليًا) لتغيير مقياس واجهة المستخدم عن طريق تمرير "حجم عنصر التحكم" عند إنشاء الخريطة.

انظر التعليق من جوجل here .

JSFiddle here (من التعليق أعلاه).

عينة من الرموز:

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8,
    controlSize: 32,
  });
}

ملاحظة: 40 هو الإعداد الافتراضي حاليًا (ويتوافق مع عناصر التحكم الكبيرة التي يتعلق بها هذا السؤال). لقد وجدت أن 25 من نفس عناصر التحكم السابقة.





google-maps-api-3