1

やあ。Googleマップv3のポリゴンについて質問があります。Google Maps API v3のストリートレイヤーの下にそれらを配置するにはどうすればよいですか？

これは私の地図です：http：//gidzior.net/map/ご覧のとおり、暗いエリアは通りの上にあります。通りの下に置く方法はありますか？

Googleマップスクリプト：

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ありません。このオーバーレイのグループには、さらに制限があります。たとえば、の上に表示する方法はありません。これが機能する方法にいくつかの変更を確認したい場合、現時点での唯一のオプションは、gmaps-api-issuesで拡張リクエストを行うことです。InfoWindowMarkerPolygonPolylinePolylineMarker

余談ですが、道路標示の下にコンテンツを追加すると、追加されたカスタムではなく、実際にはGoogleマップのコンテンツの一部であるように見える傾向があり、混乱を招く可能性が高いと思います。

于 2012-05-23T23:53:42.127 に答える