在圆圈标记内显示文字

时间:2013-05-13 11:28:37

标签: google-maps google-places-api

我想在此示例中显示一个圆圈:

https://developers.google.com/maps/documentation/javascript/examples/circle-simple?hl=en

我不想使用聚集标记,因为我只需要用

显示一些圆圈

里面的数字。

更新

那是我的代码:

$(document).ready(function() {
    //Google maps API initialisation

    var overlay;
    USGSOverlay.prototype = new google.maps.OverlayView();

    /* constructor */
    function USGSOverlay(bounds, map, alarmnumber) {

        // Now initialize all properties.
        this.bounds_ = bounds;
        this.map_ = map;
        this.alarmnumber_ = alarmnumber;

        // We define a property to hold the image's div. We'll
        // actually create this div upon receipt of the onAdd()
        // method so we'll leave it null for now.
        this.div_ = null;

        // Explicitly call setMap on this overlay
        this.setMap(map);
    }

    USGSOverlay.prototype.onAdd = function() {

        // Note: an overlay's receipt of onAdd() indicates that
        // the map's panes are now available for attaching
        // the overlay to the map via the DOM.

        // Create the DIV and set some basic attributes.
        var div = document.createElement('div');
        div.style.borderStyle = 'none';
        div.style.borderWidth = '0px';
        div.style.position = 'absolute';
        div.style.border = '1px solid #000';
        div.style.fontWeight = 'bold';
        div.style.backgroundColor = '#fff';

        $(div).attr('id', 'alarmDiv' + this.alarmnumber_);
        $(div).addClass("circle");
        $(div).addClass("center");

        // Set the overlay's div_ property to this DIV
        this.div_ = div;

        this.div_.innerHTML = this.alarmnumber_;

        // We add an overlay to a map via one of the map's panes.
        // We'll add this overlay to the overlayLayer pane.
        var panes = this.getPanes();
        panes.overlayLayer.appendChild(div);
    };

    USGSOverlay.prototype.draw = function() {

        // Size and position the overlay. We use a southwest and northeast
        // position of the overlay to peg it to the correct position and size.
        // We need to retrieve the projection from this overlay to do this.
        var overlayProjection = this.getProjection();

        // Retrieve the southwest and northeast coordinates of this overlay
        // in latlngs and convert them to pixels coordinates.
        // We'll use these coordinates to resize the DIV.
        var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
        var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());




    // Resize the image's DIV to fit the indicated dimensions.
        var div = this.div_;
        div.style.left = (sw.x - 20) + 'px'; 
        div.style.top = (ne.y - 20) + 'px';  
        div.style.width = 40 + 'px';
        div.style.height = 40 + 'px'; 



    };

    var element = document.getElementById("map");

    var map = new google.maps.Map(element, {
        center: new google.maps.LatLng(48.705236, 9.128566), // Latitude/Breitengrad , Longitude/Längengrad
        zoom: 18,
        mapTypeId: google.maps.MapTypeId.ROADMAP, // Google maps provider
        //mapTypeId: "OSM", // OpenStreetMap provider
        mapTypeControl: false,
        streetViewControl: false
    });

0 个答案:

没有答案