การควบคุมการซูมของ Google แผนที่เกิดความสับสน

172

ฉันใช้ Google Maps API (v.3) เพื่อแสดงแผนที่พร้อมเครื่องหมายสองสามตัว ฉันเพิ่งสังเกตเห็นว่าการควบคุมที่ใช้ในการซูมแผนที่นั้นเกิดความยุ่งเหยิง (มันไม่ได้เป็นแบบนี้เสมอไป) ฉันไม่รู้ว่าสาเหตุคืออะไร

ป้อนคำอธิบายรูปภาพที่นี่

ปรับปรุง

เดิมโพสต์นี้มีลิงค์ไปยังหน้าที่คุณสามารถดูปัญหาได้ แต่ตอนนี้ลิงค์เสียดังนั้นฉันจึงลบมันออก

javascript css google-maps

— Dónal
แหล่งที่มา

12

ปัญหานี้ไม่ได้เกิดขึ้นกับ Bootstrap uf ที่คุณใช้คือ map_canvas เป็น map div id

— Ben

109

CSS ของคุณยุ่งเหยิง ลบmax-width: 100%;ในบรรทัด 814 และการควบคุมการซูมจะดูดีอีกครั้ง เพื่อหลีกเลี่ยงข้อบกพร่องดังกล่าวใช้ตัวเลือกที่เฉพาะเจาะจงมากขึ้นใน CSS ของคุณ

— Konrad Dzwinel
แหล่งที่มา

12

สิ่งนี้ก็เป็นจริงเช่นกันหากคุณใช้ Bootstrap ของ Twitter พวกเขามี img {ความกว้างสูงสุด: 100%} ที่ทำให้สิ่งนี้ยุ่งเหยิง ควรได้รับการแก้ไขในสาขา 2.0.2

— Ken

1

ไฟล์รีเซ็ต CSS จำนวนมากยังimg {max-width:100%;}ตั้งค่าไว้

— avesse

! น่ากลัว ฉันก็มีปัญหากับเรื่องนี้และฉันเพิ่งย้ายไป bootstrap css Mucho ++++

— Kevin Mansel

มีปัญหาเดียวกันกับ jQuery มือถือ พวกเขามี.ui-mobile img {max-width: 100%;}ใน CSS ของพวกเขาซึ่งจะต้องถูกลบออก

— Jeremy

28

เพื่อแก้ไขที่ bootstrap เพียงแค่ให้แผนที่ของคุณ div class google-maps

— Samy Massoud

80

#myMap_canvas img {
    max-width: none;
}

แก้ไขให้ฉัน แต่ฉันยังต้องการชี้ให้เห็นความคิดเห็นเกี่ยวกับคำถามโดย @Ben "ปัญหานี้ไม่ได้เกิดขึ้นกับ Bootstrap ถ้าคุณใช้ map_canvas เป็น map div id" เขาพูดถูก. ฉันไม่ได้ใช้ Bootstrap แต่ปัญหาเริ่มเกิดขึ้นหลังจากที่ฉันเปลี่ยนรหัสประจำตัว

การตั้งค่ากลับเป็น map_canvas แก้ไขโดยไม่เปลี่ยนความกว้างสูงสุด

<div id="map_canvas"></div>

— ชิด
แหล่งที่มา

21

หากคุณใช้ Bootstrap เพียงแค่ให้คลาส "google-maps" สิ่งนี้ใช้ได้สำหรับฉัน

คุณอาจรีเซ็ตทุกอย่างสำหรับ div ของ Google map เป็นวิธีสุดท้าย:

HTML:

<div class="mappins-map"><div>

CSS:

