个人中心
gpt4 book ai didi

javascript - 放大和缩小工具选项

转载 作者：行者123 更新时间：2023-12-03 09:36:54 27 4
gpt4 key购买 nike

我正在使用谷歌地图创建 JavaScript Web 应用程序。我正在尝试创建一个用于放大和缩小选项的工具。我创建了两个用于放大和缩小的按钮，现在我正在尝试激活这些工具。当我使用此工具进行放大和缩小选项时，它将在 map 上进行放大和缩小操作。我正在尝试这段代码

<button name="button" value="" type="button" id="zoomin" onclick="document.getElementById('mapviewer').change(); clicked"></button>
 <div id="mapviewer">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>    
function initialize() {
         var mapOptions = {
         zoom: 4,
         center: new google.maps.LatLng(-33, 151),
         mapTypeControl: true,
         mapTypeControlOptions: {
              style: google.maps.MapTypeControlStyle.DEFAULT,
              mapTypeIds: [
                              google.maps.MapTypeId.ROADMAP,
                              google.maps.MapTypeId.TERRAIN
                            ]
                          },
                          zoomControl: false,
                          zoomControlOptions: {
                            style: google.maps.ZoomControlStyle.SMALL
                          }
                        };
                        var map = new google.maps.Map(document.getElementById('mapviewer'),
                                                      mapOptions);
                        map.setOptions({draggable: false, zoomControl: false, scrollwheel: false, disableDoubleClickZoom: true});                              
                      }

                      google.maps.event.addDomListener(window, 'load', initialize);
                       </script>    

                         <script type="text/javascript">
                            function performClick(elemId) {
                               var elem = document.getElementById(elemId);
                               if(elem && document.createEvent) {
                                  var evt = document.createEvent("MouseEvents");
                                  evt.initEvent("click", true, false);
                                  elem.dispatchEvent(evt);
                               }
                            }
                         </script>
                         </div>

使用此页面作为引用[博客]:How to add the pan tool within the iframe?

现在我正在尝试编写一个用于缩放选项的脚本，如果我单击该按钮，则选择箭头将更改为缩放图标，它将放大谷歌地图。请为我提供一些有关此任务的代码引用

最佳答案

map 代码:

<html>
<head>
<link rel="stylesheet" type="text/css" href="../include.css" />
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, width=device-width" />
<title>Textual Zoom Control (Maps API v3)</title>
<style type="text/css">

html, body { height:100%; width: 100%; }

#map {
 float: left;
 margin: 0 25px 10px 14px;
 width: 64%;
 height: 70%;
 border: 1px solid gray;
}

#desc {
 float: left;
 margin: 0 25px 10px 20px;
 width: 14em;
}

#zoomcontrol {
 position: absolute;
 top:172px; left:71%;
}

@media screen and (max-width: 890px) {

 body, html, #map {
   margin: 0;
 }

 #map {
  width: 100%;
  height: 50%;
 }
 #desc {
  margin: 0 14px;
  width: 93%;
 }
 .include >b {
  float: right;
  margin-top: 17px;
 }
 #zoomcontrol {
  position: absolute;
  top: 70%;
  left: 41%;
 }
}

</style>

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.j
s"></script>
<![endif]-->

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB1Wwh21ce7jnB6yDbjVGN3LC5ns7OoOL4&amp;sensor=false">
</script>
<script type="text/javascript">

/* A TextualZoomControl is a GControl that displays
 * textual "Zoom In" and "Zoom Out" buttons.
*/
function TextualZoomControl(map) {

/* Creates a one DIV for each of the buttons and places them in a container
 * DIV which is returned as our control element. We add the control
 * to the map container and return the element for the map class to
 * position properly.
*/

  var g = google.maps;
  var control = document.createElement("div");
  control.id = "zoomcontrol";
  var zoomInDiv = document.createElement("div");
  this.setButtonStyle_(zoomInDiv);
  control.appendChild(zoomInDiv);
  zoomInDiv.appendChild(document.createTextNode("Zoom In"));

  g.event.addDomListener(zoomInDiv, "click", function() {
    map.setZoom(map.getZoom()+1);
   });

   var zoomOutDiv = document.createElement("div");
   this.setButtonStyle_(zoomOutDiv);
   control.appendChild(zoomOutDiv);
   zoomOutDiv.appendChild(document.createTextNode("Zoom Out"));

   g.event.addDomListener(zoomOutDiv, "click", function() {
     map.setZoom(map.getZoom()-1);
    });

   /* Instead of appending it to the map container
    * append it to body of the document
   */
   document.body.appendChild(control);
   return control;
}


// Set the proper CSS for the given button element.
TextualZoomControl.prototype.setButtonStyle_ = function(button) {
  button.style.textDecoration = "underline";
  button.style.color = "#0000cc";
  button.style.backgroundColor = "white";
  button.style.fontSize = "smaller";
  button.style.border = "1px solid gray";
  button.style.padding = "2px";
  button.style.marginBottom = "3px";
  button.style.textAlign = "center";
  button.style.width = "6em";
  button.style.cursor = "pointer";
}


function loadMap() {

  var g = google.maps;
  var opts_map = {
    zoom: 10,
    center: new g.LatLng(53.55486, 9.98989),
    disableDefaultUI: true,
    scrollwheel: false,
    mapTypeControl: true,

   mapTypeControlOptions: {
     style: g.MapTypeControlStyle.DEFAULT
   },
   mapTypeId: g.MapTypeId.ROADMAP      
  };

  var map = new g.Map(document.getElementById("map"), opts_map);

  // Add self created control
  var zoom_control = new TextualZoomControl(map); 
  zoom_control.index = 1;
}
window.onload = loadMap;
</script>
</head>
<body>
<h3>Textual Zoom Control</h3>
<div id="map"></div>
</body>
</html>

此代码将适用于使用单击按钮的放大和缩小工具选项

关于javascript - 放大和缩小工具选项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31309179/

27 4 0
文章推荐： javascript - 如何触发点击键13
文章推荐： javascript - for 循环内可点击的图像
文章推荐： javascript - 外部接口(interface)回调未定义 AS3
文章推荐： javascript - CreateJS 使用 Tween.js 增加阴影 offsetX
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com