وضع زر على رأس خريطة جوجل

Question

وأود أن وضع زر على رأس خريطة جوجل بجانب خريطة قمر اصطناعي الهجين الأزرار.

كنت أتساءل إذا كان من الممكن وكيف سيكون أفضل طريقة للقيام بذلك ؟

حتى الأفكار هي تتراكب صورة على رأس خريطة جوجل أن نقر ولكن لست متأكدا إذا كان هذا سوف تتخذ جميع الأحداث بعيدا عن خريطة جوجل.

هل لديك أي أفكار حول كيف يمكن أن يتم ذلك ؟

Answer 1

هناك جيدة جدا وصف كيفية القيام بذلك هنا.

أنا متأكد من أنك يمكن أن نمط هؤلاء الرجال أن تبدو مثل الأزرار القياسية ويمكنك بالتأكيد مرساة إلى أعلى اليمين.عندما أحصل على فرصة سوف يعطي هو محاولة التحديث مع النتائج.

تحديث:

أتيحت لي الفرصة لمحاولة ذلك ويعمل موافق:

• خريطة سبيل المثال مع جوجل نمط أزرار
• المصدر جافا سكريبت

أساسا كنت في نهاية المطاف القيام بنفس تنفيذ أزرار باستخدام GControl أو مجرد استخدام المواقع المطلق من شعبة على الخريطة (كما ChrisB اقترح).لذلك أنا لا أعتقد أن هناك الصحيحة (أو أسهل) نهج, انها مجرد مسألة تفضيل شخصي.حظا سعيدا.

Answer 2

والجواب المقبول هو من 2009 (منذ 5 سنوات) وصلات إلى إصدار إهمال من API خرائط جوجل.

وأثناء البحث لنفس السؤال لقد وجدت هذا المثال: https://developers.google.com/maps/documentation/javascript/examples/control-custom

// 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);

homeControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);

Answer 3

فقط لتكملة هاجم بالمدفعية الجواب هنا هو html/css التي خريطة جوجل يستخدم مراقبة.يمكنك تكرار css لجعل الأمر يبدو تماما مثل الشيء الحقيقي.

يمكنك إنشاء الرسمية GControl ، أو هل يمكن أن مجرد مكان لهم على خريطة جوجل مع المواقع المطلق.

زر نشط:

<div style="border: 1px solid black; position: absolute; background-color: white; text-align: center; width: 5em; cursor: pointer; right: 15.3em;" title="Show street map">
    <div style="border-style: solid; border-color: rgb(52, 86, 132) rgb(108, 157, 223) rgb(108, 157, 223) rgb(52, 86, 132); border-width: 1px; font-size: 12px; font-weight: bold;">
        Map
    </div>
</div>

نشط زر:

<div style="border: 1px solid black; position: absolute; background-color: white; text-align: center; width: 5em; cursor: pointer; right: 5.1em;" title="Show imagery with street names">
    <div style="border-style: solid; border-color: white rgb(176, 176, 176) rgb(176, 176, 176) white; border-width: 1px; font-size: 12px;">
        Hybrid
    </div>
</div>

---

تحديث: هناك أيضا ملحق في خرائط جوجل فائدة المكتبة التي يمكن إنجاز هذا - ExtMapTypeControl

Answer 4

وكان لي أيضا نفس المشكلة، هذه هي الطريقة التي فعلت ذلك، إنشاء زر واعطائها التصميم أدناه

ومعرف = "my_button"

 #my_button{
          position:absolute;
          bottom:2%;
          color: #fff;
          background-color: #4d90fe;
          padding: 11px;

          border: 1px solid transparent;
          border-radius: 2px;
          box-sizing: border-box;
          -moz-box-sizing: border-box;

          outline: none;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
          alignment-baseline:central;
          width:90%;
          left:5%;
          text-align:center;
          text-decoration:none;


          margin:0px auto;}


         #my_button:hover{
             background-color:#3B6EC2;} 

Answer 5

وباستخدام مسج يبدو مثل هذا: أولا، إنشاء وظيفة، التي سيعود العنصر الخاص بك

function myButton(){
    var btn = $('<div class="my-button"></div>');
    btn.bind('click', function(){
        // logic here...
        alert('button clicked!');
    });
    return btn[0];
}

وبعد تم إنشاء خريطة تحتاج إلى إرفاق الزر الخاص بك إلى ما يلي:

map.controls[google.maps.ControlPosition.TOP_CENTER].push(myButton());