Question

我正在尝试使用谷歌地图javascript api在自定义网页中绘制地图。

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

我想要的是从数据源创建自定义地图。

假设我有一个数据库，其坐标为不同的多边形：

房间1：（0,0） - （10,0） - （15,10） - （10,15） - （5,10） - （0,10） - （0,0） Room2：等......

然后我想在谷歌地图中绘制这些表格，所以我可以使用鼠标移动，缩放和信息窗口等功能，当鼠标点击房间的中心，以显示房间信息（描述，表面等... ）像谷歌地图一样在地图中。

其他选项是使用，但后来我问我怎样才能在画布上实现导航（基本上是鼠标移动，缩放和信息窗口）

问题是： - 谷歌地图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
    );

}

使用此代码，您应该能够在地图中绘制任何与标记完全相同的内容（当您进行缩放，移动地图等等时）。

Answer 2

好的，这是我的解决方案。希望它可以帮到某人！
它适用于jquery，Google Maps V3。

这是html：

<body>
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="js/GM_LoadMap.js"></script>
Your map:<br/>

<div id="map" style="width: 600px; height: 400px"></div>
</body>

JS / GM_LoadMap.js：

var infoWindow;

$("body").ready(function() {load()});
$("body").unload(function() {GUnload();});

/************************************************************************************
 * Métode d'inici
 ************************************************************************************/

function load() {
    var domMap = $("#map")[0];
    var myLatLng = new google.maps.LatLng(0,0);
    var myOptions = {
            zoom: 5,
            center: myLatLng,
            mapTypeControlOptions: {
                mapTypeIds: ['TControl']
            }
    };

    var map = new google.maps.Map(domMap, myOptions);

    createBlankCanvas(map, 600, 400);
    addPolyForm(map);
}

创建空白图像背景：

function createBlankCanvas(map, width, height) {
    var minZoomLevel = 0;
    var maxZoomLevel = 18;

    // Crea un fons en blanc
    var ubicaciones = new google.maps.ImageMapType({
            getTileUrl: function(coord, zoom) {
                return "";
            },
        tileSize: new google.maps.Size(width, height),
        maxZoom:maxZoomLevel,
        minZoom:minZoomLevel,
        isPng: true,
        name: 'Ubicaciones',
        opacity: 0.5
    });

    map.mapTypes.set('TControl', ubicaciones);
    map.setMapTypeId('TControl');
    map.setZoom(5); 
}

显示多种形式：

function addPolyForm(map) {
    var bermudaTriangle;
    var triangleCoords = [
                          new google.maps.LatLng(0,0),
                          new google.maps.LatLng(0, 1),
                          new google.maps.LatLng(1, 0.5)
                          ];

    bermudaTriangle = new google.maps.Polygon({
        paths: triangleCoords,
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 3,
        fillColor: "#FF0000",
        fillOpacity: 0.35
    });

    bermudaTriangle.setMap(map);

    // Add a listener for the click event
    google.maps.event.addListener(bermudaTriangle, 'click', showArrays);
    infowindow = new google.maps.InfoWindow();
}

显示信息窗口：

function showArrays(event) {

    // Since this Polygon only has one path, we can call getPath()
    // to return the MVCArray of LatLngs
    var vertices = this.getPath();

    var contentString = "<b>Triangle de les Bermudes:</b><br />";
    contentString += "Posici&ocaute seleccionada: <br />" + event.latLng.lat() + "," + event.latLng.lng() + "<br />";

    // Iterate over the vertices.
    for (var i=0; i < vertices.length; i++) {
        var xy = vertices.getAt(i);
        contentString += "<br />" + "Coordenada: " + i + "<br />" + xy.lat() +"," + xy.lng();
    }

    // Replace our Info Window's content and position
    infowindow.setContent(contentString);
    infowindow.setPosition(event.latLng);

    infowindow.open(map);
}

谷歌地图javascript自定义表面

2 个答案: