Scribd Logo
Unggah

Selamat datang di Scribd!

  • Label Overlay Example For Google Maps API v3

    Diunggah oleh

    Raden Royish
    24 tayangan3 halaman
    This document provides an example of creating a custom label overlay for Google Maps API v3. It defines a Label class that extends google.maps.OverlayView and implements required methods like onAdd and draw. The label can display text that updates when bound to a marker's position. The example code initializes a map, adds a marker, creates a label bound to the marker, and renders the label on the map to display the marker's coordinates.

    Deskripsi Asli:

    belajar overlay layer

    Judul Asli

    Overlay Layer

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOCX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    This document provides an example of creating a custom label overlay for Google Maps API v3. It defines a Label class that extends google.maps.OverlayView and implements required methods like onAdd and draw. The label can display text that updates when bound to a marker's position. The example code initializes a map, adds a marker, creates a label bound to the marker, and renders the label on the map to display the marker's coordinates.

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    24 tayangan3 halaman

    Label Overlay Example For Google Maps API v3

    Diunggah oleh

    Raden Royish
    This document provides an example of creating a custom label overlay for Google Maps API v3. It defines a Label class that extends google.maps.OverlayView and implements required methods like onAdd and draw. The label can display text that updates when bound to a marker's position. The example code initializes a map, adds a marker, creates a label bound to the marker, and renders the label on the map to display the marker's coordinates.

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 3

    SEP

    29

    Label overlay example for Google Maps API v3


    Here's a simple example of creating a custom overlay class for Google Maps API v3. This Label
    overlay can either be used on its own, or bound to a marker.

    First, create the Label class and place it in a label.js file.

    // Define the overlay, derived from google.maps.OverlayView


    function Label(opt_options) {
    // Initialization
    this.setValues(opt_options);

    // Label specific
    var span = this.span_ = document.createElement('span');
    span.style.cssText = 'position: relative; left: -50%; top: -8px; ' +
    'white-space: nowrap; border: 1px solid blue; ' +
    'padding: 2px; background-color: white';

    var div = this.div_ = document.createElement('div');


    div.appendChild(span);
    div.style.cssText = 'position: absolute; display: none';
    };
    Label.prototype = new google.maps.OverlayView;

    // Implement onAdd
    Label.prototype.onAdd = function() {
    var pane = this.getPanes().overlayLayer;
    pane.appendChild(this.div_);

    // Ensures the label is redrawn if the text or position is changed.


    var me = this;
    this.listeners_ = [
    google.maps.event.addListener(this, 'position_changed',
    function() { me.draw(); }),
    google.maps.event.addListener(this, 'text_changed',
    function() { me.draw(); })
    ];
    };

    // Implement onRemove
    Label.prototype.onRemove = function() {
    this.div_.parentNode.removeChild(this.div_);

    // Label is removed from the map, stop updating its position/text.


    for (var i = 0, I = this.listeners_.length; i < I; ++i) {
    google.maps.event.removeListener(this.listeners_[i]);
    }
    };
    // Implement draw
    Label.prototype.draw = function() {
    var projection = this.getProjection();
    var position = projection.fromLatLngToDivPixel(this.get('position'));

    var div = this.div_;


    div.style.left = position.x + 'px';
    div.style.top = position.y + 'px';
    div.style.display = 'block';

    this.span_.innerHTML = this.get('text').toString();
    };

    Then use label.js in the map initialization:

    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Label Overlay Example</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?
    sensor=false"></script>
    <script type="text/javascript" src="label.js"></script>
    <script type="text/javascript">
    function initialize() {
    var latLng = new google.maps.LatLng(40, -100);

    var map = new google.maps.Map(document.getElementById('map_canvas'), {


    zoom: 5,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var marker = new google.maps.Marker({


    position: latLng,
    draggable: true,
    map: map
    });

    var label = new Label({


    map: map
    });
    label.bindTo('position', marker, 'position');
    label.bindTo('text', marker, 'position');
    };
    </script>
    </head>
    <body onload="initialize()">
    <div id="map_canvas" style="height: 100%; width: 100%"></div>
    </body>
    </html>

    When run, it looks like this:


    Drag the marker around and the text of the label with update with the LatLng of the marker.

    Anda mungkin juga menyukai