谷歌地圖javascript自定義表面

我想繪製一個地圖與谷歌地圖javascript api在自定義的網頁。谷歌地圖javascript自定義表面

我發現的所有東西都是如何在地圖上繪製，但是有背景地圖。我實現了使用自定義功能在本地主機上繪製地圖。

我想從數據源創建我的自定義映射。

比方說，我有不同的多形式的座標數據庫：

房間1：（0,0） - （10,0） - （15，10） - （10，15） - （ 5，10） - （0，10） - （0，0） Room2：etc ...

然後我想在google地圖中繪製這些表單，這樣我就可以使用鼠標移動，縮放等功能信息窗口，當鼠標在房間的中心點擊以顯示房間信息（描述，表面等...），就像谷歌地圖在地圖中所做的那樣。

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

的問題是： - 是否有可能做到這一點與谷歌地圖API？怎麼樣？（數據結構和JavaScript代碼） - 如果沒有，我必須實現這樣的控件有哪些可能性？

來源

2011-09-19 Miquel

好的，這裏是我的解決方案。希望它能幫助別人！
它適用於jQuery，谷歌地圖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); 
}

來源

2011-09-22 08:22:05 Miquel

爲此，可以使用類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 
    ); 

}

隨着這個代碼你應該能夠在地圖上繪製任何與標記完全相同的東西（當你進行縮放，移動地圖等等）。

來源

2011-09-19 11:40:09 cicloon

這是偉大的！謝謝，現在我正在學習http://code.google.com/intl/ca/apis/maps/documentation/javascript/overlays.html。現在，我怎麼擦除背景？發生在我身上的一件事是製作一個白色覆蓋層......但這意味着加載地圖並加載覆蓋層......任何簡單的方法？再次感謝您的幫助 – Miquel

谷歌地圖javascript自定義表面

回答

相關問題