1. 홈
  2. 질의 응답
  3. 구글 다각형지도 배경 색상 투명, 주변 지역 반투명 오버레이

구글 다각형지도 배경 색상 투명, 주변 지역 반투명 오버레이

2012-06-18 4 views

답변

1

일부 CSS와 내가 달성하기 위해 원하는 것을 모방 관리가 큰 512 X 512px PNG를 사용. 더 정확한 방법이있을 것이라고 확신하지만 이것은 저에게 효과적입니다.

http://www.syn-rg.com.au/Development/United-Energy/mg_map/MG_Area_map_02.html

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <style type="text/css"> 
     html { height: 100% } 
     body { height: 100%; margin: 0; padding: 0; } 
     #map_canvas { 
    background-color: #EAEAEA; 
    border: 1px solid #CCCCCC; 
    height: 400px; 
    margin-bottom: 10px; 
    margin-left: auto; 
    margin-right: auto; 
    width: 532px; 
} 
#map_canvas div div div div div img{ border:1000px solid black;margin:-1000px -1000px;} 
/*#map_canvas div div div div div div div{ background: none repeat scroll 0px 0px rgba(0, 0, 0, 0.5);}*/ 
    </style> 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA7UaoyrY4KyoW1iEU0KFo0ZOxH5w30oZ8&sensor=true"></script> 
    <script type="text/javascript"> 
var overlay; 
USGSOverlay.prototype = new google.maps.OverlayView(); 

function initialize() { 
    var myLatLng = new google.maps.LatLng(-37.815676, 145.449005); 
    var myOptions = { 
     zoom: 9, 
     center: myLatLng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    var swBound = new google.maps.LatLng(-38.269876, 144.842405); // Latitude, Longitude = 182.749 or 107.183 or 108.4443 or 107.77615 
    var neBound = new google.maps.LatLng(-37.161476, 146.249005); // -0.5542, +0.7033 = 256px 
    //var swBound = new google.maps.LatLng(-37.783, 144.966); 
    //var neBound = new google.maps.LatLng(-37.225, 145.66930); 
    //var swBound = new google.maps.LatLng(62.281819, -150.287132); 
    //var neBound = new google.maps.LatLng(62.400471, -150.005608); 
    var bounds = new google.maps.LatLngBounds(swBound, neBound); 
    // Photograph courtesy of the U.S. Geological Survey 
    var srcImage = 'images/mg_map_full.png'; 
    overlay = new USGSOverlay(bounds, srcImage, map); 
} 

function USGSOverlay(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; 
    // Explicitly call setMap on this overlay 
    this.setMap(map); 
} 
USGSOverlay.prototype.onAdd = function() { 
    // 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. 
    // Create the DIV and set some basic attributes. 
    var div = document.createElement('div'); 
    div.style.borderStyle = "none"; 
    div.style.borderWidth = "0"; 
    div.style.borderColor = "red"; 
    div.style.position = "absolute"; 
    div.style.opacity = "0.3"; 
    // Create an IMG element and attach it to the DIV. 
    var img = document.createElement("img"); 
    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 overlayImage pane. 
    var panes = this.getPanes(); 
    panes.overlayImage.appendChild(div); 
} 
USGSOverlay.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'; 
} 
USGSOverlay.prototype.onRemove = function() { 
    this.div_.parentNode.removeChild(this.div_); 
    this.div_ = null; 
} 
    </script> 
    </head> 
    <body onload="initialize()"> 
    <div id="map_canvas" style="position: relative; background-color: rgb(229, 227, 223); overflow: hidden;"></div> 
    </body> 
</html>

출처

2012-06-20 04:18:18 JV10

관련 문제

 관련 문제