Question

我正在寻找一种优雅的方式将多个图像叠加到我的谷歌地图上，必须有一种简单的方法来执行此操作而无需编写代码页，但谷歌似乎没有提供如何附加的良好线索多个自定义叠加层。有没有办法在initialize（）函数中创建多个叠加变量？

<!DOCTYPE html>
<html>
    <head>
    <title>Dopler Scott</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&amp;sensor=true"></script>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        var windowWidth = document.documentElement.clientWidth ;
        if(windowWidth<1000){zoomValue=6;}else{zoomValue=8;}
        var overlay;
        portlandOverlay.prototype = new google.maps.OverlayView();
        function initialize() {
            var mapOptions = {
                center: new google.maps.LatLng(45.710,-122.959),
                zoom:zoomValue,
                mapTypeId: google.maps.MapTypeId.TERRAIN
            };
            var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
            var swBound = new google.maps.LatLng(43.094, -125.895);
            var neBound = new google.maps.LatLng(48.275, -120.250);
            var bounds = new google.maps.LatLngBounds(swBound, neBound);
            var srcImage = 'http://s3.amazonaws.com/theoatmeal-img/quizzes/sriracha_addict/start_button.png';
            overlay = new portlandOverlay(bounds, srcImage, map);
        }
     function portlandOverlay(bounds, image, map) { // Now initialize all properties.
            this.bounds_ = bounds;
            this.image_ = image;
            this.map_ = map; // We define a property to hold the image's div. We'll actually create this div upon receipt of the onAdd() method so we'll leave it null for now.
            this.div_ = null;
            this.setMap(map); // Explicitly call setMap on this overlay
        }
        portlandOverlay.prototype.onAdd = function() { // Create the DIV and set some basic attributes.
            // Note: an overlay's receipt of onAdd() indicates that the map's panes are now available for attaching the overlay to the map via the DOM.
            var div = document.createElement('div');
            div.style.borderStyle = 'none';
            div.style.borderWidth = '0px';
            div.style.position = 'absolute';
            div.className = 'portland';
            var img = document.createElement('img'); // Create an IMG element and attach it to the DIV.
            img.src = this.image_;
            img.style.width = '100%';
            img.style.height = '100%';
            img.style.position = 'absolute';
            div.appendChild(img);
            // Set the overlay's div_ property to this DIV?
            this.div_ = div;
            // We add an overlay to a map via one of the map's panes. We'll add this overlay to the overlayLayer pane.
            var panes = this.getPanes();
            panes.overlayLayer.appendChild(div);
        }
        portlandOverlay.prototype.draw = function() { // Size and position the overlay. We use a southwest and northeast position of the overlay to peg it to the correct position and size.
            // We need to retrieve the projection from this overlay to do this.
            var overlayProjection = this.getProjection();
            // Retrieve the southwest and northeast coordinates of this overlay in latlngs and convert them to pixels coordinates.
            // We'll use these coordinates to resize the DIV.
            var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
            var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
            // Resize the image's DIV to fit the indicated dimensions.
            var div = this.div_;
            div.style.left = sw.x + 'px';
            div.style.top = ne.y + 'px';
            div.style.width = (ne.x - sw.x) + 'px';
            div.style.height = (sw.y - ne.y) + 'px';
        }
        startDoingStuff = function(){}
    $(document).ready(startDoingStuff());
    </script>
</head>
<body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
</body>

Answer 1

你的问题不是＆＃34;有没有办法创建多个叠加变量＆＃34; ，你的问题是你创建了overlay-variable。（下一个覆盖变量将覆盖当前的数据）

只需创建对象而不为其命名（您不必在脚本中的其他位置使用该名称，因此您根本不需要它）：

new portlandOverlay(bounds,  srcImage, map);
new portlandOverlay(bounds2,  srcImage2, map);
new portlandOverlay(bounds3,  srcImage3, map);
//....and so on

如何将多个图像叠加到谷歌地图上

1 个答案: