如何在Google maps API v3中的街道图层下放置多边形图层 [英] How to put a polygon layer under the streets layer in Google maps API v3

查看：97
本文介绍了如何在Google maps API v3中的街道图层下放置多边形图层的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

您好。我对Google地图v3中的多边形有个疑问。如何将它们置于谷歌地图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放大; 
 var zoomedd; 
 var zoomeddd; 
 
 var step = 50; // 5; //米
 
 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，footed）; 
 
 var size2 =新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）; 
 $ b $函数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，$ b $ map：map，
 icon：car_icon，
 clickable：false，
 zIndex：Math.round（latlng.lat（）*  -  100000）<5 
}）; 
返回标记; 
} 
 
函数createEndMarker（latlng，label，html）{
 var contentString ='< b> + label +'< / b>< br>'+ HTML; 
 var marker = new google.maps.Marker（{
 position：latlng，$ b $ map：map，
 icon：endIcon，
 clickable：false，
 zIndex：Math.round（latlng.lat（）*  -  100000）<5 
}）; 
返回标记; 
 
 
函数initialize（）{
 infowindow = new google.maps.InfoWindow（
 {
 size：new google.maps.Size（150 ，50）
}）; 
 //实例化一个方向服务。 
 directionsService = new google.maps.DirectionsService（）; 
 var pinkParksStyles = [{featureType：road，stylers：[{lightness：100}]}，{featureType：landscape，elementType：geometry，stylers：[{hue：＃0091ff} ，{饱和度：42}，{亮度：-44}]，{featureType：landscape，stylers：[{visibility：off}，{saturation：32}]}，{featureType：transit ：[{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}）; 
 
 //创建一个地图并将其集中在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），
 google .maps.LatLng（52.186562,21.024403），
 new google.maps.LatLng（52.194324,21.023974），
 new google.maps.LatLng（52.200111,21.023416），
 google.maps .LatLng（52.205423,21.022558），
新google.maps.LatLng（52.211498,21.020069），
新google.maps.LatLng（52.217152,21.016807），
新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 goog le.maps.LatLng（52.198190,20.984191），
新google.maps.LatLng（52.193061,20.982432），
新google.maps.LatLng（52.192035,20.984964），
新谷歌。 maps.LatLng（52.190562,20.986423），
新google.maps.LatLng（52.187220,20.986938），
新google.maps.LatLng（52.171747,20.987367），
新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）; 
}）; 
 
 //为路线创建渲染器并将其绑定到地图。 
 var rendererOptions = {
 map：map，
} 
 directionsDisplay = new google.maps.DirectionsRenderer（rendererOptions）; 
 
 //实例化信息窗口以保存步骤文本。 
 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 = [] 
 
函数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 
}）; 
 //为方向创建渲染器并将其绑定到地图。 
 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， 
航点：[{
 location：new google.maps.LatLng（52.185570,20.997255），
 stopover：false}]，
 optimizeWaypoints：false 
}; 
 
 //路线指示并将响应传递给
 //函数以为每一步创建标记。 
 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（ ）; 
 
 //对于每一条路径，显示摘要信息
 var path = response.routes [0] .overview_path; 
 var legs = response.routes [0]。 （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  var nextSegment = steps [j] .path; （k = 0; 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; //毫秒
 var eol; 
 var k = 0; 
 var stepnum = 0; 
 var speed =; 
 var lastVertex = 1; 
 
 // ===============动画函数====================== 
 function updatePoly（d）{
 //每隔20个顶点产生一个新的折线，因为更新100顶点的poly太慢了
 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）; 
 
 
 
函数动画（d）{
 // alert（animate（+ d +））; 
 if（d> eol）{; 
 map.panTo（endLocation.latlng）; 
 marker.setPosition（endLocation.latlng）; 
 return; 
} 
 if（d> eol-20000& z& zoomeddd！= true）{
 map.setZoom（12）; //或任何值
 zoomeddd = true; 
} 
 if（d> eol-10000& zoomedd！= true）{
 map.setZoom（13）; //或任何值
 zoomedd = true; 
} 
 if（d> eol-1500&& zoomed！= true）{
 map.setZoom（15）; //或任何值
 step = 15; 
 zoomed = true; 
} 
 var p = polyline.GetPointAtDistance（d）; 
 map.panTo（p）; 
 marker.setPosition（p）; 
 updatePoly（d）; 
 timerHandle = setTimeout（animate（+（d + step）+），tick）; 
} 
 
函数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）; //允许时间显示初始地图
 
 $ / code $ / pre 
 
解决方案
我知道这不是您希望得到的答案，但是没有直接的方法可以使用开箱即用的API提供覆盖，例如： Circle  code>， GroundOverlay ， InfoWindow ，标记 ， Polygon 或 Polyline 。这组叠图中甚至存在限制。例如，没有办法在 Marker 上方显示 Polyline 。如果您希望看到这种方式发生了一些变化，那么您现在唯一的选择是在以下地方提出增强请求： gmaps-api-issues 。
 
 
 
另外，我认为在道路标记下添加内容往往会使它似乎它实际上是Google地图内容的一部分，而不是已添加的自定义内容，而且更可能导致混淆。
 
Hi. I have a question about polygons in Google maps v3. How to put them under the street's layer in Google maps API v3?



This is my map: http://gidzior.net/map/ As you can see, the darker area is above the streets. Is there a way to put it under the streets?



Google maps script:
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
}



 解决方案 
I know this isn't the answer you were hoping for, but there is no direct way to do this using the out-of-the-box API provided overlays, such as: Circle, GroundOverlay, InfoWindow, Marker, Polygon, or Polyline. There are even limitations within this group of overlays. For example, there is no way to have a Polyline appear above a Marker. If you would like to see some changes in the way this works, your only option right now is to make an enhancement request at: gmaps-api-issues.



As an aside, I think that adding content beneath the road markings would tend to make it appear that it was actually part of the Google Maps content, rather than something custom that has been added, and more than likely leading to confusion.


                        
这篇关于如何在Google maps API v3中的街道图层下放置多边形图层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