我在网页上有一张现有地图。我可以使用document.getElementById()中的某些内容来选择该元素,以获取HTMLElement javascript对象。是否有可能获得初始化地图时创建的google.maps.Map实例,即它是HTMLElement对象的属性还是其原型?
答案 0 :(得分:44)
您无法从构建Google地图对象的google.maps.Map
获取DOM Element
个对象。 google.maps.Map
只是一个包装器,它控制DOM Element
查看地图,而该元素没有引用它的包装器。
如果您的问题只是范围,请将map
作为window
对象的属性,并且可以从您网页的任何位置访问该问题。您可以使用以下方法之一将'map'
设为全局:
window.map = new google.maps.Map(..)
或
map = new google.maps.Map(...) //AVOID 'var'
答案 1 :(得分:22)
你可以从google.maps.Map
获得DOM Element
对象,只需轻微的伎俩。
初始化地图对象时,需要将对象存储在元素的数据属性中。
示例:
$.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')
));
}
});
通过使用此方法,您可以在页面上拥有多个具有不同行为的地图。
答案 2 :(得分:5)
我有类似的问题。我想做的就是在创建地图之后操纵地图。我尝试了类似的东西(我认为它也会对你有所帮助)。我已经创建了函数(或多或少像这样):
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
值与调用创建地图的函数时不同。
希望有所帮助。
答案 3 :(得分:2)
初始化地图时创建实例;
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'
答案 4 :(得分:0)
如果您使用Polymer项目中的Google-map组件,您可以像这样获取现有的地图Dom:
var map = document.querySelector('google-map');
完成后,可以通过以下方式访问当前的地图实例:
var currentMapInstance = map.map;