Question

我要求将建筑物或公寓顶视图2d / 3d图像绘制到预定义的多边形。因此，我将绘制多边形，并将所有坐标保存到数据库中。下次包含谷歌地图的页面加载时，使用保存的坐标绘制相同的多边形。

var map; // Global declaration of the map
            var iw = new google.maps.InfoWindow(); // Global declaration of the infowindow
            var lat_longs = new Array();
            var markers = new Array();
            var drawingManager;
            function initialize() {

                 var myLatlng = new google.maps.LatLng(40.9403762, -74.1318096);
                var myOptions = {
                    zoom: 13,
                    center: myLatlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP}
                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                drawingManager = new google.maps.drawing.DrawingManager({
                drawingMode: google.maps.drawing.OverlayType.POLYGON,
                drawingControl: true,
                drawingControlOptions: {
                    position: google.maps.ControlPosition.TOP_CENTER,
                    drawingModes: [google.maps.drawing.OverlayType.POLYGON]
                },
                        polygonOptions: {editable:true,fillColor:'#ff0000',strokeColor:'#ff0000',strokeWeight:2}
            });
            drawingManager.setMap(map);

            google.maps.event.addListener(drawingManager, "overlaycomplete", function(event) {
                var newShape = event.overlay;
                newShape.type = event.type;
                if (event.type==google.maps.drawing.OverlayType.POLYGON) {
                        overlayClickListener(event.overlay);$('#polygon').val(event.overlay.getPath().getArray());drawingManager.setOptions({drawingMode:null,drawingControl:false});
                    }

            });
                var polygon_plan_0 = [
                    new google.maps.LatLng(40.9534555976547, -74.0871620178223)
                    ,
                    new google.maps.LatLng(40.9410084152192, -74.0948867797852)
                    ,
                    new google.maps.LatLng(40.9411380854622, -74.1165161132812)
                    ,
                    new google.maps.LatLng(40.9490474888751, -74.1221809387207)
                    ,
                    new google.maps.LatLng(40.955140973234, -74.124584197998)
                    ,
                    new google.maps.LatLng(40.9604561066844, -74.1153144836426)
                    ,
                    new google.maps.LatLng(40.9534555976547, -74.0871620178223)
                    ];
                    lat_longs.push(new google.maps.LatLng(40.9534555976547, -74.0871620178223));

                    lat_longs.push(new google.maps.LatLng(40.9410084152192, -74.0948867797852));

                    lat_longs.push(new google.maps.LatLng(40.9411380854622, -74.1165161132812));

                    lat_longs.push(new google.maps.LatLng(40.9490474888751, -74.1221809387207));

                    lat_longs.push(new google.maps.LatLng(40.955140973234, -74.124584197998));

                    lat_longs.push(new google.maps.LatLng(40.9604561066844, -74.1153144836426));

                    lat_longs.push(new google.maps.LatLng(40.9534555976547, -74.0871620178223));

            var polygon_0 = new google.maps.Polygon({
                path: polygon_plan_0,

                strokeColor: "#ff0000",
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: "#ff0000",
                fillOpacity: 0.3,
                editable: true
            });

            polygon_0.setMap(map);


            google.maps.event.addListener(polygon_0, "mouseup", function(event) {
                overlayClickListener(event.overlay);$('#polygon').val(event.overlay.getPath().getArray());drawingManager.setOptions({drawingMode:null,drawingControl:false});
            });


            }


        function createMarker(markerOptions) {
            var marker = new google.maps.Marker(markerOptions);
            markers.push(marker);
            lat_longs.push(marker.getPosition());
            return marker;
        }

initialize();

function overlayClickListener(overlay) {
    google.maps.event.addListener(overlay, "mouseup", function(event){
        $('#polygon').val(overlay.getPath().getArray());
    });
}

现在，我的小/大图像具有相同的多边形形状。

如何将该图像放入多边形并将其正确放入地图中。？

Answer 1

尝试如何在Google地图上显示3D建筑物的解决方案，点击以下教程链接，了解如何在使用Google地图的基于网络的应用程序上实施策略。

http://johndyer.name/drawing-3d-objects-and-building-on-google-maps/

http://googlemapsmania.blogspot.com/2013/02/creating-3d-buildings-with-google-maps.html

将建筑物/公寓布局添加到预定义的多边形到谷歌地图

1 个答案: