HTML-холст как наложение в картах Google, фиксированный относительно холста карты

Question

Я пытаюсь создать холст HTML5 в качестве OverlayView размером с карту, расположить его на top:0; left:0;, нарисовать на нем какие-то элементы и добавить его на карту.Всякий раз, когда карта масштабируется или перемещается, я хочу удалить старый холст с карты и создать новый холст, нарисуйте на нем положение 0,0 и добавьте его на карту.Однако карта никогда не перемещается наверх: 0;Слева направо: 0.Может кто-нибудь помочь?

    function CustomLayer(map){
this.latlngs = new Array();
this.map_ = map;

this.addMarker = function(position){
this.latlngs.push(position);
}

this.drawCanvas = function(){
this.setMap(this.map_);
//google.maps.event.addListener(this.map_, 'bounds_changed',this.reDraw());
}

}

function defineOverlay() {

CustomLayer.prototype = new google.maps.OverlayView();

CustomLayer.prototype.onAdd = function() {
    console.log("onAdd()");
    if(this.canvas){    
    var panes = this.getPanes();
    panes.overlayLayer.appendChild(this.canvas);
    }
}


CustomLayer.prototype.remove = function() {
    console.log("onRemove()");
    if(this.canvas)
    this.canvas.parentNode.removeChild(this.canvas);
}


CustomLayer.prototype.draw = function() {
    console.log("draw()");
        this.remove();
            this.canvas = document.createElement("canvas");
            this.canvas.setAttribute('width', '800px');
            this.canvas.setAttribute('height', '480px');
            this.canvas.setAttribute('top', '30px');
            this.canvas.setAttribute('left', '30px');
            this.canvas.setAttribute('position', 'absolute');
            this.canvas.setAttribute('border', '1px solid red');
            this.canvas.style.border = '1px solid red';

            //using this way for some reason scale up the images and mess up the positions of the markers
            /*this.canvas.style.position = 'absolute';
            this.canvas.style.top = '0px';
            this.canvas.style.left = '0px';
            this.canvas.style.width = '800px'; 
            this.canvas.style.height = '480px';
            this.canvas.style.border = '1px solid red';*/

            //get the projection from this overlay
            overlayProjection = this.getProjection();
            //var mapproj = this.map_.getProjection();

                if(this.canvas.getContext) {
                    var context = this.canvas.getContext('2d');
                    context.clearRect(0,0,800,480);

                    for(i=0; i<this.latlngs.length; i++){

                        p = overlayProjection.fromLatLngToDivPixel(this.latlngs[i]);
                        //p = mapproj.fromLatLngToPoint(this.latlngs[i]);
                        img = new Image();
                        img.src = "standardtick.png";
                            console.log(Math.floor(p.x)+","+Math.floor(p.y));
                    context.drawImage(img,p.x,p.y);
                    }
                }
    this.onAdd();           
    console.log("canvas width:"+this.canvas.width+" canvas height: "+this.canvas.height);
    console.log("canvas top:"+this.canvas.getAttribute("top")+" left: "+this.canvas.getAttribute("left"));  
}
}

Answer 1

В этом примере - я думаю, что важно обратить внимание на разницу между projection.fromLatLngToDivPixel и projection.fromLatLngToContainerPixel. В этом контексте DivPixel используется для сохранения положения холста по центру над видом карты - в то время как ContainerPixel используется для поиска положений фигур, которые вы рисуете на холсте.

Ниже приводится полный рабочий пример, который я разработал, пока сам решал эту проблему.

Обязательные свойства CSS для наложения:

  .GMAPS_OVERLAY
  {
    border-width: 0px;
    border: none;
    position:absolute;
    padding:0px 0px 0px 0px;
    margin:0px 0px 0px 0px;
  }

Инициализация карты и создание теста на основе маркеров Google

  var mapsize    = { width: 500, height: 500 };
  var mapElement = document.getElementById("MAP");

  mapElement.style.height = mapsize.width + "px";
  mapElement.style.width  = mapsize.width + "px";

  var map = new google.maps.Map(document.getElementById("MAP"), {
    mapTypeId: google.maps.MapTypeId.TERRAIN,
    center:    new google.maps.LatLng(0, 0),
    zoom:      2
  });

  // Render G-Markers to Test Proper Canvas-Grid Alignment
  for (var lng = -180; lng < 180; lng += 10)
  {
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(0, lng),
      map: map
    });
  }

