javascript - 谷歌地图javascript自定义表面

Question

我正在尝试在自定义网页中使用 google maps javascript api 绘制 map 。

我发现的所有内容都是如何在 map 上绘画，但要使用背景 map 。我实现了在本地主机中使用自定义功能绘制 map 。

我想要从数据源创建自定义 map 。

假设我有一个包含不同多边形坐标的数据库:

房间 1:(0, 0) - (10, 0) - (15, 10) - (10, 15) - (5, 10) - (0, 10) - (0, 0) Room2:等等……

然后我想在谷歌地图中绘制这些表格，这样当鼠标在房间中央单击时我可以使用鼠标移动、缩放和信息窗口等功能来显示房间信息(描述、表面等... ) 就像谷歌地图在 map 中所做的那样。

其他选项是使用，但我问我如何通过 Canvas 实现导航(基本上是鼠标移动、缩放和信息窗口)

问题是: - 是否可以使用 google maps api 来实现？如何？ (数据结构和javascript代码) - 如果不是，我有哪些可能性必须实现这样的控制？

Answer 1

您可以使用类 OverlayView 并覆盖一些需要的方法来执行此操作(请注意，我在这里使用 jQuery 创建 html，但您可以随心所欲地执行此操作):

YourCustomFormMarker.prototype = new google.maps.OverlayView;

YourCustomFormMarker.prototype.onAdd = function(){
    var $markerDiv = $("your html here");        


    this.div_ = $markerDiv[0];

    var panes = this.getPanes();
    panes.overlayMouseTarget.appendChild($markerDiv[0]);

}

YourCustomFormMarker.prototype.draw = function(){
    var overlayProjection = this.getProjection();

    var position = overlayProjection.fromLatLngToDivPixel(this.options.position);
    var div = this.div_;
    div.style.left = (position.x - this.options.x_offset)  + 'px';
    div.style.top  = (position.y - this.options.y_offset) + 'px';


}

YourCustomFormMarker.prototype.onRemove = function() {
    $(this.div_).remove();
    this.div_ = null;
}


function YourCustomFormMarker(options){

    var defaultOptions = {
        position : null,
        label: 'empty',
        time: '',
        x_offset: 15,
        y_offset: 0
    };

    //Merge options with default options
    this.options = $.extend(true, {},
        defaultOptions,
        options
    );

}

使用此代码，您应该能够在 map 中绘制任何行为与标记完全相同的内容(当您进行缩放、移动 map 等时...)。