Карыстацкі Google Map API V3 Кнопка маштабавання

Як я магу наладзіць Google Maps API, кнопкі (v3 JavaScript), маштабавання да майго ўласным вобраз і падабенства.

13

4 адказы

Я спазняюся на вечарыне, але вось мае два цэнта.

У вас ёсць два асноўных варыянту:

Option 1: You either create the controls using HTML/CSS yourself, which you can then place over the map to the correct position using position absolute or similar means. Even though this works in production, I don't like this, because your HTML/CSS for the element doesn't load at the same time than the map is displayed. Also you are separating your HTML/CSS code for the controls so it is harder to reuse the same map at different pages. e.g. "Did I forgot to add the controls?"

Option 2: You create a custom control which looks and feels the zoom controllers you like. Below is an code about this in practice.

Карацей кажучы, вам трэба спачатку адключыць звычайныя кантролеры інтэрфейсу па тэлефонах:

var mapOptions = {
    zoom: 12,
    center: chicago,
    /* Disabling default UI widgets */
    disableDefaultUI: true//<-- see this line
}

І тады вы проста стварыць кантролер і выкарыстоўваць яго.

<�Моцны> HTML:

... 
<div id="map-canvas"></div>
...

<�Моцны> CSS

html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px;
}

<�Моцны> JavaScript:

var map;
var chicago = new google.maps.LatLng(41.850033, -87.6500523);

/**
 * The ZoomControl adds +/- button for the map
 *
 */
function ZoomControl(controlDiv, map) {

 //Creating divs & styles for custom zoom control
  controlDiv.style.padding = '5px';

 //Set CSS for the control wrapper
  var controlWrapper = document.createElement('div');
  controlWrapper.style.backgroundColor = 'white';
  controlWrapper.style.borderStyle = 'solid';
  controlWrapper.style.borderColor = 'gray';
  controlWrapper.style.borderWidth = '1px';
  controlWrapper.style.cursor = 'pointer';
  controlWrapper.style.textAlign = 'center';
  controlWrapper.style.width = '32px'; 
  controlWrapper.style.height = '64px';
  controlDiv.appendChild(controlWrapper);

 //Set CSS for the zoomIn
  var zoomInButton = document.createElement('div');
  zoomInButton.style.width = '32px'; 
  zoomInButton.style.height = '32px';
  /* Change this to be the .png image you want to use */
  zoomInButton.style.backgroundImage = 'url("http://placehold.it/32/00ff00")';
  controlWrapper.appendChild(zoomInButton);

 //Set CSS for the zoomOut
  var zoomOutButton = document.createElement('div');
  zoomOutButton.style.width = '32px'; 
  zoomOutButton.style.height = '32px';
  /* Change this to be the .png image you want to use */
  zoomOutButton.style.backgroundImage = 'url("http://placehold.it/32/0000ff")';
  controlWrapper.appendChild(zoomOutButton);

 //Setup the click event listener - zoomIn
  google.maps.event.addDomListener(zoomInButton, 'click', function() {
    map.setZoom(map.getZoom() + 1);
  });

 //Setup the click event listener - zoomOut
  google.maps.event.addDomListener(zoomOutButton, 'click', function() {
    map.setZoom(map.getZoom() - 1);
  });  

}

function initialize() {
  var mapDiv = document.getElementById('map-canvas');

  var mapOptions = {
    zoom: 12,
    center: chicago,
    /* Disabling default UI widgets */
    disableDefaultUI: true
  }

  map = new google.maps.Map(mapDiv, mapOptions);

 //Create the DIV to hold the control and call the ZoomControl() constructor
 //passing in this DIV.
  var zoomControlDiv = document.createElement('div');
  var zoomControl = new ZoomControl(zoomControlDiv, map);

  zoomControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(zoomControlDiv);
}

initialize();

Заўвага: Гэты код не ўтрымлівае якую-небудзь фантазію абразкі і іншыя падобныя дзеянні, толькі запаўняльнікі. Таму, магчыма, спатрэбіцца наладзіць яго ў адпаведнасці з вашымі патрэбамі. Акрамя таго, памятайце, каб дадаць HTML5 нармальныя тэгі і сцэнарыі ўключаюць у Google Maps API v3 JavaScript. Я дадаў толькі <div ID = "карта-палатно»> </div> , так як патрэба ў астатняй часткі цела даволі відавочная.

To see it live: Here is working jsfiddle example

Прывітання.

