谷歌地圖API形狀覆蓋的無形地圖

我研究過地圖樣式，並且確信這是實現我的目標的方式，但執行沒有奏效。我想要的就是下面的內容，除了我想要的是地圖上的純色或隱形地圖。目的是使用創建的形狀疊加到不同的地圖上。谷歌地圖API形狀覆蓋的無形地圖

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <title>LD Team - Google Maps Plotter</title> 
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" 
      type="text/javascript"></script> 
    <script type="text/javascript"> 
    //createGlobal Variables 

    //for plot Address 
    var map = null; 
    var geocoder = geocoder = new GClientGeocoder(); //create function used to find Long, Lat based on city, state 

    //forCircles 
    var poly = [] ; 
    var circle; 

    //forBestFit Zoom 
    var latlng = new Array(); 
    var numPoints = 0; 

    var allowedBounds = new GLatLngBounds(new GLatLng(49.5,-10), new GLatLng(59,2.6)); 

    //Initiatlize Google Map Control on Page Load 
    function initialize() { 
     if (GBrowserIsCompatible()) { 

     map = new GMap2(document.getElementById("map_canvas", 15, 15)); 

     //------------- Restricting the range of Zoom Levels ----------------------- 
     // Get the list of map types  
     var mt = map.getMapTypes(); 
     // Overwrite the getMinimumResolution() and getMaximumResolution() methods 
     for (var i=0; i<mt.length; i++) { 
     mt[i].getMinimumResolution = function() {return 2;} 
     mt[i].getMaximumResolution = function() {return 11;} 
     } 
     //-------------------------------------------------------------------------- 

     /*------------- Restricting Viewing Bounds --------------------------------- 
     // The allowed region which the whole map must be within 
     //GLatLngBounds(sw?:GLatLng, ne?:GLatLng) 
     var allowedBounds = new GLatLngBounds(new GLatLng(-60.0525,178.0781), new GLatLng(70.3779,-169.4531)); 
     // Add a move listener to restrict the bounds range 
     GEvent.addListener(map, "move", function() { 
     checkBounds(); 
     }); 
     //------------------------------------------------------------------------*/ 

     /*------------- Mouse Hover Show/Hide Controls ----------------------------- 
     GMap2.prototype.hoverControls = function(opt_noCloseIw){ 
      var theMap = this; 
      theMap.hideControls(); 
      GEvent.addListener(theMap, "mouseover", function(){ 
      theMap.showControls(); 
      }); 
      GEvent.addListener(theMap, "mouseout", function(){ 
      theMap.hideControls(); 
      }); 
      theMap.libraryCard = 19162; 
     } 
     GMap.prototype.hoverControls = GMap2.prototype.hoverControls; 
     map.hoverControls();         
     //------------- End Mouse Hover Show/Hide Controls-------------------------*/ 

     //map.addControl(new GLargeMapControl3D());   //add fancy 3D map controls (zoom, set center) 
     //map.addControl(new GLargeMapControl());   //add regular map controls (zoom, set center)   
     //map.addControl(new GMapTypeControl());    //add fancy map controls (maptype option: map, satellite, hybid) 
     map.setMapType(G_PHYSICAL_MAP);     //change Maptype to Terrian 
     map.enableContinuousZoom();       //smoothed zoom in and out 
     map.setCenter(new GLatLng(20.6328, 4.2188),2);  //change Map to this coordinate (best try to center of earth) 

     } 
    } 

