[javascript] HTMLElement에서 google.maps.Map 인스턴스 가져 오기


1 Answers

DOM Element 에서 google.maps.Map 객체를 약간의 트릭으로 얻을 수 있습니다.

맵 오브젝트를 초기화 할 때 요소의 데이터 속성에 오브젝트를 저장해야합니다.

예:

$.fn.googleMap = function (options) {
    var _this = this;

    var settings = $.extend({}, {
        zoom: 5,
        centerLat: 0,
        centerLon: 0
    }, options);

    this.initialize = function () {
        var mapOptions = {
            zoom: settings.zoom
        };

        var map = new google.maps.Map(_this.get(0), mapOptions);
        // do anything with your map object here,
        // eg: centering map, adding markers' events

        /********************************************
         * This is the trick!
         * set map object to element's data attribute
         ********************************************/
        _this.data('map', map);

        return _this;
    };
    // ... more methods

    return this;
};

지도 요소를 정의한 후 (예 :

var mapCanvas = $('#map-canvas');
var map = mapCanvas.googleMap({
    zoom: 5,
    centerLat: 0,
    centerLong: 0
});
// ... add some pre-load initiation here, eg: add some markers
// then initialize map
map.initialize();

나중에 요소 ID를 사용하여 나중에지도 객체를 가져올 수 있습니다. 예 :

var mapCanvas = $('#map-canvas');
$('.location').on('click', function () {
    // google map takes time to load, so it's better to get
    // the data after map is rendered completely
    var map = mapCanvas.data("map");
    if (map) {
        map.panTo(new google.maps.LatLng(
            $(this).data('latitude'),
            $(this).data('longitude')
            ));
    }
});

이 방법을 사용하면 한 페이지에 다른 동작을 가진 여러 맵을 가질 수 있습니다.

Question

페이지에 기존지도가 있습니다. document.getElementById ()의 행을 따라 HTMLElement javascript 객체를 가져와 해당 요소를 선택할 수 있습니다. 지도가 초기화 될 때 생성 된 google.maps.Map의 인스턴스를 가져올 수 있습니까? 예 : HTMLElement 객체 또는 프로토 타입에 속성이 있습니까?




지도를 초기화 할 때 인스턴스를 만듭니다.

var map = new google.maps.Map(document.getElementById("map_element"), options);

마커 넣기, 위치 변경하기 등과 같은 작업을 원할 때마다이 인스턴스를 사용합니다. HTMLElement 객체가 아닙니다. 그러나 그것은 getDiv() 메소드를 가지고 있으며,이 메소드는 여러분이 getDiv() html 요소를 제공합니다.

map.getDiv(); // in this case it returns the element with the id 'map_element'



Related