1

你好。我对 Google 地图 v3 中的多边形有疑问。如何将它们放在 Google maps API v3 的街道图层下？

这是我的地图： http: //gidzior.net/map/如您所见，较暗的区域位于街道上方。有没有办法把它放在街道下面？

谷歌地图脚本：

var map;
  var directionDisplay;
  var directionsService;
  var stepDisplay;
  var markerArray = [];
  var position;
  var marker = null;
  var polyline = null;
  var poly2 = null;
  var speed = 0.0000005, wait = 1;
  var infowindow = null;
  var zoomed;
  var zoomedd;
  var zoomeddd;

  var step = 50; // 5; // metres

  var myPano;   
  var panoClient;
  var nextPanoId;
  var timerHandle = null;

  var size = new google.maps.Size(26,25);
  var start_point = new google.maps.Point(0,0);
  var foothold = new google.maps.Point(13,15);

  var car_icon = new google.maps.MarkerImage("http://fama.net.pl/echo/www/img/map/car.png", size, start_point, foothold);

  var size2 = new google.maps.Size(87,87);
  var start_point2 = new google.maps.Point(0,0);
  var foothold2 = new google.maps.Point(43,87);

  var endIcon = new google.maps.MarkerImage("http://fama.net.pl/echo/www/img/map/end.png", size2, start_point2, foothold2);

function createMarker(latlng, label, html) {
// alert("createMarker("+latlng+","+label+","+html+","+color+")");
    var contentString = '<b>'+label+'</b><br>'+html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: car_icon,
        clickable: false,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });
    return marker;
}

function createEndMarker(latlng, label, html) {
    var contentString = '<b>'+label+'</b><br>'+html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: endIcon,
        clickable: false,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });
    return marker;
}

function initialize() {
  infowindow = new google.maps.InfoWindow(
    { 
      size: new google.maps.Size(150,50)
    });
    // Instantiate a directions service.
    directionsService = new google.maps.DirectionsService();
    var pinkParksStyles = [ { featureType: "road", stylers: [ { lightness: 100 } ] },{ featureType: "landscape", elementType: "geometry", stylers: [ { hue: "#0091ff" }, { saturation: 42 }, { lightness: -44 } ] },{ featureType: "landscape", stylers: [ { visibility: "off" }, { saturation: 32 } ] },{ featureType: "transit", stylers: [ { lightness: 100 } ] },{ featureType: "road.local", stylers: [ { visibility: "simplified" } ] },{ featureType: "poi", stylers: [ { visibility: "off" } ] },{ featureType: "road", elementType: "labels", stylers: [ { visibility: "off" } ] },{ } ]

    var pinkMapType = new google.maps.StyledMapType(pinkParksStyles,
    {name: "Mapa Echo"});

    // Create a map and center it on Warszawa.
    var myOptions = {
      zoom: 12,
      mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'pink_parks']
    },
      navigationControlOptions: 
        {
            style: google.maps.NavigationControlStyle.SMALL 
        }
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    map.mapTypes.set('pink_parks', pinkMapType);
    map.setMapTypeId('pink_parks');

    var myCoordinates = [
new google.maps.LatLng(52.179774,21.022171),
new google.maps.LatLng(52.182773,21.023030),
new google.maps.LatLng(52.186562,21.024403),
new google.maps.LatLng(52.194324,21.023974),
new google.maps.LatLng(52.200111,21.023416),
new google.maps.LatLng(52.205423,21.022558),
new google.maps.LatLng(52.211498,21.020069),
new google.maps.LatLng(52.217152,21.016807),
new google.maps.LatLng(52.216915,21.015691),
new google.maps.LatLng(52.216810,21.014747),
new google.maps.LatLng(52.216968,21.011657),
new google.maps.LatLng(52.217125,21.008868),
new google.maps.LatLng(52.216968,21.004748),
new google.maps.LatLng(52.216231,20.990543),
new google.maps.LatLng(52.214864,20.988998),
new google.maps.LatLng(52.213497,20.988955),
new google.maps.LatLng(52.211604,20.988740),
new google.maps.LatLng(52.202793,20.985736),
new google.maps.LatLng(52.194008,20.982732),
new google.maps.LatLng(52.198190,20.984191),
new google.maps.LatLng(52.193061,20.982432),
new google.maps.LatLng(52.192035,20.984964),
new google.maps.LatLng(52.190562,20.986423),
new google.maps.LatLng(52.187220,20.986938),
new google.maps.LatLng(52.171747,20.987367),
new google.maps.LatLng(52.166167,21.016979),
new google.maps.LatLng(52.179774,21.022171)
];
var polyOptions = new google.maps.Polygon({
path: myCoordinates,
strokeColor: "#FF0000",
      strokeOpacity: 0,
      strokeWeight: 3,
      fillColor: "#005f8c",
      fillOpacity: 0.5
});
var it = new google.maps.Polyline(polyOptions);
it.setMap(map);


    address = 'warszawa'
    geocoder = new google.maps.Geocoder();
    geocoder.geocode( { 'address': address}, function(results, status) {
       map.setCenter(results[0].geometry.location);
    });

    // Create a renderer for directions and bind it to the map.
    var rendererOptions = {
      map: map,
    }
    directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

    // Instantiate an info window to hold step text.
    stepDisplay = new google.maps.InfoWindow();

    polyline = new google.maps.Polyline({
    path: [],
    strokeColor: '#FF0000',
    strokeWeight: 3
    });
    poly2 = new google.maps.Polyline({
    path: [],
    strokeColor: '#FF0000',
    strokeWeight: 3
    });
  }



    var steps = []

    function calcRoute(){

if (timerHandle) { clearTimeout(timerHandle); }
if (marker) { marker.setMap(null);}
polyline.setMap(null);
poly2.setMap(null);
directionsDisplay.setMap(null);
    polyline = new google.maps.Polyline({
    path: [],
    strokeColor: '#FF0000',
    strokeWeight: 3
    });
    poly2 = new google.maps.Polyline({
    path: [],
    strokeColor: '#FF0000',
    strokeWeight: 3
    });
    // Create a renderer for directions and bind it to the map.
    var rendererOptions = {
      map: map,
      suppressMarkers:true,
      polylineOptions:{strokeColor:'#96C11F'}
    }
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

        var start = document.getElementById("start").value;
        var end = document.getElementById("end").value;
        var travelMode = google.maps.DirectionsTravelMode.DRIVING

        var request = {
            origin: start,
            destination: end,
            travelMode: travelMode,
            waypoints: [{
                location:new google.maps.LatLng(52.185570, 20.997255),
                stopover:false}],
            optimizeWaypoints: false
        };

        // Route the directions and pass the response to a
        // function to create markers for each step.
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK){
        directionsDisplay.setDirections(response);

            var bounds = new google.maps.LatLngBounds();
            var route = response.routes[0];
            startLocation = new Object();
            endLocation = new Object();

            // For each route, display summary information.
        var path = response.routes[0].overview_path;
        var legs = response.routes[0].legs;
            for (i=0;i<legs.length;i++) {
              if (i == 0) { 
                startLocation.latlng = legs[i].start_location;
                startLocation.address = legs[i].start_address;
                //marker = google.maps.Marker({map:map,position: startLocation.latlng});
                marker = createMarker(legs[i].start_location,"start",legs[i].start_address,"green");
              }
              endLocation.latlng = legs[i].end_location;
              endLocation.address = legs[i].end_address;
              var steps = legs[i].steps;
              for (j=0;j<steps.length;j++) {
                var nextSegment = steps[j].path;
                for (k=0;k<nextSegment.length;k++) {
                  polyline.getPath().push(nextSegment[k]);
                  bounds.extend(nextSegment[k]);
                }
              }
            }

            polyline.setMap(map);
            document.getElementById("distance").innerHTML = (polyline.Distance()/1000).toFixed(2)+" km";
            map.fitBounds(bounds);
            createEndMarker(endLocation.latlng,"end",endLocation.address,"red");
            map.setZoom(18);
            startAnimation();
            zoomed=false;
            zoomedd=false;
            zoomeddd=false;
            step = 50;
            }                                                    
        });
    }

      var tick = 100; // milliseconds
      var eol;
      var k=0;
      var stepnum=0;
      var speed = "";
      var lastVertex = 1;

