InfoBox를 사용할 때 jquery-ui-map 생성 지도를 대상으로 지정하는 방법
-
12-12-2019 - |
문제
나는 사용하고있다 jquery-ui-지도 다음과 같이 Google 지도 인스턴스를 생성하려면:
$('#CHMap').gmap({
mapTypeControl : false
}).bind('init', function(evt, map) {
log("Map initilised");
});
그런 다음 내가 사용하고 있는 스크립트의 다른 곳에서 인포박스 다음과 같이 지리 위치 서비스에서 가져온 데이터로 채워진 스타일 지정 가능 정보 상자를 추가합니다.
var boxText = document.createElement("div");
var ib = new InfoBox(myOptions); //myOptions can be ignored for this example
$.each(data, function(name, value) {
$('#CHMap').gmap('addMarker', {
id:value['YourId'],
'position': value['Latitude']+','+value['Longitude'],
'bounds': true,
'icon': '/img/gicon.png'
}).click(function() {
boxText.innerHTML = "hello";
ib.setContent(boxText);
ib.open(map, this);
});
});
'data'는 Geolocation 서비스에서 반환된 개체입니다.gmap이 처음 생성될 때 바인딩된 'init' 함수 안에 위의 'addMarker' 코드를 배치하면 infoBox가 제대로 표시됩니다.다른 곳에서 'addMarker' 코드를 사용하면 "Uncaught ReferenceError:맵이 정의되지 않았습니다." 오류가 콘솔에 표시됩니다.
'지도'를 올바르게 참조하려면 어떻게 해야 합니까?난 할 수 없을 것 같아 var map = $('#CHMap').gmap({//options});
'jquery-ui-map' 문서에서는 gmap이 아무것도 반환하지 않는다고 제안합니다.
해결책
내 생각엔 당신이 할 수 있을 것 같아요
var map = $('#CHMap').gmap();
OP의 참고 사항.최신 플러그인의 올바른 방법은 다음과 같습니다.
var map = $('#CHMap').gmap('get', 'map');
API에서 아무것도 반환하지 않는다는 내용이 어디에 있는지 알 수 없습니다.
지도에 액세스해야 하는 경우 지도 타일이 로드될 때까지 기다리는 Google 지도 이벤트 리스너 내에 코드를 추가할 수 있습니다.
Gmaps는 Google에서 비동기식으로 가져오기 때문에 이와 같은 작업을 수행하지 않는 한 호출할 때 Gmaps가 항상 거기에 있을 것이라고 확신할 수는 없습니다.
google.maps.event.addListener(YOUR_GOOGLE_MAPS_INSTACE, 'tilesloaded', function() {
// put your initialization code in here.
}
따라서 지도가 완전히 로드된 후에만 실행됩니다.
브라질에서 건배!