동적지도에 여러 개의 Google지도 아이콘을 만들려고 시도합니다.

Question

일부 링크가있는지도를 만들었습니다 (클릭하면 jquery를 사용하여지도 위치를 변경).

나는 각 위치에 마커를 구현하려했지만 마커가 기본값으로 설정된 맵 위치 이외의 다른 위치에 표시되도록하는 데 어려움을 겪었습니다.

위도 및 경도 값 각각에 마커를 설정하려고합니다. 다음 코드를 사용하려고했지만 오류가 발생합니다. TypeError : map.setPosition은 방화 광 콘솔의 함수가 아닙니다. 다음과 같이

내 코드는 다음과 같습니다

HTML :

<a id="link-aberdeen" href="javascript:void(0)" class="button1">Munich</a>  
<a id="link-glasgow" href="javascript:void(0)" class="button2">Oxford</a>  
<a id="link-glasgow" href="javascript:void(0)" class="button3">Glasgow</a> 

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

CSS :

#map-canvas { background: #eaeaea none repeat scroll 0 0; height: 300px; width: 100%; } 

JAVASCRIPT :

function initialize() { 

map = new google.maps.Map(document.getElementById('map-canvas'), { 
center: new google.maps.LatLng(48.1293954,12.556663), //Setting Initial Position 
zoom: 10 
}); 

var marker = new google.maps.Marker({ 
    map: map, 
    position: new google.maps.LatLng(48.1293954,12.556663), 
center: new google.maps.LatLng(48.1293954,12.556663), 
zoom: 10 
}); 

} 


function newLocation(newLat,newLng) { 
map.setCenter({ 
    lat : newLat, 
    lng : newLng 
}); 

map.setPosition({ 
    lat : newLat, 
    lng : newLng 
}); 

} 

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


$(document).ready(function() { 

$(".button1").on('click', function() { 
    newLocation(48.1293954,12.556663); 
}); 

$(".button2").on('click', function() { 
    newLocation(51.7163950,-1.2196100); 
}); 

$(".button3").on('click', function() { 
    newLocation(55.8610240,-4.2614560); 
}); 

}); 

나는 또한 내가 테스트되었습니다 바이올린을 에,를 보아라.

아무도 도와 줄 수 있습니까?

Answer 1

...
는하지만 CodePen에서 작동합니다.

많은 작은 것들이 수정되었습니다. 그 이후

1. 구글 API 스크립트 호출 콜백에서 사용 initialize 대신 initMap ...
   는 함수라는 방법입니다.
2. map을 전역 (특정 기능 제외)으로 선언하십시오.
3. 지도에 관한 모든 내용은 initialize function 안에 있어야합니다.
4. 3 링크와 같은 것으로 사용하는 경우 jQuery를로드하는 것을 잊지 마십시오!

코드 :

var map; 

function initialize() { 
    map = new google.maps.Map(document.getElementById('map-canvas'), { 
     center: new google.maps.LatLng(48.1293954, 12.556663), //Setting Initial Position 
     zoom: 10 
    }); 

    var marker = new google.maps.Marker({ 
     map: map, 

     position: new google.maps.LatLng(48.1293954, 12.556663), 
     center: new google.maps.LatLng(48.1293954, 12.556663), 
     zoom: 10 
    }); 

    function newLocation(newLat, newLng) { 
     map.setCenter({ 
      lat: newLat, 
      lng: newLng 
     }); 

     new google.maps.Marker({ 
      map: map, 
      position:{ 
       lat: newLat, 
       lng: newLng 
      } 
     }); 
    } 


    $(".button1").on('click', function() { 
     newLocation(48.1293954, 12.556663); 
    }); 
    $(".button2").on('click', function() { 
     newLocation(51.7163950, -1.2196100); 
    }); 
    $(".button3").on('click', function() { 
     newLocation(55.8610240, -4.2614560); 
    }); 

} 

API 호출 :

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC7_p0NkDTQQmn8ZVJosJJ-3Xr93x-tVVo&callback=initialize" async defer></script> 

Answer 2

마커 인스턴스에서 버튼을 클릭하면지도 인스턴스에서 setCenter 메서드를 호출해야합니다. 함수 범위 때문에 예제가 작동하지 않습니다. 의 범위는 initialize입니다. global/window 개체로 호이스트하려면 전에 var을 제거하거나 initialize 함수 외부에서 변수 선언을 만들어야합니다. 나는이 바이올린에서 작업 할 수없는 이유를 모르는

var map; 
var marker; 

function initialize() { 
    map = new google.maps.Map(…); 
    marker = new google.maps.Marker(…); 
} 

$('.button').on('click', function() { 
    map.setCenter({ 
    lat: LATITUDE, 
    lng: LONGITUDE 
    }); 

marker.setPosition({ 
    lat: LATITUDE, 
    lng: LONGITUDE 
}); 
});