19
дададзена
Гэта выдатна працуе, дзякуй! Адно невялікае паляпшэнне можа быць, каб даць імёны кіравання маштабам класа, такія як controlWrapper.setAttribute ( «клас», «заказ-зум-абгортку»); і інш. Гэта азначае, што стылі могуць быць дададзеныя ў CSS замест JS, што прыводзіць да больш чыстага коду і дазваляе медыя запытаў г.зн. невялікія кнопкі на невялікіх экранах.
дададзена аўтар Davey, крыніца
Вялікі дзякуй за гэта.
дададзена аўтар Barlas Apaydin, крыніца
Гэта з'яўляецца дзіўным.
дададзена аўтар Andrew Swift, крыніца

Пасля пошуку гадзін я знайшоў рашэнне Проста пераканайцеся, што вы заменіце API ID! Атрымлівайце асалоду ад!

<!DOCTYPE HTML>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=YOUR-MAP_API-ID&sensor=false&region=AU">
    </script>



<script type="text/javascript">

function HomeControl(controlDiv, map) {

 google.maps.event.addDomListener(zoomout, 'click', function() {
   var currentZoomLevel = map.getZoom();
   if(currentZoomLevel != 0){
     map.setZoom(currentZoomLevel - 1);}     
  });

   google.maps.event.addDomListener(zoomin, 'click', function() {
   var currentZoomLevel = map.getZoom();
   if(currentZoomLevel != 21){
     map.setZoom(currentZoomLevel + 1);}
  });

}

var map;
var markersArray = [];


function initialize() {

  var mapDiv = document.getElementById('map-canvas');
  var myLatlng = new google.maps.LatLng(-33.90224, 151.20215);
  var mapOptions = {
    zoom: 15,
    center: myLatlng,
    Marker: true,
    panControl: false,
    zoomControl: false,
    streetViewControl: false,
    overviewMapControl: false,
     mapTypeControl: false,
     mapTypeControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  map = new google.maps.Map(mapDiv, mapOptions);
  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title:"Hello World!"
  });

 //Create the DIV to hold the control and
 //call the HomeControl() constructor passing
 //in this DIV.
  var homeControlDiv = document.createElement('div');
  var homeControl = new HomeControl(homeControlDiv, map);

}

google.maps.event.addDomListener(window, 'load', initialize);    

</script>

</head>




  <body>
    <div id="map-canvas"></div>
    <div id="zoomout" style="border:1px solid; width:150px; cursor:pointer; margin-bottom:20px;">ZOOM ME OUT</div>
    <div id="zoomin" style="border:1px solid; width:150px; cursor:pointer; ">ZOOM ME IN</div>
  </body>
</html>
14
дададзена

Гэта не магчыма. Вы можаце наладзіць іх знешні выгляд крыху, выкарыстоўваючы набор наканаваных параметраў опцый ці вы можаце рэалізаваць свой уласны кантроль над картай, якая забяспечвае тую ж функцыянальнасць, што і зуммирование. Для атрымання дадатковай інфармацыі гл гэтай старонцы .

АБНОЎЛЕНА: Ссылка выпраўленая. Дзякуй за зваротную сувязь!

4
дададзена
Выпраўце звязванне або апублікаваць адпаведныя інструкцыі ў ваш адказ.
дададзена аўтар Sparky, крыніца
Фіксаваная сувязь . Ён проста прапусціў «L» у канцы «HTM».
дададзена аўтар RASG, крыніца
Дзякуй, хлопцы! Фіксаваная спасылка!
дададзена аўтар Stefan Kovachev, крыніца
спасылка не працуе?
дададзена аўтар HAWKES08, крыніца

Я зрабіў гэта ў CSS так:

#map-container .gm-style > .gmnoprint > .gmnoprint { background: url(/images/map-zoom-controls.png) no-repeat center center !important; width: 42px !important; height: 68px !important; }
#map-container .gm-style > .gmnoprint > .gmnoprint > div > img { display: none !important; }
#map-container .gm-style > .gmnoprint > .gmnoprint div[title="Zoom in"] { top: 2px !important; left: 2px !important; width: 38px !important; height: 31px !important; }
#map-container .gm-style > .gmnoprint > .gmnoprint div[title="Zoom out"] { top: 35px !important; left: 2px !important; width: 38px !important; height: 30px !important; }

Гэта для малюнка, якое мае: шырыня: 42px; вышыня: 68px;

Зрабіце свае ўласныя налады.

<�Моцны> УВАГА

Гэта адносіцца толькі калі вы карыстаецеся англамоўную версію з-за назвы атрыбутаў.

3
дададзена
Вельмі добра! Працуе выдатна для мяне!
дададзена аўтар SquareCat, крыніца
Гэта будзе працаваць да таго часу, пакуль структура задаецца Google Maps UI застаецца тым жа самым, вы ніколі не павінны спадзявацца на жорсткіх закадаваныя правілах для дасягнення сваёй мэты.
дададзена аўтар torresomar, крыніца