//Run this function when "Plot Points" is submitted 
function plot(){ 

    //plotAddress("tooltip","city, state","link to image with extension", iconWidth, iconHeight); *iconWidth and iconHeight, not necessary 
    //plotAddress("Factory", "New York, NY","icons/_firstaid.png", 15, 15); 
    //plotAddress("Factory", "New York, NY","icons/_firstaid.png", 15, 15); 

    //plotLatLong("tooltip",latitude, longitude, "link to image with extension", iconWidth, iconHeight); 
    //plotLatLong("FELDBACH, Switzerland",47.66667,8.98333,"icons/_mainroad.png", 15, 15); 
    //plotLatLong("Lab",48.83777, 10.0933, "icons/_firstaid.png", 15, 15); 

    //draw line 
    //GPolyline(whereLatLongFrom, whereLatLongTo, lineColor, lineWeight, lineOpacity) 
    //var polyline1= new GPolyline([new GLatLng(33.8796,-117.8951),new GLatLng(34.780607,-106.711537)], "#000000", 3,0.9);map.addOverlay(polyline1); 

    //draw circle 
    //drawCircle(whereLatLong, radiusMiles, numPointsInCircle, lineColor, lineWeight, lineOpacity, fillColor, fillOpacity) 
    //drawCircle(new GLatLng(42.2773088, -83.7350464), 600, 100,"#00ff00",3,0.9,"#00ff00",0.5); 
//--------------------------------------------------------------------------paste after this line 


plotLatLong("Pratt",41.7633,-88.2900,"icons/factory.png", 30, 30); 



drawCircle(new GLatLng(31.2,-112.3),358,50,"#000000",2,1,"#FF0000",0.75); 
drawCircle(new GLatLng(32.6742,-101.2789),102,50,"#000000",2,1,"#FF0000",0.75); 
drawCircle(new GLatLng(42.95,-120.2),29,50,"#000000",2,1,"#FF0000",0.75); 
drawCircle(new GLatLng(42.2783,-114.1589),10,50,"#000000",2,1,"#FF0000",0.75); 
drawCircle(new GLatLng(32.95,-80.2),10,50,"#000000",2,1,"#FF0000",0.75); 
drawCircle(new GLatLng(34.9347,-104.9119),10,50,"#000000",2,1,"#FF0000",0.75); 
drawCircle(new GLatLng(29.2,-100.5),10,50,"#000000",2,1,"#FF0000",0.75); 
drawCircle(new GLatLng(29.2,-110.5),10,50,"#000000",2,1,"#FF0000",0.75); 
drawCircle(new GLatLng(31.2,-112.3),10,50,"#000000",2,1,"#FF0000",0.75); 
drawCircle(new GLatLng(32.9,-119.8),10,50,"#000000",2,1,"#FF0000",0.75); 
drawCircle(new GLatLng(36.4,-118.4),10,50,"#000000",2,1,"#FF0000",0.75); 
drawCircle(new GLatLng(45.517,-73.667),10,50,"#000000",2,1,"#FF0000",0.75); 
drawCircle(new GLatLng(51.045,-114.0581),10,50,"#000000",2,1,"#FF0000",0.75); 
drawCircle(new GLatLng(51.9,-0.2),10,50,"#000000",2,1,"#FF0000",0.75); 
drawCircle(new GLatLng(31.2,-121.5),44,50,"#000000",2,1,"#FF0000",0.75); 



//--------------------------------------------------------------------------complete paste before this line 
} 
function updateZoom() 
{ 
    plot(); 
    var latlngbounds = new GLatLngBounds(); 
    for (var i = 0; i < latlng.length; i++) 
    { 
    latlngbounds.extend(latlng[ i ]); 
    //document.write(latlng[i]); 
    //alert (numPoints); 
    } 
    map.setCenter(latlngbounds.getCenter(), map.getBoundsZoomLevel(latlngbounds)); 
} 


    //Function gets and plots long, lat based on city, state input 
    function plotAddress(toolTip,address, iconLink, iconWidth, iconHeight) { 
     if (geocoder) { 
     geocoder.getLatLng(
     address, 
      function(point) { 
      if (!point) { 
       alert(address + " not found", 15, 15); 
      } else { 

       //create custom icon required variables and link variable to icon link 
       var customIcon = new GIcon(G_DEFAULT_ICON); 
       customIcon.image = iconLink; 
       //customIconSize if necessary 
       if(iconWidth){ 
       customIcon.iconSize = new GSize(iconWidth, iconHeight); 
       customIcon.iconAnchor = new GPoint(iconWidth/2,iconHeight); 
       customIcon.shadow = ""; 
       }else{} //else do nothing to change the icon size 

       markerOptions = { icon:customIcon, draggable:true} 

       //create marker 
       var marker = new GMarker(point, markerOptions); 
       //add event to marker when clicked 
       GEvent.addListener(marker, 'click', function() { 
       //When clicked, open an Info Window 
       marker.openInfoWindowHtml(toolTip); 
       }); 
       //plot marker 
       map.addOverlay(marker); 
       //add to arrary for best fit zoom 
       latlng[numPoints] = point; 
       numPoints++; 
      } 
      } 
     ); 
     } 
    } 
    function plotLatLong(toolTip, latIN,lngIN, iconLink, iconWidth, iconHeight) { 
     //create custom icon,required variables and link variable to icon link 
     var customIcon = new GIcon(G_DEFAULT_ICON); 
     customIcon.image = iconLink; 
     //customIconSize if necessary 
     if(iconWidth){ 
     customIcon.iconSize = new GSize(iconWidth, iconHeight); 
     customIcon.iconAnchor = new GPoint(iconWidth/2,iconHeight); 
     customIcon.shadow = ""; 
     }else{} //else do nothing to change the icon size 

     markerOptions = {icon:customIcon, draggable:true, } 

     //assign Lat and Long 
     var latlngIN = new GLatLng(latIN, lngIN); 

     //create marker 
     var marker = new GMarker(latlngIN, markerOptions); 

     //add event to marker when clicked 
     GEvent.addListener(marker, 'click', function() { 
     //When clicked, open an Info Window 
     marker.openInfoWindowHtml(toolTip); 
     }); 
     //plot marker 
     latlng[numPoints] = latlngIN; 
     //add to arrary for best fit zoom 
     numPoints++; 
     map.addOverlay(marker);      
    } 
    function drawCircle(whereLatLong, radiusMiles, numPointsInCircle, lineColor, lineWeight, lineOpacity, fillColor, fillOpacity){ 
     poly = [] ; 
     var lat = whereLatLong.lat() ; 
     var lng = whereLatLong.lng() ; 
     var d2r = Math.PI/180 ;    // degrees to radians 
     var r2d = 180/Math.PI ;    // radians to degrees 
     var Clat = (radiusMiles/3963) * r2d ;  // using 3963 as earth's radius 
     var Clng = Clat/Math.cos(lat*d2r); 

     //Add each point in the circle 
     for (var i = 0 ; i < numPointsInCircle ; i++) 
     { 
      var theta = Math.PI * (i/(numPointsInCircle/2)) ; 
      Cx = lng + (Clng * Math.cos(theta)) ; 
      Cy = lat + (Clat * Math.sin(theta)) ; 
      poly.push(new GLatLng(Cy,Cx)) ; 
     } 

     //Add the first point to complete the circle 
     poly.push(poly[0]) ; 

     //Create a circle 
     circle = new GPolygon(poly, lineColor, lineWeight, lineOpacity, fillColor, fillOpacity) ; 
     map.addOverlay(circle) ; 
    } 

    // If the map position is out of range, move it back 
    function checkBounds() { 
     // Perform the check and return if OK 
     if (allowedBounds.contains(map.getCenter())) { 
      return; 
     } 
     // It`s not OK, so find the nearest allowed point and move there 
     var C = map.getCenter(); 
     var X = C.lng(); 
     var Y = C.lat(); 

     var AmaxX = allowedBounds.getNorthEast().lng(); 
     var AmaxY = allowedBounds.getNorthEast().lat(); 
     var AminX = allowedBounds.getSouthWest().lng(); 
     var AminY = allowedBounds.getSouthWest().lat(); 

     if (X < AminX) {X = AminX;} 
     if (X > AmaxX) {X = AmaxX;} 
     if (Y < AminY) {Y = AminY;} 
     if (Y > AmaxY) {Y = AmaxY;} 
     //alert ("Restricting "+Y+" "+X); 
     map.setCenter(new GLatLng(Y,X)); 
    } 
    </script> 
    </head> 