.mappins-map img { 
    max-width: none !important; 
    height: auto !important; 
    background: none !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

— woens
แหล่งที่มา

16

เพียงแชร์ @ Max-Favilli คำตอบ:

ด้วย google maps api รุ่นล่าสุดคุณต้องการสิ่งนี้:

<style>
.gm-style img { max-width: none; }
.gm-style label { width: auto; display: inline; }
</style>

ขอบคุณ @ Max-Favilli

https://stackoverflow.com/a/19339767/3070027

— poostchi
แหล่งที่มา

5

หากคุณเป็นผู้ใช้ Twitter Bootstrap คุณควรเพิ่มบรรทัดนี้ใน CSS ของคุณ:

.gmnoprint img { max-width: none; }

— Fernando Prieto
แหล่งที่มา

4

ฉันมีปัญหานี้เช่นกันและใช้

.google-maps img {
    max-width: none;
}

ไม่ทำงาน ในที่สุดฉันก็ใช้

.google-maps img {
    max-width: none !important;
}

และมันใช้งานได้อย่างมีเสน่ห์

— เบ็คดีแลน
แหล่งที่มา

สำคัญอาจไม่จำเป็นหากตัวเลือกของคุณเฉพาะเจาะจงมากขึ้น

— voodoocode

2

หากคุณใช้ CSS เพียวของ Yahoo ให้ div "google-maps" class ของคุณเช่น Bootstrap และวางกฎนี้ใน CSS ของคุณ:

.google-maps img {
    max-width: none;
    max-height: none;
}

เท่าที่ฉันสามารถบอกได้ CSS บริสุทธิ์ไม่มีวิธีแก้ไขปัญหานี้ด้วยตนเอง

— dmzza
แหล่งที่มา

0

ตัวเลือกเหล่านั้นที่คุณบอกว่าไม่ได้ผลกับเว็บไซต์ของฉัน

ฉันใช้ Bootstrap V3 และเน้นการใช้งาน เหตุผลหลักคือฉันได้ให้ ID แผนที่ของฉันแตกต่างจากนั้นไฟล์ CSS ที่ใช้ในการแสดงแถบซูมกับผู้ชาย streetvieuw สีเหลือง

ฉันเปลี่ยนชื่อ map_canvas เป็น mapholder แล้วมันก็ใช้งานได้สำหรับฉัน! ขอบคุณทุกคำแนะนำที่ฉันควรดูในไฟล์ CSS!

— Impiriumjbb
แหล่งที่มา

0

ฉันลองแก้ไขปัญหาทั้งหมดข้างต้นและอื่น ๆ จากฟอรัมอื่น ๆ เพื่อไม่เป็นประโยชน์ มันน่ารำคาญจริง ๆ เพราะฉันมีเว็บไซต์ที่ไม่ใช่ Wordpress อีกแห่งซึ่งโค้ดทำงานได้อย่างสมบูรณ์ (ฉันพยายามแสดงแผนที่ Google ในหน้า Wordpress แต่ตัวควบคุมการซูมและ Streetview นั้นผิดเพี้ยนไป)

ทางออกที่ฉันทำคือการสร้างไฟล์ html ใหม่ (คัดลอกวางรหัสทั้งหมดลงใน Notepad และตั้งชื่อเป็น xyz.html บันทึกเป็นประเภท "ไฟล์ทั้งหมด") จากนั้นอัพโหลด / ftp จนถึงเว็บไซต์และตั้งค่าหน้า Wordpress ใหม่และใช้ฟังก์ชั่นการฝัง เมื่อแก้ไขหน้าให้ไปที่ text editor (ไม่ใช่ visual editor) และ copy / type:

http: // page URL width = "900" height = "950">

หากคุณเปลี่ยนส่วนข้อมูลอย่าลืมเปลี่ยนในทั้งสองข้อโต้แย้งข้างต้นหรือคุณได้ผลลัพธ์แปลก ๆ

เราไปกันแล้ว - อาจจะไม่ฉลาดเท่าคำตอบอื่น ๆ แต่มันใช้ได้สำหรับฉัน! หลักฐานที่นี่: http://a-bc.co.uk/latitude-longitude-finder/

— กลีน
แหล่งที่มา