谷歌地圖javascript自定義表面

Question

我正在嘗試用自定義網頁中的谷歌地圖javascript api繪制地圖。

我發現的所有內容都是如何在地圖上繪畫，而是使用背景地圖。 我實現了在localhost中使用自定義功能繪制地圖。

我想要的是從數據源創建自定義地圖。

假設我有一個包含不同多邊形形式坐標的數據庫：

房間1：（0,0） - （10,0） - （15,10） - （10,15） - （5,10） - （0,10） - （0,0）房間2：等...

然后我想在谷歌地圖中繪制這些形式，所以我可以使用鼠標移動，縮放和信息窗口等功能鼠標點擊房間的中心，以顯示房間信息（描述，表面等...）像谷歌地圖在地圖中有效。

其他選擇是使用，但后來我問我怎么能通過畫布實現導航（基本上鼠標移動，縮放和信息窗口）

問題是： - 是否可以使用谷歌地圖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 個解決方案

解決方案1
1 2011-09-19 11:40:09

解決方案2
0 已采納 2011-09-22 08:22:05

谷歌地圖javascript自定義表面

問題描述

2 個解決方案

解決方案1 1 2011-09-19 11:40:09

解決方案2 0 已采納 2011-09-22 08:22:05

解決方案1
1 2011-09-19 11:40:09

解決方案2
0 已采納 2011-09-22 08:22:05