<body onload="initialize()" onunload="GUnload()"> 
<input type="button" style="background-color:red" value="Clear Page" onClick="location.reload(true)" /> 
<input type="submit" style="background-color:lightgreen" value="Plot Points" onClick="plot();" /> 
<input type="submit" style="background-color:lightblue" value="Zoom - Fit" onClick="updateZoom();" /> 
<BR><BR> 

<div id="map_canvas" style="width: 1400px; height: 880px"></div> 

</body> 
</html>

來源

2014-02-26 user3356170

您使用的是API v2，它在2010年不推薦使用，自從去年11月以來一直沒有工作（如果它確實看到v3的混亂版本，減少的功能）。在處理其他任何事情之前，您應該重寫整個事情以使用API v3。請參閱：https：//developers.google.com/maps/documentation/javascript/v2/v2tov3 – duncan

在v3中製作「空白」地圖類型非常簡單，請參閱[文檔]（https：//開發人員。 google.com/maps/documentation/javascript/maptypes#CustomMapTypes），[此文檔中的示例]（https://developers.google.com/maps/documentation/javascript/examples/maptype-base）非常接近（不要不顯示座標並移除瓦片邊框） – geocodezip

好吧，我試着重寫爲v3。我可以將地圖變爲隱形（{visibility：'off'} ...但是我無法得到形狀覆蓋圖的任何想法？ – user3356170

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Simple styled maps</title> 
    <style> 
     html, body, #map-canvas { 
     height: 100%; 
     margin: 0px; 
     padding: 0px 
     } 
    </style> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
    <script> 
