50

ページに既存のマップがあります。document.getElementById() の行に沿って何かを使用してその要素を選択し、HTMLElement javascript オブジェクトを取得できます。地図が初期化されたときに作成された google.maps.Map のインスタンスを取得することは可能ですか?つまり、それは HTMLElement オブジェクトのプロパティですか、それともプロトタイプですか?

4

5 に答える 5

51

Google マップ オブジェクトが構築されているgoogle.maps.Mapからオブジェクトを取得できません。マップの表示を制御する単なるラッパーであり、その要素はそのラッパーへの参照を持っていません。DOM Elementgoogle.maps.MapDOM Element

問題がスコープのみの場合は、オブジェクトmapのプロパティとして作成すると、ページのどこからでもアクセスできるようになります。次のいずれかを使用して、グローバルにするwindowことができます。'map'

 window.map = new google.maps.Map(..)

また

 map = new google.maps.Map(...) //AVOID 'var'
于 2012-04-20T21:21:26.830 に答える
27

ちょっとしたトリックでgoogle.maps.Mapからオブジェクトを取得できます。DOM Element

マップ オブジェクトを初期化するときは、要素の data 属性にオブジェクトを格納する必要があります。

例：

$.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')
            ));
    }
});

この方法を使用すると、ページ上で異なる動作をする複数のマップを使用できます。

于 2014-11-12T05:07:22.660 に答える
6

同様の問題がありました。私がやりたかったのは、マップが作成された後にマップを操作することだけでした。私はそのようなことを試しました（あなたにも役立つと思います）。関数を作成しました（多かれ少なかれこのように）：

function load_map(el_id, lat, lng) {
  var point = new google.maps.LatLng(lat,lng);
  var myMapOptions = {
    scrollwheel:false,
    zoom: 15,
    center: point,
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
      position: google.maps.ControlPosition.RIGHT_TOP
    },
    navigationControl: true,
    navigationControlOptions: {
      style: google.maps.NavigationControlStyle.SMALL,
      position: google.maps.ControlPosition.LEFT_CENTER
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById(el_id),myMapOptions);
  var marker = new google.maps.Marker({
    draggable:true,
    map: map,
    position: point
  });
  return({
    container:map.getDiv(),
    marker:marker,
    mapa:map
  });
}

この関数が行うことは、それを呼び出してコンテナにマップを作成した後です。

var mapa = load_map('mapa_container', 53.779845, 20.485712);

関数は、マップの作成中に使用されるデータを含むオブジェクトを返します。マップ自体を作成した後、私の場合は、mapaオブジェクトを使用して各マップ上のマーカーを個別に操作できます。次に例を示します。

mapa.marker.setPosition(new google.maps.LatLng(20,30));
mapa.mapa.setCenter(new google.maps.LatLng(20,30));

これにより、マーカーの位置と中心マップが同じ座標に変更されます。マップを作成する関数を呼び出すときlngと値が異なることに注意してください。lat

それが役立つことを願っています。

于 2013-01-16T12:43:51.403 に答える
3

マップを初期化するときにインスタンスを作成します。

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

マーカーを置いたり、場所を変更したりしたいときはいつでも、そのインスタンスを使用します。これは HTMLElement オブジェクトではありません。ただし、getDiv()操作対象の html 要素を提供するメソッドがあります。

map.getDiv(); // in this case it returns the element with the id 'map_element'
于 2012-04-20T20:53:04.453 に答える
0

Polymer プロジェクトの Google マップ コンポーネントを使用している場合は、次のようにして既存のマップ Dom を取得できます。

var map = document.querySelector('google-map');

それを取得したら、マップの現在のインスタンスに次の方法でアクセスできます。

var currentMapInstance = map.map;
于 2015-08-02T18:14:24.563 に答える