خرائط Google: كيفية فتح infoWindow لمضلع من خلال النقر عليه؟

Question

لدي سؤال بسيط ، لكن لا يمكنني العثور على الإجابة في وثائق API خرائط Google ...

لدي خريطة مع 13 مضلعة رسمها API. إليكم مجموعة من هذه المضلعات:

 var zone_up_montblanc = new GPolygon([
        new GLatLng(46.21270329318585, 6.134903900311617), 
        new GLatLng(46.20538443787925, 6.136844716370282), 
        new GLatLng(46.20525043957647, 6.141375978638086), 
        new GLatLng(46.20698751554006, 6.148050266912262), 
        new GLatLng(46.21110286985207, 6.153203229026629), 
        new GLatLng(46.21730757985668, 6.151718301267355), 
        new GLatLng(46.22092122197341, 6.153676364285801), 
        new GLatLng(46.22615123408969, 6.149844858907489), 
        new GLatLng(46.22851200024137, 6.149876939987202), 
        new GLatLng(46.22945159836955, 6.142758190170017), 
        new GLatLng(46.21735908463437, 6.141457132705133), 
        new GLatLng(46.21753573755057, 6.138058122426195), 
        new GLatLng(46.21270329318585, 6.134903900311617)
        ], "#6b1f43", 2, 0.9, "#92c87f", 0.5);

ومن بعد :

  map.addOverlay(zone_up_montblanc);

تظهر المضلعات على خريطتي ، لا مشكلة. لكن الشيء الذي يجب علي فعله الآن هو فتح "InfoWindow" من خلال النقر على كل مضلعات (مع محتوى مختلف لكل مضلع).

هل كان لدى شخص ما فكرة أو مثال؟

شكرا جزيلا لمساعدتكم !

Answer 1

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

دعنا نبدأ:

1. أنت تضيف مضلعات باستخدام Map.AdDoverlay () ، ثم تخزن الخريطة المضلعات.
2. أعلن معالج الأحداث الذي يمسك بالنقرات على الخريطة. سيتم تمرير معالج الأحداث هذا على النقر فوق glatlng من الموقع ، والتراكب الذي تم النقر عليه (في حالتك المضلع). يمكنك إجراء اختبار نوع بسيط لتحديد ما إذا كان التراكب عبارة عن مضلع.
3. في معالج الحدث ، استخدم map.openinfowindowhtml () ، مروّر glatlng الموردة كموقع ، ومحتوى HTML الذي تريد عرضه.

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

• إضافة معالجات الأحداث إلى الخريطة
• التحقق من نوع التراكب

يجب أن تكون قادرًا على العثور على طرق الاتصال وجميع المعلومات على صفحة API:

http://code.google.com/apis/maps/documentation/reference.html

حظا طيبا وفقك الله!

Answer 2

لقد وجدت حلاً لطيفًا جدًا لوجود مضلعات متعددة مع InfoWindows الفردية.

ها هو رمزتي:

<script type="text/javascript"
        src="https://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript" charset="utf-8">

    var map;
    var cities = {
        "Hamburg":[
            [53.60, 9.75],
            [53.73, 10.19],
            [53.48, 10.22]
        ],
        "Hannover":[
            [52.34, 9.61],
            [52.28, 9.81],
            [52.43, 9.85]
        ],
        "Bremen":[
            [53.22, 8.49],
            [53.12, 8.92],
            [53.02, 8.72]
        ]
    };
    var opened_info = new google.maps.InfoWindow();

    function init() {
        var mapOptions = {
            zoom:8,
            center:new google.maps.LatLng(53, 9.2),
            mapTypeId:google.maps.MapTypeId.TERRAIN
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),
                mapOptions);
        for (var c in cities) {
            var coods = cities[c]
            var polyPath = [];
            for (j = 0; j < coods.length; j++) {
                polyPath.push(new google.maps.LatLng(coods[j][0], coods[j][1]));
            }
            var shape = new google.maps.Polygon({
                paths:polyPath,
                fillColor:"#00FF00",
                fillOpacity:0.6,
            });
            shape.infowindow = new google.maps.InfoWindow(
                    {
                        content:"<b>" + c + "</b>" + "</br>",
                    });
            shape.infowindow.name = c;
            shape.setMap(map);
            google.maps.event.addListener(shape, 'click', showInfo);
        }

    }
    ;

    function showInfo(event) {
        opened_info.close();
        if (opened_info.name != this.infowindow.name) {
            this.infowindow.setPosition(event.latLng);
            this.infowindow.open(map);
            opened_info = this.infowindow;
        }
    }

</script>

يوفر أيضًا الوظيفة لإغلاق InfoWindows من خلال النقر على نفس المضلع مرة أخرى.

Answer 3

مرحبا وشكرا الكثير من filip-fku!

بفضل تعليقك ، أجد فينالي كيفية القيام بذلك! :-) لذا ، إذا كان أي شخص يبحث عن "كيفية القيام بذلك" ، فهناك مقتطف الكود:

GEvent.addListener(zone_up_champagne, "click", function(overlay,latlng) {
    map.openInfoWindowHtml(overlay, '<strong>Your html things :</strong><br />etc...');
});

أتمنى أن يساعد هذا!

شكرا مرة أخرى فيليب! قون

Answer 4

لا حاجة infoWindow العالمية. تهيئة InfoWindow في الجانب يعمل معالج الأحداث. استخدم هذا protoype للتحقق مما إذا كانت النقطة موجودة في مثيل من المضلع في مجموعة من المضلعات.

http://hammerspace.co.uk/projects/maps/

هناك مثال فعال في http://www.ikeepuposted.com/area_served.aspx

Answer 5

في V3 ، ستظل تستخدم InfoWindow ، ولكن مع بناء جملة مختلف:

function initialize() {

// SOME CODE
var mont_blanc_path_array = [ 
new google.maps.LatLng(46.21270329318585, 6.134903900311617),
new google.maps.LatLng(46.20538443787925, 6.136844716370282),
new google.maps.LatLng(46.20525043957647, 6.141375978638086)
];
zone_up_montblanc = new google.maps.Polygon({
    editable: false,    
    paths: mont_blanc_path_array,       
    fillColor: "#0000FF",
    fillOpacity: 0.5,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,     
    strokeWeight: 2
});
// Creating InfoWindow object
var infowindow = new google.maps.InfoWindow({
    content: ' ',
    suppressMapPan:true
});
eventPolygonClick = google.maps.event.addListener(zone_up_montblanc, 'click', function() {
    // MORE CODE OR FUNCTION CALLS
});
// MORE CODE

}

في أي مكان تشعر بتغيير النص وعرض InfoWindow:

infowindow.setContent("CLICKED me");
infowindow.open(map, zone_up_montblanc);

لقد صنعت متغيرات Polygon و EventListener العالمية (عن طريق قمع "VAR" في الإعلان المتغير) ، بحيث يمكنك تغييرها في وظائف أخرى. هذا يثبت صعبًا مع سلوك InfoWindow. بعض الناس يفضلون مثيلات InfoWindow ، أفضل أن يكون لدي مثال عالمي واحد وتغيير محتواه أثناء الطيران. احذر من تأثير الإعلانات المتغيرة!

AddListener الأخرى للمضلعات هي عربات التي تجرها الدواب ويجب اختبارها على جميع المتصفحات الرئيسية قبل النشر ، وخاصة اختلافات السحب والماوس.

هذا له بعض الإشارة: http://code.google.com/apis/maps/documentation/javaScript/overlays.html