我试图将内容写入谷歌Map控件div,我首选的方法是使用带有div id的jquery选择器。问题是Map似乎只使用变量引用的实际元素来更改它,而不是它的ID。
底部控件“testcontrol_2”可以更改其背景,但ID引用的“testcontrol_1”仍为白色。
我的问题是,为什么我可以使用实际的html元素作为jQuery选择器,而不是元素id,将内容写入map控件。
小提琴:https://jsfiddle.net/Tim_H/pgb9z2v1/2/
代码:
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDbFd34Z8SoF6Q9v3RQnkwy5nDDw09tvww"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.mapframe {
width: 100%;
height: 50em;
}
.mapcontrol {
padding: 1em;
background-color: #ffffff;
}
</style>
</head>
<body>
<div id="mapframe" class="mapframe"></div>
<script>
var map;
var centerControlContainer;
var centerControlId = 'mainCenterControlFrame';
var testControl2;
function mapinit() {
let mapinit = {
center: new google.maps.LatLng(51.509865, -0.118092),
zoom: 10,
minzoom: 15,
maxzoom: 21,
};
map = new google.maps.Map(document.getElementById('mapframe'), mapinit);
google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
GMapready();
});
}
function GMapready() {
centerControlContainer = document.createElement('div');
$(centerControlContainer).addClass('mapControlContainer');
$(centerControlContainer).attr('id', centerControlId);
$(centerControlContainer).html('<div id="testcontrol_1" class="mapcontrol">TestControl1</div>');
testControl2 = document.createElement('div');
$(testControl2).attr('id', 'testcontrol_2');
$(testControl2).html('TestControl2');
$(testControl2).addClass('mapcontrol');
$(centerControlContainer).append(testControl2);
this.map.controls[google.maps.ControlPosition.TOP_CENTER].push(this.centerControlContainer);
$('#testcontrol_1').css('background-color', '#ff0000');
$(testControl2).css('background-color', '#ff0000');
}
mapinit();
</script>
</body>
</html>
2条答案
按热度按时间xv8emn3q1#
请看下面的例子:https://jsfiddle.net/Twisty/og7tru4m/
脚本语言
正如您所建议的,Google JavaScript不能很好地与jQuery对象一起工作,但这不是一个问题。当您创建jQuery对象时,您仍然可以沿着底层的HTML元素或DOM元素。有几种方法可以做到这一点。
一种方法是使用
.get()
(See More),它返回特定索引处的DOM元素。每个jQuery对象还伪装成一个数组,因此我们可以使用数组解引用操作符来获取列表项。
最好使用
.get()
。通过这种方式,您可以创建和管理jQuery对象,并且仍然可以在Google Maps中使用它们。
您还可以利用jQuery动态创建DOM元素的功能。
如果将字符串作为参数传递给
$()
,jQuery将检查该字符串是否类似HTML(即,它以<tag ... >
开始)。如果不是,则该串被解释为选择器表达式,如上所述。但是如果该串看起来是HTML片段,jQuery尝试创建HTML描述的新DOM元素,然后创建并返回引用这些元素的jQuery对象。查看更多信息:https://api.jquery.com/jQuery/#jQuery-html-attributes和https://learn.jquery.com/using-jquery-core/jquery-object/
jQuery的主要优点之一是链接。
如果你在一个选择上调用一个方法,并且这个方法返回一个jQuery对象,你可以继续在这个对象上调用jQuery方法,而不需要在分号前暂停,这种做法被称为“链接”。
查看更多:https://learn.jquery.com/using-jquery-core/working-with-selections/
toiithl62#
testcontrol_1
不会更改,因为它不是DOM的一部分,直到调用以下命令之后:$('#testcontrol_1').css('background-color', '#ff0000');
.如果您这样做:
给进程一个改变,让它在DOM中呈现,那么jquery就能够找到它。
proof of concept fiddle