var map; 
var brooklyn = new google.maps.LatLng(40.6743890, -100.9455); 

var MY_MAPTYPE_ID = 'custom_style'; 
function initialize() { 

    var featureOpts = [ 
    { 
     stylers: [ 
     { hue: '#736F6E' }, 
     { visibility: 'simplified' }, 
     ] 
    }, 
    { 
     elementType: 'labels', 
     stylers: [ 
     { visibility: 'off' } 
     ] 
    }, 
    { 
     featureType: 'water', 
     stylers: [ 
     { color: '#736F6E' } 
     ] 
    } 
    ]; 

    var mapOptions = { 
    zoom: 4, 
    center: brooklyn, 
    mapTypeControlOptions: { 
     mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID] 
    }, 
    mapTypeId: MY_MAPTYPE_ID 
    }; 

    map = new google.maps.Map(document.getElementById('map-canvas'), 
     mapOptions); 
    var styledMapOptions = { 
    name: 'Custom Style' 
    }; 

    var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions); 

    map.mapTypes.set(MY_MAPTYPE_ID, customMapType); 
    drawCircle(new google.maps.LatLng(31.2,-121.5),300,50,"#2D2D2D",2,1,"#2D2D2D",0.75); 
} 

function drawCircle(whereLatLong, radiusMiles, numPointsInCircle, lineColor, lineWeight, lineOpacity, fillColor, fillOpacity){ 
     poly = [] ; 
     var lat = whereLatLong.lat() ; 
     var lng = whereLatLong.lng() ; 
     var d2r = Math.PI/180 ;    // degrees to radians 
     var r2d = 180/Math.PI ;    // radians to degrees 
     var Clat = (radiusMiles/3963) * r2d ;  // using 3963 as earth's radius 
     var Clng = Clat/Math.cos(lat*d2r); 

     //Add each point in the circle 
     for (var i = 0 ; i < numPointsInCircle ; i++) 
     { 
      var theta = Math.PI * (i/(numPointsInCircle/2)) ; 
      Cx = lng + (Clng * Math.cos(theta)) ; 
      Cy = lat + (Clat * Math.sin(theta)) ; 
      poly.push(new google.maps.LatLng(Cy,Cx)) ; 
     } 

     //Add the first point to complete the circle 
     poly.push(poly[0]) ; 

     // Create a circle 
     circle = new google.maps.Polygon({ 
          paths: poly, 
          strokeColor: lineColor, 
          strokeWeight: lineWeight, 
          strokeOpacity: lineOpacity, 
          fillColor: fillColor, 
          fillOpacity: fillOpacity 
         }); 
     circle.setMap(map);    
    } 

google.maps.event.addDomListener(window, 'load', initialize); 

    </script> 
    </head> 

    <body> 
    <div id="map-canvas"></div> 
    </body> 
</html>

你的代碼仍然使用第2版的方法。例如：new GLatLng ==> new google.maps.LatLng，new GPolygon ==> new google.maps.Polygon，map.addOverlay（circle）==> circle.setMap（map）;你也在錯誤的地方調用drawCircle。看到更正的代碼。它適用於我的作品

來源

2014-03-03 08:45:13 aFootballerANDaProgrammer

谷歌地圖API形狀覆蓋的無形地圖

回答

相關問題