Определение пользовательского наложения

  var CanvasOverlay = function(map) {
    this.canvas           = document.createElement("CANVAS");
    this.canvas.className = "GMAPS_OVERLAY";
    this.canvas.height    = mapsize.height;
    this.canvas.width     = mapsize.width;
    this.ctx              = null;
    this.map              = map;

    this.setMap(map);
  };
  CanvasOverlay.prototype = new google.maps.OverlayView();

  CanvasOverlay.prototype.onAdd = function() {
    this.getPanes().overlayLayer.appendChild(this.canvas);
    this.ctx = this.canvas.getContext("2d");
    this.draw();
  };

  CanvasOverlay.prototype.drawLine = function(p1, p2) {
    this.ctx.beginPath();
    this.ctx.moveTo( p1.x, p1.y );
    this.ctx.lineTo( p2.x, p2.y );
    this.ctx.closePath();
    this.ctx.stroke();
  };

  CanvasOverlay.prototype.draw = function() {
    var projection = this.getProjection();

    // Shift the Canvas
    var centerPoint = projection.fromLatLngToDivPixel(this.map.getCenter());
    this.canvas.style.left = (centerPoint.x - mapsize.width  / 2) + "px";
    this.canvas.style.top  = (centerPoint.y - mapsize.height / 2) + "px";

    // Clear the Canvas
    this.ctx.clearRect(0, 0, mapsize.width, mapsize.height);

    // Draw Grid with Canvas
    this.ctx.strokeStyle = "#000000";
    for (var lng = -180; lng < 180; lng += 10)
    {
      this.drawLine(
        projection.fromLatLngToContainerPixel(new google.maps.LatLng(-90, lng)),
        projection.fromLatLngToContainerPixel(new google.maps.LatLng( 90, lng))
      );
    }
  };

Инициализация Canvas

Я считаю, что мне нравится добавлять дополнительный вызов, чтобы привлечь внимание к событию "dragend" - но протестируйте его, чтобы увидеть, что вы думаете о своих потребностях.

  var customMapCanvas = new CanvasOverlay(map);
  google.maps.event.addListener(map, "drawend", function() {
    customMapCanvas.draw();
  };

В случаях, когда рисование на холсте замедляется. Карта

В приложениях, с которыми я работаю, я обнаружил, что Map Framework слишком часто вызывает метод draw на холстах, которые рисуют что-то, что для завершения занимает секунду или около того. В этом случае я определяю функцию-прототип ' draw ' как просто пустую функцию, называя мою настоящую функцию рисования 'canvasDraw' - затем добавляю прослушиватели событий для " zoomend"и" dragend". Здесь вы видите холст, который обновляется только после изменения пользователем уровня масштабирования или в конце действия перетаскивания карты.

  CanvasOverlay.prototype.draw = function() { };      

  ... 

  google.maps.event.addListener(map, "dragend", function() {
    customMapCanvas.canvasDraw();
  });

  google.maps.event.addListener(map, "zoom_changed", function() {
    customMapCanvas.canvasDraw();
  });

Демонстрация в реальном времени: Полный пример - все встроенные источники

Answer 2

Когда ваша карта перемещается, контекст рисования должен знать, что она сместилась.

CustomOverlayView.prototype.alignDrawingPane = function(force) {
    window.mapProjection = this.getProjection(); 
    var center = window.mapProjection.fromLatLngToDivPixel(map.getCenter());
    //My drawing container is dragged along with the map when panning
    //this.drawPane refers to any node in MapPanes retrieved via this.getPanes()
    this.drawPane.css({left:center.x - (mapWidth/2), top:center.y-(mapHeight/2)});
};

Вызовите это в вашем методе draw ().Убедитесь, что ваша ничья вызвана, когда вы закончите перетаскивание:

google.maps.event.addListener(map, 'dragend', function() {
    myCustomOverlay.draw();
});