谷歌地图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自定义表面

回答

相关问题