如何将文本应用于 Google 地图多段线?

How to apply text to Google Maps polylines?

很抱歉这是一个重复的问题。我遵循了答案,但按照我的意愿工作。我有标签 class 但它不是我想要的。

我有一张地图,上面绘制了自定义网格。感谢@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);
    }
}

我真正想做的就是用纬度标记水平线(在地图的左侧)并用经度标记垂直线。我知道如何通过 InfoWindow 中的 OnClick 事件显示该信息,但这很俗气。我已经看到来自自定义 classes 的一些声明,但 none 已被淘汰。由于所有示例至少已有两年历史,我希望出现新的东西。

我找到的最好的是这个,但不是最近的

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/maplabel/src/

图片

图片来源于此sample