个人中心
gpt4 book ai didi

javascript - 放大和缩小选项未出现

转载 作者：行者123 更新时间：2023-11-28 09:09:26 25 4
gpt4 key购买 nike

放大和缩小选项在地图上起作用，但是它不可见，没有出现。有什么帮助吗？

这是代码：（忽略JEVLOCATION_LAT / LON）

 <!DOCTYPE html> <html>   <head>
     <meta charset="utf-8">
     <style>
       html, body, #map-canvas {
         height: 100%;
         margin: 0px;
         padding: 0px
       }
     </style>
     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
     <script> function initialize() {   var city = new google.maps.LatLng({{Latitude:JEVLOCATION_LAT}},
 {{Latitude:JEVLOCATION_LON}});   var mapOptions = {
     zoom: 14,
     center: city,
     mapTypeControl: true,
     mapTypeControlOptions: {
       style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
     },
     zoomControl: true,
     zoomControlOptions: {
       style: google.maps.ZoomControlStyle.SMALL
     }   };   var map = new google.maps.Map(
       document.getElementById('map-canvas'), mapOptions); var myLatlng = new google.maps.LatLng({{Latitude:JEVLOCATION_LAT}},{{Latitude:JEVLOCATION_LON}});
 var marker = new google.maps.Marker({   position: myLatlng,   map:
 map,   title:"" });   var panoramaOptions = {
     position: city,
     pov: {
       heading: 34,
       pitch: 10
     }   };   var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'),
 panoramaOptions);   map.setStreetView(panorama); }

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

     </script>   </head>   <body>
     <div id="map-canvas" style="width: 400px; height: 300px"></div>
     <div id="pano" style="left:0px; top: 0px; width: 400px; height: 300px;"></div>


这是地图的图片：

http://i1382.photobucket.com/albums/ah268/Lucas_Maddox/mapzoomwontshow_zpscd0118c9.png

谢谢！

最佳答案

您的地图无法正常运行，因为重复的代码过多。

您有多个<DOCTYPE>，<head>，<body>和<div id="map-canvas"> html。您所有的JS函数也被复制，然后被多次调用。这意味着一切都变得有些混乱，在您的情况下，只是无法弄清楚放置缩放选项的位置。

您需要重构/清理代码。然后，地图选项将开始工作。

就是这样...

...合理的警告，Wall of Text Incoming！对于这篇文章的篇幅，我深表歉意，但我希望您知道我所做的更改以及原因。这样做的目的不是贬低，只是为了让您的网站尽可能快地运行，并帮助您避免将来出现任何问题。 :)

我还提出了一些“最佳实践”编码建议，您可以随意忽略。但是，这些是行业标准的做法，仅是为了使您的编码生活在将来更加轻松。

1.将这些行放入页面顶部的第一个<head>元素中：

<meta property="og:image" content="http://juninarg.com/images/jevents/jevlocations/53f2b4d97d8b50.48312034.jpeg" />
<style>
html, body, #map-canvas {
  margin: 0px;
  padding: 0px;
}
/* below is recently added 'best practices' styling */
.content-inner {
  margin: 3px;
  text-align: justify;
  font-family: Verdana, Geneva, sans-serif;
  color: #000000;
}
.image-wrapper {
  text-align: center;
}
#intro-img {
  margin-bottom: 1em;
}
#static-map {
  margin-top: 2em;
}
.title {
  font-size: 18pt;
}
#content p {
  font-size: 10pt;
}
#map-canvas {
  margin-top: 2em;
  margin-left: auto;
  margin-right: auto;
}
#pano {
  margin-bottom: 2em;
  margin-left: auto;
  margin-right: auto;
}
.mod_events_latest_table {
  width: 100%;
  border: 0;
  margin-bottom: 1em;
}
</style>


第一部分来自页面中间的您自己的 <style> + <meta>标记，其余部分是我为即将出现的HTML添加的内容。

请注意，从技术上讲，您不允许像网页一样在页面的中间放置 <style>或 <meta>标记，根据HTML规范，它们只能在 <head>内。

此外，meta标签的链接已断开，现在已在上述代码中修复（文本重复了.com部分）。

我也从您的 height: 100%行中删除了 html, body, #map-canvas，因为它似乎毫无用处，除非您小心，否则它可能与某些HTML组合不兼容。

2：将以下内容从 <!-- MAIN CONTENT -->替换为 <!-- // MAIN CONTENT -->：

请务必先备份所有内容！ 