//=============== animation functions ======================
      function updatePoly(d) {
        // Spawn a new polyline every 20 vertices, because updating a 100-vertex poly is too slow
        if (poly2.getPath().getLength() > 20) {
          poly2=new google.maps.Polyline([polyline.getPath().getAt(lastVertex-1)]);
          // map.addOverlay(poly2)
        }

        if (polyline.GetIndexAtDistance(d) < lastVertex+2) {
           if (poly2.getPath().getLength()>1) {
             poly2.getPath().removeAt(poly2.getPath().getLength()-1)
           }
           poly2.getPath().insertAt(poly2.getPath().getLength(),polyline.GetPointAtDistance(d));
        } else {
          poly2.getPath().insertAt(poly2.getPath().getLength(),endLocation.latlng);
        }
      }

      function animate(d) {
// alert("animate("+d+")");
        if (d>eol) {;
          map.panTo(endLocation.latlng);
          marker.setPosition(endLocation.latlng);
          return;
        }
        if (d>eol-20000 && zoomeddd!=true) {
          map.setZoom(12); // or whatever value
          zoomeddd=true;
        }
        if (d>eol-10000 && zoomedd!=true) {
          map.setZoom(13); // or whatever value
          zoomedd=true;
        }
        if (d>eol-1500 && zoomed!=true) {
          map.setZoom(15); // or whatever value
          step = 15;
          zoomed=true;
        }
        var p = polyline.GetPointAtDistance(d);
        map.panTo(p);
        marker.setPosition(p);
        updatePoly(d);
        timerHandle = setTimeout("animate("+(d+step)+")", tick);
      }

function startAnimation() {
        eol=polyline.Distance();
        map.setCenter(polyline.getPath().getAt(0));
        // map.addOverlay(new google.maps.Marker(polyline.getAt(0),G_START_ICON));
        // map.addOverlay(new GMarker(polyline.getVertex(polyline.getVertexCount()-1),G_END_ICON));
        // map.addOverlay(marker);
        poly2 = new google.maps.Polyline({path: [polyline.getPath().getAt(0)], strokeColor:"#0000FF", strokeWeight:10});
        // map.addOverlay(poly2);
        setTimeout("animate(50)",2000);  // Allow time for the initial map display
}
4

1 回答 1

4

我知道这不是您希望的答案，但是没有直接的方法可以使用开箱即用的 API 提供的覆盖来做到这一点，例如：Circle、GroundOverlay、InfoWindow、Marker、Polygon或Polyline。在这组叠加层中甚至存在限制。例如，没有办法让 aPolyline出现在 a 之上Marker。如果您希望看到其工作方式的一些变化，您现在唯一的选择是在gmaps-api-issues提出增强请求。

顺便说一句，我认为在道路标记下方添加内容往往会使它看起来实际上是 Google 地图内容的一部分，而不是添加的自定义内容，而且很可能会导致混淆。

于 2012-05-23T23:53:42.127 回答