谷歌地图javascript自定义界面_Javascript_Google Maps Api 3

谷歌地图javascript自定义界面

javascript google-maps-api-3

谷歌地图javascript自定义界面,javascript,google-maps-api-3,Javascript,Google Maps Api 3,我正在尝试在自定义网页中使用GoogleMapsJavaScriptAPI绘制地图我所发现的只是如何在地图上画画，但要有背景地图。我实现了在localhost中使用自定义功能绘制地图我想从数据源创建我的自定义地图假设我有一个包含不同多边形坐标的数据库： function addPolyForm(map) { var bermudaTriangle; var triangleCoords = [ new google.map

我正在尝试在自定义网页中使用GoogleMapsJavaScriptAPI绘制地图

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

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

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

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();
}

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

然后，我想在谷歌地图中绘制这些表格，这样我就可以像谷歌地图在地图中一样，在房间中央单击鼠标时使用鼠标移动、缩放和信息窗口等功能来显示房间信息（描述、曲面等）

另一个选项是使用，但我想问的是，如何实现画布上的导航（基本上是鼠标移动、缩放和信息窗口）

问题是: -有可能用谷歌地图api来实现吗？怎么用？（数据结构和javascript代码）

-如果没有，我需要实现这样的控件吗？

您可以使用OverlayView类并覆盖一些需要的方法来实现这一点（注意，我在这里使用jQuery创建html，但您可以做任何您想做的事情）：

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

好了，我的解决方案来了。希望它能帮助别人！
它与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>

要创建空白图像背景：

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);
}

函数showArray（事件）{
//因为这个多边形只有一条路径，所以我们可以调用getPath（）
//返回LatLngs的MVCArray
var顶点=this.getPath（）；
var contentString=“Triangle de les Bermudes:
”；
contentString++“Posici&ocaute selectionada:
“+event.latLng.lat（）+”，“+event.latLng.lng（）+”
”；
//在顶点上迭代。
对于（var i=0；i”+“Coordenada:“+i+”
“+xy.lat（）+”，“+xy.lng（）”；
}
//替换信息窗口的内容和位置
setContent（contentString）；
infowindow.setPosition（event.latLng）；
打开（地图）；
}

太好了！谢谢，现在我在学习。现在，我怎样才能擦除背景呢？我想到的一件事是做一个白色的覆盖层。。。但这意味着加载地图和覆盖。。。有什么简单的方法吗？再次感谢你的帮助

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);
}