Как применить текст к полилиниям Google Maps?

Прошу прощения, что это повторяющийся вопрос. Я следил за ответами, но работал так, как хочу. У меня есть класс Label, но это не то, что я хочу.

У меня есть карта с нарисованной на ней пользовательской сеткой. благодаря @geocodezip

var map;

var qtrArray = [];
var linesArray = [];
var Startlatlng;
var llOffset = 0.0666666666666667;

var drawGridBox = false;
var gridline;
var polylinesquare;
var latPolylines = [];
var lngPolylines = [];
var bounds = new google.maps.LatLngBounds();

function initialize() {
    map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: new google.maps.LatLng(34.00, -84.00),
        zoom: 10,
        streetViewControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scaleControl: true
    });

    google.maps.event.addListener(map, 'click', function (event) {
    createGridBox(event.latLng);
    });
    DrawGridOn();
    google.maps.event.addListener(map, 'idle', function () {
        createGridLines(map.getBounds());
    }); 
}
google.maps.event.addDomListener(window, 'load', initialize);

function DrawGridOn() {
    drawGridBox = true;
}

function DrawGridOff() {
    drawGridBox = false;
}


function ClearLastGrid() {
    polyline.setMap(null);
}

function createGridLines(bounds) {
    for (var i = 0; i < latPolylines.length; i++) {
        latPolylines[i].setMap(null);
    }
    latPolylines = [];
    for (var i = 0; i < lngPolylines.length; i++) {
        lngPolylines[i].setMap(null);
    }
    lngPolylines = [];
    if (map.getZoom() <= 6) return;
    var north = bounds.getNorthEast().lat();
    var east = bounds.getNorthEast().lng();
    var south = bounds.getSouthWest().lat();
    var west = bounds.getSouthWest().lng();

    // define the size of the grid
    var topLat = Math.ceil(north / llOffset) * llOffset;
    var rightLong = Math.ceil(east / llOffset) * llOffset;

    var bottomLat = Math.floor(south / llOffset) * llOffset;
    var leftLong = Math.floor(west / llOffset) * llOffset;

    for (var latitude = bottomLat; latitude <= topLat; latitude += llOffset) {
        // lines of latitude
        latPolylines.push(new google.maps.Polyline({
            path: [
            new google.maps.LatLng(latitude, leftLong),
            new google.maps.LatLng(latitude, rightLong)],
            map: map,
            geodesic: true,
            strokeColor: '#0000FF',
            strokeOpacity: 0.5,
            strokeWeight: 1
        }));
    }
    for (var longitude = leftLong; longitude <= rightLong; longitude += llOffset) {
        // lines of longitude
        lngPolylines.push(new google.maps.Polyline({
            path: [
            new google.maps.LatLng(topLat, longitude),
            new google.maps.LatLng(bottomLat, longitude)],
            map: map,
            geodesic: true,
            strokeColor: '#0000FF',
            strokeOpacity: 0.5,
            strokeWeight: 1
        }));
    }
}

function createGridBox(point) {
    // Square limits
    var bottomLeftLat = Math.floor(point.lat() / llOffset) * llOffset;
    var bottomLeftLong = Math.floor(point.lng() / llOffset) * llOffset;

    var i;

    var gridLineSquare = [
    new google.maps.LatLng(bottomLeftLat, bottomLeftLong), //lwr left
    new google.maps.LatLng(bottomLeftLat, bottomLeftLong + llOffset), //lwr right
    new google.maps.LatLng(bottomLeftLat + llOffset, bottomLeftLong + llOffset), //upr right
    new google.maps.LatLng(bottomLeftLat + llOffset, bottomLeftLong),
    new google.maps.LatLng(bottomLeftLat, bottomLeftLong)];


    for (i = 0; i < gridLineSquare.length; i++) {
        bounds.extend(gridLineSquare[i]);
    }

    // external.getData(event.latLng);
    if (drawGridBox == true) {
        polyline = new google.maps.Polyline({
            path: gridLineSquare,
            geodesic: true,
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 2
        });

        polyline.setMap(map);
        qtrArray.push(polyline);
    }
}

Все, что я действительно хочу сделать, это пометить горизонтальные линии широтой (в левой части карты) и пометить вертикальные линии долготой. Я знаю, как отобразить эту информацию с помощью события OnClick в InfoWindow, но это сыровато. Я видел несколько заявлений от пользовательских классов, но ни одно из них не сработало. Поскольку всем примерам как минимум два года, я надеялся, что появилось что-то новое.


person Meta Mussel    schedule 24.07.2015    source источник
comment
Почему бы просто не использовать информационное окно как ярлык карты   -  person geocodezip    schedule 25.07.2015
comment
Возможный дубликат Показать значение рядом со строкой на картах Google   -  person geocodezip    schedule 25.07.2015
comment
Кроме того, что одновременно можно открыть только одно информационное окно, я хочу, чтобы линии были помечены так же, как дорога.,   -  person Meta Mussel    schedule 25.07.2015
comment
Откуда вы взяли, что одновременно может быть открыт только один InfoBox (это даже не верно для InfoWindows в версии 3)?   -  person geocodezip    schedule 25.07.2015
comment
Я предполагаю, что это было плохое предположение. Но вы дали мне хорошее руководство до сих пор. Моя сетка должна показаться вам знакомой. ;) Есть ли способ пометить мои вертикальные и горизонтальные линии соответствующими долготами и широтами во время рисования карты?   -  person Meta Mussel    schedule 25.07.2015


Ответы (1)