2015-07-24 6 views
0

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

У меня есть карта с пользовательской сеткой, нарисованной на ней. благодаря @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, но это cheesey. Я видел несколько претензий в пользовательских классах, но никто не выходил из игры. Поскольку все примеры - два года, я, как минимум, надеялся, что придет что-то новое.

+0

Почему бы не просто использовать [InfoBox] (HTTP: //google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html) в качестве [метки карты] (http: //google-maps-utility-library-v3.googlecode .com/svn/trunk/infobox/examples/infobox-label.html) – geocodezip

+0

Возможный дубликат [Показать значение рядом с строкой на картах Google] (http://stackoverflow.com/questions/29879425/show-value-next-to-line-in-google-maps) – geocodezip

+0

Кроме того, только один информационный блок может быть открыто одновременно, я хочу, чтобы строки были помечены как дорожная. –

ответ

0

Чем лучше я нашел это, но не недавний

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

Изображение enter image description here

образ пришел из этого sample

+0

Я посмотрю. Спасибо –

+0

Спасибо за это, но я не думаю, что это так. Посмотрите на свою карту, подумайте над такими лейблами, как на улицах, дорогах и реках. –

 Смежные вопросы

  • Нет связанных вопросов^_^