วิธีทำให้งงงวยข้อมูลเมื่อใช้ Google Maps?


9

ผมเคยทำงานบนแผนที่ Google (v3 ของ API) ที่วางแผน 120 เครื่องหมายหรือดังนั้น (หรือจะทำไม่นาน) - ดูhttp://www.mediwales.com/mapping หากคุณดูที่มาข้อมูลแผนที่จะเป็นข้อมูลสำหรับทุกการมองเห็นเป็นไปได้หรือไม่ที่จะซ่อนสิ่งนี้

ฉันไม่กังวลเกี่ยวกับรหัสที่สร้างแผนที่ แต่เป็นข้อมูล ข้อมูลถูกจับจาก Wordpress cms

นี่คือรหัสที่สร้างมันทั้งหมด:

<script type="text/javascript"> 
(function() { 

window.onload = function() { 
 var mc;
// Creating an object literal containing the properties we want to pass to the map 
var options = { 
zoom: 10, 
center: new google.maps.LatLng(52.40, -3.61), 
mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

// Creating the map 
var map = new google.maps.Map(document.getElementById('map'), options); 

// Creating a LatLngBounds object 
var bounds = new google.maps.LatLngBounds(); 

// Creating an array that will contain the addresses 
var places = []; 

// Creating a variable that will hold the InfoWindow object 
var infowindow; 
mc = new MarkerClusterer(map);
<?php
$pages = get_pages(array('child_of' => $post->ID, 'sort_column' => 'menu_order'));
$popup_content = array();
foreach($pages as $post)
    {
    setup_postdata($post);
    $fields = get_fields(); 
    $popup_content[] = '<p>'.$fields->company_name.'</p><img src="'.$fields->company_logo.'" /><br /><br /><a href="'.get_page_link($post->ID).'">View profile</a>';
    $comma = ", ";
    $full_address = "{$fields->address_line_1}{$comma}{$fields->address_line_2}{$comma}{$fields->address_line_3}{$comma}{$fields->post_code}";
    $address[] = $full_address;
    }
wp_reset_query();
echo 'var popup_content = ' . json_encode($popup_content) . ';';
echo 'var address = ' . json_encode($address) . ';';
?>

var geocoder = new google.maps.Geocoder(); 

var markers = [];

// Adding a LatLng object for each city  
for (var i = 0; i < address.length; i++) { 
    (function(i) { 
        geocoder.geocode( {'address': address[i]}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                places[i] = results[0].geometry.location;

                // Adding the markers 
                var marker = new google.maps.Marker({position: places[i], map: map});
                markers.push(marker);
                mc.addMarker(marker);

                // Creating the event listener. It now has access to the values of i and marker as they were during its creation
                google.maps.event.addListener(marker, 'click', function() {
                    // Check to see if we already have an InfoWindow
                    if (!infowindow) {
                        infowindow = new google.maps.InfoWindow();
                    }

                    // Setting the content of the InfoWindow
                    infowindow.setContent(popup_content[i]);

                    // Tying the InfoWindow to the marker 
                    infowindow.open(map, marker);
                });

                // Extending the bounds object with each LatLng 
                bounds.extend(places[i]); 

                // Adjusting the map to new bounding box 
                map.fitBounds(bounds) 
            } else { 
            alert("Geocode was not successful for the following reason: " + status); 
            }

        });

    })(i);

} 
var markerCluster = new MarkerClusterer(map, markers); 
} 
})
(); 
</script>

คุณหมายถึงข้อมูลอะไร popup_contentและaddress?
Sasa Ivetic

@SasaIvetic ทั้งคู่ถ้าเป็นไปได้
Rob

คำตอบ:


7

คุณสามารถจัดเก็บข้อมูลของคุณในฐานข้อมูล ( Fusion Tablesเป็นวิธีแก้ปัญหาอย่างรวดเร็ว)

