jquery 谷歌Map控件ID

iqih9akk 于 2023-01-01 发布在 jQuery

关注(0)|答案(2)|浏览(166)

我试图将内容写入谷歌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>

jquery

来源：https://stackoverflow.com/questions/74954005/google-maps-controls-id

2条答案

按热度按时间

xv8emn3q1#

请看下面的例子：https://jsfiddle.net/Twisty/og7tru4m/

脚本语言

$(function() {
  var map;
  var centerControlContainer;
  var centerControlId = 'mainCenterControlFrame';

  function mapinit(sel) {
    let mapinit = {
      center: new google.maps.LatLng(51.509865, -0.118092),
      zoom: 10,
      minzoom: 15,
      maxzoom: 21,
    };
    map = new google.maps.Map($(sel).get(0), mapinit);
    google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
      GMapready();
    });
  }

  function GMapready() {
    centerControlContainer = $('<div>', {
      id: centerControlId,
      class: 'mapControlContainer'
    });
    var control_1 = $('<div>', {
      id: "testcontrol_1",
      class: "mapcontrol"
    }).html("TestControl1").appendTo(centerControlContainer).click(function(evt) {
      console.log("Control 1 was clicked.");
    });

    var control_2 = $('<div>', {
      id: 'testcontrol_2',
      class: "mapcontrol"
    }).html('TestControl2').appendTo(centerControlContainer).click(function(evt) {
      console.log("Control 2 was clicked.");
    });

    map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlContainer.get(0));

    control_1.css('background-color', '#ff0000');
    control_2.css('background-color', '#0000ff');

  }

  mapinit("#mapframe");
});

正如您所建议的，Google JavaScript不能很好地与jQuery对象一起工作，但这不是一个问题。当您创建jQuery对象时，您仍然可以沿着底层的HTML元素或DOM元素。有几种方法可以做到这一点。
一种方法是使用.get()（See More），它返回特定索引处的DOM元素。

centerControlContainer.get(0)

每个jQuery对象还伪装成一个数组，因此我们可以使用数组解引用操作符来获取列表项。

centerControlContainer[0]

最好使用.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/

赞(0）回复(0）举报 2023-01-01

toiithl62#

testcontrol_1不会更改，因为它不是DOM的一部分，直到调用以下命令之后：$('#testcontrol_1').css('background-color', '#ff0000');.
如果您这样做：

setTimeout(function() {
  $('#testcontrol_1').css('background-color', '#ff0000');
},100);

给进程一个改变，让它在DOM中呈现，那么jquery就能够找到它。
proof of concept fiddle

- 代码片段：**

<html>

  <head>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
      html, body {
        width: 100%;
        height: 100%;
        padding: 0px;
        margin: 0px;
      }
      .mapframe {
        width: 100%;
        height: 100%;
      }

      .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);

        setTimeout(function() {
          $('#testcontrol_1').css('background-color', '#ff0000');
        }, 100);
        $(testControl2).css('background-color', '#ff0000');

      }

      mapinit();

    </script>
  </body>

</html>

赞(0）回复(0）举报 2023-01-01

我来回答

jquery 谷歌Map控件ID

2条答案

相关问题

热门标签

最新问答