- 자바 스크립트

Map Shaded http://demo.silkea.com/map_shade.png - 자바 스크립트

을 내가 예를 들어, 참조 영역을 그리기 달성하기 위해 노력하고 있습니다. 음영 처리, 정적, 사용자 입력 또는 변경 작업이 없습니다.

Javascript 및 Google Map V3를 사용하여 동적으로 그리기의 예를 찾을 수 있지만 정적은 아닙니다.

는 어떤 도움을 여기 다른 사람입니다 ...

그녀를 얻었다 감사합니다 ... 제안 들으 ... 그것은 무엇을 할 것 InfoBox 같은 소리

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 

function initialize() { 
var myLatLng = new google.maps.LatLng(51.176630373, -114.47321937); 
var myOptions = { 
    zoom: 15, 
    center: myLatLng, 
    mapTypeId: google.maps.MapTypeId.HYBRID 
}; 

var mapsquare; 

var map = new google.maps.Map(document.getElementById("map_canvas"), 
    myOptions); 

var squareCoords = [ 
new google.maps.LatLng(51.179858807660786, -114.47836921691896), 
new google.maps.LatLng(51.173563152178794, -114.47836921691896), 
new google.maps.LatLng(51.173563152178794, -114.46892784118654), 
new google.maps.LatLng(51.179858807660786, -114.46892784118654) 
]; 

// Construct the polygon 
mapsquare = new google.maps.Polygon({ 
    paths: squareCoords, 
    strokeColor: "#FF0000", 
    strokeOpacity: 1, 
    strokeWeight: 1, 
    fillColor: "#FF0000", 
    fillOpacity: 0.35 
}); 

mapsquare.setMap(map); 
} 
</script> 
</head> 
<body onload="initialize()"> 

<br><br> 


NW Marker <br> 
51.179858807660786 &nbsp;&nbsp;&nbsp; -114.47836921691896 
<br><br> 
SE Marker<br> 
51.173563152178794 &nbsp;&nbsp;&nbsp; -114.46892784118654 
<br><br> 
<div id="map_canvas" style="width: 850px; height: 450px;"></div> 



<br><br> 


<br><br> 
</body>

출처

2012-05-03 Merle_the_Pearl

도움이되어 좋았습니다. 아래에서 내 대답이 내 질문에 해당한다고 생각되면 답변 옆에있는 화살표 모양을 클릭하여 동의라고 표시하는 것이 일반적입니다. –

당신 필요한 것; 지도의 라벨과 유사하게 작동합니다. 또는 특정 좌표의 모서리를 정확히 정의 할 수있는 것이 필요한 경우 google.maps.Rectangle을 시도해보십시오.

후속 편집 :

코드의 문제는 좌표의이 순서가 있다는 것입니다, 그래서 모양이 좌표를 따라 비틀어지고 있습니다. 당신이 가지고가는 경우에 기존의 모양 좌표 :

var squareCoords = [ 
    new google.maps.LatLng(51.179858807660786, -114.47836921691896), 
    new google.maps.LatLng(51.173563152178794, -114.47836921691896), 
    new google.maps.LatLng(51.173563152178794, -114.46892784118654), 
    new google.maps.LatLng(51.179858807660786, -114.46892784118654) 

];

을 그리고 이것은 잘 작동합니다 :

var squareCoords = [ 
    new google.maps.LatLng(51.179858807660786, -114.47836921691896), 
    new google.maps.LatLng(51.173563152178794, -114.47836921691896), 
    new google.maps.LatLng(51.179858807660786, -114.46892784118654), 
    new google.maps.LatLng(51.173563152178794, -114.46892784118654) 
];

을 그리고 단지 마지막 두 점의 순서를 반대로, 당신은 얻을 것이다. 다음은 로컬 단위 테스트를 실행하는지도 이미지입니다. enter image description here

출처

2012-05-03 04:31:45

예 코너 좌표를 정의해야합니다 ... 사각형을 보겠습니다. –

조금 붙어서 ... 사각형을 그리지 않음 - 두 개의 사각형을 그리기 - [링크] (http://demo.silkea.com/gps.htm) –

모퉁이가 뒤집혀있는 것처럼 보입니다. 좌표에 맞게 왜곡되어 있습니다. 더 깊은 모습을 드러내는 것. 광장에서 마지막 2 점의 순서를 바꾼다면 좋을 것 같습니다. 아직도 더 깊게보고 있습니다 - –

- 자바 스크립트

답변

관련 문제