<!-- MAIN CONTENT -->
<div id="content">  
  <div class="inner content-inner clearfix">
    <div id="intro-img" class="image-wrapper">
      <img class="lazyload" src="http://juninarg.com/cache/jalazyload/300x225.png" longdesc="http://juninarg.com/images/jevents/jevlocations/53f2b4d97d8b50.48312034.jpeg" itemprop="image" />
    </div>
    <h1 class="title">Biblioteca Pública Municipal Bernardino Rivadavia</h1>
    <p>Rivadavia 28<br />Ciudad de Junín<br />6000, Partido de Junín, Provincia de Buenos Aires, Argentina<br /><br /><strong>Tel: (236) 463-1600 Int. 229</strong></p>
    <div id="static-map" class="image-wrapper">
      <img src="https://maps.googleapis.com/maps/api/staticmap?center=Argentina&zoom=13&size=520x250&maptype=roadmap%20&markers=color:red%7Clabel:C%7C40.-34.59288025,-60.94636154" alt="Static Map" width="520" height="250">
    </div>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
      function initialize() {  
          var city = new google.maps.LatLng(-34.59288025,-60.94636154);  
          var mapOptions = {    
            zoom: 14,    
            center: city,    
            mapTypeControl: true,    
            mapTypeControlOptions: {      
              style: google.maps.MapTypeControlStyle.DROPDOWN_MENU    
            }, 
            zoomControl: true,
            zoomControlOptions: {    
              style: google.maps.ZoomControlStyle.DEFAULT
            }
          };
          var map = new google.maps.Map(      
            document.getElementById('map-canvas'), 
            mapOptions
          );
          var myLatlng = new google.maps.LatLng(-34.59288025,-60.94636154);
          var marker = new google.maps.Marker({  
            position: myLatlng,  
            map: map,  
            title:""
          });  
          var panoramaOptions = {    
            position: city,    
            pov: {      
              heading: 34,      
              pitch: 10    
            }  
          };  
          var panorama = new google.maps.StreetViewPanorama(
            document.getElementById('pano'), 
            panoramaOptions
          );
          map.setStreetView(panorama);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>       
    <script type="text/javascript" src="/plugins/system/jalazyload/assets/lazyload/jquery.lazyload.min.js"></script>
    <script type="text/javascript">
      function lazyloadinit() {
        jQuery("img.lazyload").lazyload({
          failure_limit: 10,
          threshold: 0,
          effect: "show",
          skip_invisible: false,
          load: function() {
            jQuery(this).removeClass("lazyload");

          },
          appear: function() {
            jQuery(this).attr("data-original", jQuery(this).attr("longdesc") || "").removeAttr("longdesc");
          }
        });
      };
      jQuery(document).ready(function() {
        lazyloadinit();
      });
    </script>
    <div id="map-canvas" style="width: 400px; height: 300px">
    </div>  
    <div id="pano" style="width: 400px; height: 300px;">
    </div>
    <p>Por una Ordenanza del día 7 de agosto de 1926, se dispuso la creación de una BIBLIOTECA PUBLICA MUNICIPAL, que debería denominarse "Bernardino Rivadavia", en honor al prócer. Fue inaugurada oficialmente el 15 de noviembre de 1936.</p>
    <p>La Biblioteca cuenta con aproximadamente 16.000 volúmenes, donde se pueden encontrar libros de textos, novelas, cuentos, literatura infantil, diccionarios, libros de lenguas, etc. Además de folletos, revistas y diarios.<br />Posee una Sala de Lectura y otra destinada a Estudio e Investigación.</p>
    <p>Ver más: <a href="http://www.junin.gov.ar/index.php?sector=3&amp;div=10003&amp;divLnk=13&amp;sdiv=1006&amp;lT=0">http://www.junin.gov.ar/index.php?sector=3&amp;div=10003&amp;divLnk=13&amp;sdiv=1006&amp;lT=0</a></p>
    <fieldset class="adminform">
      <legend>Upcoming Events</legend>
      <table class="mod_events_latest_table" cellspacing="0" cellpadding="0">
        <tr>
          <td class="mod_events_latest_first">
            <span class="mod_events_latest_date">Thu Oct 23 @ 3:00PM</span> - <span class="mod_events_latest_date">05:00PM</span><br /><span class="mod_events_latest_content"><a href="/index.php/eventdetail/21/-/talleres-culturales-photoshop-1-x-prof-marcelo-mels-biblioteca-publica-municipal-bernardino-rivadavia-junin-buenos-aires"  target="_top" >Talleres Culturales - Photoshop 1 x Prof. Marcelo Mels, Biblioteca Pública Municipal Bernardino Rivadavia, Junín, Buenos Aires</a></span>
          </td>
        </tr>
        <tr>
          <td class="mod_events_latest">
            <span class="mod_events_latest_date">Thu Oct 30 @ 3:00PM</span> - <span class="mod_events_latest_date">05:00PM</span><br /><span class="mod_events_latest_content"><a href="/index.php/eventdetail/22/-/talleres-culturales-photoshop-1-x-prof-marcelo-mels-biblioteca-publica-municipal-bernardino-rivadavia-junin-buenos-aires"  target="_top" >Talleres Culturales - Photoshop 1 x Prof. Marcelo Mels, Biblioteca Pública Municipal Bernardino Rivadavia, Junín, Buenos Aires</a></span>
          </td>
        </tr>
      </table>
      <strong>View all events <a href='/index.php/component/jevents/monthcalendar/2014/10/-?loclkup_fv=3&amp;Itemid=0' target='_top'>here</a></strong>
    </fieldset>
  </div>
</div>
<!-- // MAIN CONTENT -->


演示示例（支持地图，我尚未添加LazyLoad）： http://codepen.io/anon/pen/dlonj

上面实施的建议更改


删除所有内联CSS。归结为个人选择，但除非必要，否则我不建议使用内联CSS。 html中的所有CSS都可以移到 <style>标记（或者更好的是，一个.css文件）中，以使代码更易于阅读。
您可以将多个元素组合在一起。不需要4个元素来完成1的工作。这只会使代码更难管理和修正。


例如： 

<h3><span style="font-size: 18pt;"><span style="font-family: verdana, geneva;"><span style="color: #000000;">


可以重写为 

<h3 class="title">


...然后我们可以在第一个 head中将其放入您的CSS中： 

.title {
  font-size: 18px;
  font-family: verdana, geneva;
  color: #000000;
}



搜索引擎依靠 <h1>， <h2>， <h3>等标签来获得文档组织感。为了获得最佳的搜索引擎优化，建议不要使用h3换行多段文字或换行一个图像。这只会使搜索引擎感到困惑。取而代之的是，获取您的主要标题文本（BibliotecaPúblicaMunicipal Bernardino Rivadavia）并将其包装在 <h1>标记中。将其他段落/图像适当地放在 <p>或 <div>标记中。
选择字体系列时，请始终在家族列表的末尾包含 serif或 sans-serif。您指定 font-family: verdana, geneva;。如果计算机上未安装任何字体（想到Linux计算机），则浏览器将必须做出最佳猜测，并且可能会选择外观完全错误的东西，例如Times New Roman字体。编写 serif（表示技巧上带有小标志的字体，如Times New Roman）或 sans-serif（没有标志，如Verdana）有助于解决这一问题。因此，使用 font-family: Verdana, Geneva, sans-serif;。
保持Java脚本的外观井然有序，否则很难调试问题。


不要写这个... 

function initialize() {  var city = new google.maps.LatLng(-34.59288025,-60.94636154);  var mapOptions = {    zoom: 14,


...当您可以按几次Enter键并获得此提示时... 

function initialize() {
   var city = new google.maps.LatLng(-34.59288025,-60.94636154);
   var mapOptions = {
      zoom: 14,


使代码易于阅读比节省一些字节下载时间更为重要。


DOCTYPE， <html>， <head>和 <body>不得超过一个。这样做很容易出错，特别是如果您要从另一个页面复制和粘贴代码，但是这4个标记非常重要，复制它们会产生不可预测的结果。它迫使浏览器进行“最佳猜测”，并试图巧妙地组合标签，也就是说，这是不可预测的。您的页面在一种浏览器上可能看起来不错，而在另一种不够聪明的浏览器上看起来糟透了。
仔细检查您重复的JS内容。您是否需要重复项，还是偶然的原因可以删除？您有两个 initialize()，两个 google.maps.event.addDomListener和三个 lazyloadinit()。我怀疑您只需要其中一个。只会使浏览器感到混乱并引发Javascript错误。
删除具有相同ID的重复HTML元素，或将重复项重命名为其他名称。您有两个 #map-canvas。这绝对违背了规范……它迫使浏览器在用Javascript调用时做出“最佳猜测”。当您要求它将地图放在 #map-canvas上时，它必须决定...“我应该使用第一个，第二个还是两个？”同样，我怀疑某些内容是偶然被复制粘贴的。但是请注意这些事情，否则可能会出现奇怪的结果（例如“缩放选项”只是随机消失）。
当 <br /> CSS更好时，请避免使用 <p>分隔块级元素（例如 <div>， margin）。您可以使用它，它将按预期呈现。但是， <br>标记是关于内容的……它的意思是“通过插入新行来破坏文本的这一行”……但是您并没有那样使用它。您将其用作“我想在此地图后添加间距”。那不是内容，而是格式，建议将其放在CSS中。实际上，这意味着要处理的标签更少，控制更多（可以根据需要将边距设置为1.5行，仅 <br>标签是不可能的）。
避免使用 <center>标记。 HTML5不支持该功能，通常已被“逐步淘汰”。实际上，目前使用它没有害处。但是，该行业正在从“以html格式设置”转变为“以css格式设置”，以使所有内容井井有条并易于解决。因此，为了更好地组织，我建议摆脱 <center>并使用CSS，例如 text-align: center（用于内联元素的包装）或 margin-left: auto; margin-right: auto（用于块元素）。
有一个杂散的 </form>结束标记，请将其删除。


3.选择一个DOCTYPE

之前，我提到了一些重复的DOCTYPE。您在这里有两个不同的... XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">和HTML5 <!DOCTYPE html>。你想要哪一个？我建议后者... HTML5的规则更加灵活/宽容，除了它不支持 <center>标记，但这只是允许您使用的新标记和功能的一个小折衷。要使用它，请将其复制出来，然后用它替换第一行代码（另一个doctype）。

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

25 4 0
文章推荐： javascript - 如何访问 HTML 表格的特定单元格中的 API 数据(Python、请求)？
文章推荐： ios - Swift 和 EXT_BAD_ACCESS 中的详细文本标签
文章推荐： css - 如何使用纯 CSS 创建此箭头
文章推荐： ios - 自定义 Facebook 登录 View Swift
行者123
个人简介

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

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