2016-11-26 1 views
0

Google지도를 사용하는 방법을 파악하는 데 4 년 이상 노력했습니다. Im는 황홀함을 넘어 마침내 정확한 주소가있는지도를 생성 할 수있게되었습니다.Google지도 - 줌 레벨을 설정하는 방법

이것은 내 자바 스크립트입니다.

이제 확대/축소 수준을 설정하는 방법에 어려움을 겪고 있습니다. 나는 아래에 보여준 각 장소에서 그것을 시도했다 - 그러나 그들 중 누구도 일하지 않는다. 각 경우 (줌 레벨로 설정 한 숫자에 관계없이) 특정 건물에 대한지도를 실제로 가까이에 표시합니다.

누구나 내가 잘못하고있는 것을 볼 수 있습니까? 아니면 내지도가 줌 레벨에 대한 내 요청을 인식하도록해야합니까? 콘솔에 js 오류가 표시되지 않습니다.

function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 5 
    }); 
    var bounds = new google.maps.LatLngBounds(); 
    // var opts = { 
    // zoom: 10, 
    // max_zoom: 16 
    // } 

    var n = addresses.length; 
    for (var i = 0; i < n; i++) { 
    var lat = addresses[i].latitude; 
    var lng = addresses[i].longitude; 
    if (lat == null || lng ==null){ 
     console.log(addresses[i].name + " doesn't have coordinates"); 
    }else { 
     var address = new google.maps.Marker({ 
     position: {lat: parseFloat(lat), lng: parseFloat(lng)}, 
     title: addresses[i].name, 
     map: map //, 
//  zoom: 8 
     }); 
     bounds.extend(address.position); 
    } 
    } 
    map.fitBounds(bounds); 
} 

왜이 질문은 다른 질문과 다른지에 대한 질문에 답하십시오. 필자는이 JS에서 제공하는 기능을 어디에서 어떻게 사용할 것인지 구체적으로 고심하고있다. 위의 버전은 배우려고 4 년 이상 노력한 결과입니다. 생성 할 수있는 JS를 이해할 수 없습니다. 다른 게시물에서 일반적인 아이디어를 취할 수없고 다른 사람들이 할 수있는 것처럼 쉽게 적용 할 수 없습니다. 이 언어들과 의사 소통하는 방법을 해독하는 방법을 배우려고 할 때 나와 함께 견뎌주십시오. 내가 쉽게 파악할 수있는 것이 아닙니다.

또한 구체적으로 대답의 요점은 - 질문의 요지는 코드가 좋았을 수도 있지만 Google 도서관에서 올바른 표현은 "확대/축소 : 4 "setZoom (무언가). 나는 둘 다 시도하고 그들 중 하나를 내 코드에서 작동시키지 못한다. Xomena의 제안을 복용 XOMENA의 제안

, 나는 (I가 올바른 위치에 이런 짓을했는지 난 suer 아니에요 있지만) 내지도 기능에 줌과 중심을 정의하려고 노력했다.

이 작동하지 않습니다.

Uncaught SyntaxError: Unexpected identifier 

지금, 내 JS 파일이 있습니다 :

function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
    setZoom: 5 
    setCenter = addresses.first 
    }); 
    var bounds = new google.maps.LatLngBounds(); 
    // var opts = { 
    // zoom: 10, 
    // max_zoom: 16 
    // } 

    var n = addresses.length; 
    for (var i = 0; i < n; i++) { 
    var lat = addresses[i].latitude; 
    var lng = addresses[i].longitude; 
    if (lat == null || lng ==null){ 
     console.log(addresses[i].name + " doesn't have coordinates"); 
    }else { 
     var address = new google.maps.Marker({ 
     position: {lat: parseFloat(lat), lng: parseFloat(lng)}, 
     title: addresses[i].name, 
     map: map //, 
     // zoom: 8 
     }); 
     // bounds.extend(address.position); 
    } 
    } 
    // map.fitBounds(bounds); 
} 

나는 일이를 설정하는 방법에 대한 예를 찾을 수 없습니다 콘솔은 말한다 나의 JS 파일에 오류를 보여줍니다. 나는이 js 파일의 각 텍스트 블록에 설정된 확대/축소 및 중심선 설정을 시도했지만 작동하는 공식을 찾을 수 없습니다.

다음 시도

나는 머리 태그에서 내 application.html.erb에 body 태그 아래에 태그를 포함 자바 스크립트 내 응용 프로그램을 이동했습니다. 내가 게시물 (내가 그것을 사용하지 않는)지도가 어디보기에 다른 JS 파일을 추가 제안하는 각도 사용하여 다른 사람을 형성 SO 보았다

js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:95 Uncaught Eb {message: "initMap is not a function", name: "InvalidValueError", stack: "Error↵ at new Eb (https://maps.googleapis.com/m…3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:130:73"}message: "initMap is not a function"name: "InvalidValueError"stack: "Error↵ at new Eb (https://maps.googleapis.com/maps/api/js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:41:365)↵ at Object._.Fb (https://maps.googleapis.com/maps/api/js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:41:475)↵ at Lg (https://maps.googleapis.com/maps/api/js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:95:420)↵ at https://maps.googleapis.com/maps/api/js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:130:58↵ at Object.google.maps.Load (https://maps.googleapis.com/maps/api/js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:21:5)↵ at https://maps.googleapis.com/maps/api/js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:129:20↵ at https://maps.googleapis.com/maps/api/js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:130:73"__proto__: ErrorLg @ js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:95(anonymous function) @ js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:130google.maps.Load @ js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:21(anonymous function) @ js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:129(anonymous function) @ js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:130 
kwift.CHROME.min.js:1271 Uncaught SyntaxError: Identifier 'findGoodContent' has already been declared 

을 :

는 지금, 나는 말한다 오류가 표시됩니다.

각도가 사용되지 않는 레일의 경우이 문제를 해결할 수있는 사람이 있습니까?

답변

0

map.fitBounds() 메소드는 확대/축소 수준을 자동으로 조정하여 LatLngBounds에 추가 한 모든 위치를 표시합니다.직접 줌 레벨을 설정하려면 map.fitBounds()를 사용하지 말고 map.setZoom() 메서드를 사용하십시오.

https://developers.google.com/maps/documentation/javascript/reference#Map

+0

안녕 - 나는 fitBounds 아웃 라인 주석과 확대에 추가했습니다. 그러면지도가 렌더링되지 않습니다. 올바른 주소를 얻는 대신 바다의지도를 얻습니다. 줌 라인에 추가 한 숫자와 상관없이 동일한 줌 레벨입니다. 따라서 이것이 해결책이라고 생각하지 않습니다. 내가 사용해야하는 확대/축소 표현은 무엇입니까? 내 시도 중 어떤 것이 줌에 능숙합니까? – Mel

+0

[지도 옵션] (https://developers.google.com/maps/documentation/javascript/reference#MapOptions)에 center 매개 변수가 누락 되었기 때문입니다. Center는 map 옵션으로 정의되거나 map.setCenter() 메소드를 통해 정의되어야합니다. https://developers.google.com/maps/documentation/javascript/reference – xomena

+0

제안을 반영하려고했습니다. 나는 그것이 작동하도록하는 방법을 알아낼 수 없습니다. 위의 최선의 시도를 복사했습니다. 이 점을 이해하도록 도와주세요. 고맙습니다 – Mel

관련 문제