放大和縮小選項不出現
[英]Zoom in and zoom out option not appearing
問題描述
放大和縮小選項在地圖上有效，但不可見，沒有顯示。 有什么幫助嗎？
這是代碼：（忽略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
謝謝！
2 個解決方案
解決方案1
0 2014-10-25 17:40:47
您的地圖無法正常運行，因為重復的代碼過多。
您有多個<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>內。
此外，元標記的鏈接已斷開，現在已在上述代碼中修復（文本重復了.com部分）。
我還刪除了height: 100%來自html, body, #map-canvas行，因為它似乎毫無用處，除非您小心，否則它可能與某些HTML組合不兼容。
2：用以下HTML替換<!-- 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&div=10003&divLnk=13&sdiv=1006&lT=0">http://www.junin.gov.ar/index.php?sector=3&div=10003&divLnk=13&sdiv=1006&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&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">
...然后我們可以將其放在您的CSS中，在第一個head ：
.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，它必須決定...“我應該使用第一個，第二個還是兩個？” 同樣，我懷疑某些內容是偶然被復制粘貼的。 但是請注意這些事情，否則可能會出現奇怪的結果（例如“縮放選項”只是隨機消失）。當
marginCSS會更好時，請避免使用<br />來分隔塊級元素（例如<p>，<div>）。 您可以使用它，它將按預期呈現。 但是，<br>標記是關於內容的……它的意思是“通過插入新行來破壞文本的這一行”……但是您並沒有那樣使用它。 您將其用作“我想在此地圖后添加間距”。 那不是內容，而是格式，建議將其放在CSS中。 實際上，這意味着要處理的標簽更少，控制更多（如果需要，可以將邊距設置為1.5行，僅<br>標簽是不可能的）。避免使用
<center>標簽。 HTML5不支持該功能，通常已被“逐步淘汰”。 實際上，目前使用它沒有害處。 但是，該行業正在從“以html格式”轉變為“以css格式”，以使所有內容保持井井有條並易於解決。 因此，為了更好的組織，我建議您擺脫<center>並使用CSS，例如text-align: center（用於內聯元素的包裝）或margin-left: auto; margin-right: automargin-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）。
解決方案2
0 2014-10-25 19:07:34
我對編碼進行了更新，從Google獲得了編碼，例如復制並粘貼並用我需要添加的內容進行了編輯。 但是地圖上沒有任何控件或標記，沒有任何幫助嗎？ http://juninarg.com/index.php/component/jevlocations/detail/3/1/biblioteca-publica-municipal-bernardino-rivadavia感謝您的寶貴時間，我閱讀了您添加的整篇文章，對我有很大幫助
Jquery 放大縮小
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.