현재 google map의 크기를 select의 <option> value와 setZoom을 이용해서 크기 조정을 하려고 하고 있어요 도와주세요~
조회수 1957회
<select id="location_distance">
<option value="500">500m</option>
<option value="1000">1km</option>
<option value="3000">3km</option>
<option value="5000">5km</option>
</select>
<div id="map"></div>
<script>
function zoomOption(){
/* var value= */
if(value=="500"){
map.setZoom(16);
}
if(value=="1000"){
map.setZoom(15);
}
if(value=="3000"){
map.setZoom(10);
}
if(value=="5000"){
map.setZoom(7);
}
}
}
</script>
이부분을 잘 봐주세요~~~
참고: 전체 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<meta charset="UTF-8">
<%@include file="/importhead.jsp" %>
<div data-role="page" id="store_nearby">
<%@include file="/header.jsp" %>
<%@include file="/panel.jsp" %>
<div id="store_nearby_detail" data-role="content" style="text-align:center;">
<select id="location_distance">
<option value="500">500m</option>
<option value="1000">1km</option>
<option value="3000">3km</option>
<option value="5000">5km</option>
</select>
<div id="map"></div>
<script>
function zoomOption(){
/* var value= */
if(value=="500"){
map.setZoom(16);
}
if(value=="1000"){
map.setZoom(15);
}
if(value=="3000"){
map.setZoom(10);
}
if(value=="5000"){
map.setZoom(7);
}
}
}
</script>
<script>
/* cordova.plugins.diagnostic.isLocationEnabled(gpsOnOff, gpsError); */
function initMap(){
var options = {
zoom:17,
center:{lat:37.519747,lng:126.930340},
disableDefaultUI: true
/* center: myLatlng,
mapTypeControl: false,
draggable: false,
scaleControl: false,
scrollwheel: false,
navigationControl: false, */
/* streetViewControl: false, */
/* mapTypeId: google.maps.MapTypeId.ROADMAP */
}
function gpsOnOff(available){
if(available){
alert('gps켜짐');
//현재 내 위치 좌표 받을 때 처리 함수
navigator.geolocation.getCurrentPosition(showLocation, failLocation,{maximumAge : 5000, timeout: 25000, enableHighAccuracy : true});
}else{
alert('GPS를 켜주세요');
cordova.plugins.diagnostic.switchToLocationSettings();
//navigator.geolocation.getCurrentPosition(showLocation, failLocation,{enableHighAccuracy : true , timeout: 25000});
navigator.geolocation.getCurrentPosition(showLocation, failLocation,{maximumAge : 5000, timeout: 25000, enableHighAccuracy : true});
}
}
//new map
var map = new google.maps.Map(
document.getElementById('map'), options);
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(initialLocation); //current position getting codes 현재위치 받아오기
});
}
// The marker, positioned at Uluru
var marker = new google.maps.Marker({
position: {lat:37.519747,lng:126.930340},
map:map,
icon: {
url: 'https://developers.google.com/maps/documentation/javascript/images/circle.png',
anchor: new google.maps.Point(10, 10),
scaledSize: new google.maps.Size(13, 20)
}
/* icon: */
});
var infoWindow = new google.maps.InfoWindow({
content: '<h3>여의도 커피집</h3>'
/* '<h4>여의도동 여의대방로 67길11</h4>' */
});
marker.addListener('click', function(){
infoWindow.open(map, marker);
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBPwhDtefvg2PSzwiBibrJ3FVL4QU79Iyo&callback=initMap">
</script>
</div>
<%@include file="/footer.jsp" %>
</div>
-
-
(•́ ✖ •̀)
알 수 없는 사용자 - 〉
1 답변
-
var map = 어쩌구라인 뒤에서 (왜냐면... 당연한 소리지만...map이 존재해야 하므로) 이런 스크립트로 통제를 해보세요.// 테스트 안해본 코드입니다. 오타나 문법실수 있을수 있음 // 문서에서 #local_distance 개체를 찾는다. var dropdown = document.getElementById('location_distance') // 그 드롭다운 개체에 대해서 onChange 이벤트가 터지면 그때는 dropdown.addEventListener('change', function (e) { // 그 개체의 현재 값을 가지고 var scale = parseInt(e.target.value) || 500 // <-- 혹시몰라 넣는 기본값은 500. 그리고 축척은 영어로 reduced scale이라고 합니다. // 원하는 zoom 값으로 변환해서 var zoom = 17 - scale/500 // <-- zoomOption() 함수는 이런 식의 일차함수로 최적화 가능할 것 같네요. // 이미 존재하는 map 객체의 setZoom 메소드를 쳐주기로 한다. map.setZoom(Math.floor(zoom)) // <-- 정수를 사용하기 위해 내림처리 })
댓글 입력