Google Maps มีบทช่วยสอนที่แสดงให้คุณเห็นว่าทำอย่างไรกับ MySQL (แต่สามารถเป็นฐานข้อมูลใด ๆ ) http://code.google.com/apis/maps/articles/phpsqlajax_v3.html

คุณสามารถรับความปลอดภัยและสับสนตามที่คุณต้องการโดยใช้ฐานข้อมูลส่วนหลัง

ดูเหมือนว่าคุณเข้ารหัสภูมิศาสตร์ข้อมูลของคุณทันทีคุณจะถูก จำกัด ที่ 1,000 คำขอต่อวันต่อที่อยู่ IP

จะมีประสิทธิภาพมากขึ้นในการเข้ารหัสภูมิศาสตร์จากนั้นอัปเดตฐานข้อมูลใกล้เวลาจริง


1
คำแนะนำที่ดีสำหรับ Fusion Tables! Fusion Tables มีข้อ จำกัด ทางภูมิศาสตร์ แต่ฉันจำไม่ได้ตอนนี้ แต่มันสูงกว่าขีด จำกัด API มาก ข้อเสียเปรียบเพียงอย่างเดียวคือคุณจะต้องทำให้ข้อมูล WordPress ของคุณซิงค์กับ Fusion Table (หรือใช้ข้อมูล Fusion Tables ในไซต์ wordpress ของคุณ)
Sasa Ivetic

นี่เป็นความคิดที่ดี ขีด จำกัด API ได้เปลี่ยนแปลงไปเมื่อเร็ว ๆ นี้ ฉันกำลังป้อนรายละเอียดเป็นคำตอบแยกต่างหากสำหรับที่ว่าง แต่ @Mapperz ให้คำตอบที่แท้จริงเพียงต้องการให้แน่ใจว่าเหมืองของฉันไม่ถูกมองว่าเป็นเลียนแบบ!
Ellie Kesselman

@Mapperz นี่เป็นทิศทางที่ฉันต้องการจะไป ... ถ้าเพียง แต่ฉันรู้วิธี! คิดว่าฉันอาจต้องการตัวอย่างของรหัส ... ฉันจะเพิ่มค่าหัว
Rob

4

คุณจะไม่สามารถซ่อนเนื้อหาของpopup_contentและaddressจากผู้ใช้จริง ๆ เพียงเพราะสิ่งที่ถูกส่งไปยังหน้าเว็บนั้นจะปรากฏแก่ผู้ใช้ปลายทางอย่างชัดเจน แทนที่จะทิ้งทุกอย่างในขณะโหลดคุณสามารถทำคำขอ async ได้จากการคลิกบนแผนที่ ในclickฟังก์ชั่นการจัดการของคุณคุณต้องการที่จะขอจากหน้า PHP สำหรับ popup_content [i] และเปิด infoWindow เมื่อคำขอเสร็จสมบูรณ์ (อีกทางหนึ่งให้เปิด infoWindow ทันทีด้วยการโหลดข้อความ ... และอัปเดตข้อความในภายหลัง) . คุณสามารถจัดการที่อยู่ในแบบเดียวกัน

หมายเหตุ: วิธีการแก้ปัญหานี้ยังคงไม่ซ่อนเนื้อหาจากผู้ใช้มันเพียงแค่ความล่าช้าในการโหลดเพื่อให้ข้อมูลทั้งหมดไม่ปรากฏทันที นอกจากนี้ยังจะส่งผลเสียต่อประสิทธิภาพการทำงานของคุณ

อีกทางเลือกหนึ่งคุณอาจทำให้ข้อมูลยุ่งเหยิงในบางวิธี นอกจากนี้คุณยังสามารถส่งออกข้อมูลไปยังไฟล์ JavaScript แยกต่างหากขณะโหลดด้วยวิธีนี้จะไม่สามารถมองเห็นได้ทันทีเมื่อผู้ใช้คลิกดูแหล่งที่มา อีกครั้งข้อมูลไม่ได้ถูกซ่อนจากผู้ใช้ มันถูกลบออกจากสายตาธรรมดา

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.