javascript - 添加 css 类会在我的页面上移动我的谷歌地图

Question

我在按下页面上的按钮时使用 JQuery 中的“addClass()”向我的 Google map 添加标记。标记是静态的，因此在拖动页面时它位于页面的中心。

我认为问题可能出在我将 CSS 类添加到包含 map 的 div 中，当添加该类时，它不仅会操纵标记的位置，还会操纵 map 的位置。

我遇到的问题是，在我的网站上， map 向上和向右移动。我还在下面包含了图片示例。

---

这是我的一些代码:

Javascript:

$("#editPinDrop").click(function() {
  var t = $(this).text();
  if ($(this).text() == "Save") {
    $("button#editPinDrop").text('Adjust Pin Location');
    // make map undraggable
    mapOptions.draggable = false;

    $marker.setMap($googlemap);
    // remove div

    // put marker back in
    initialize(true);
    //SaveCoordinates();
  } else {
    $("button#editPinDrop").text('Save');
    // make map draggable
    mapOptions.draggable = true;

    $marker.setMap(null);
    // inject the div into the map
    $('#map-canvas').addClass('centerMarker').appendTo($googlemap.getDiv());

    // init with no marker
    initialize(false);
  }
});


function initialize(hasMarker) {

  $googlemap = new window.google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  if (hasMarker) {
    var latlngs = new google.maps.LatLng(mapCoordinates.latitude, mapCoordinates.longitude); //(6.9167, 79.8473); 
    $marker = new google.maps.Marker({
      position: latlngs,
      map: $googlemap,
      title: 'My Space',
      draggable: false
    });

    $marker.setMap($googlemap);
  } else {
    $marker.setMap(null);
  }
}

CSS:

.centerMarker {
  position: absolute;
  /*url of the marker*/
  background: url('../App_Data/Images/meetups.png') no-repeat;
  /*center the marker*/
  top: 50%;
  left: 50%;
  z-index: 1;
  /*fix offset when needed*/
  margin-left: -10px;
  margin-top: -34px;
  /*size of the image*/
  height: 34px;
  width: 20px;
  cursor: pointer;
}

HTML:

<div class="col-md-9">
  <div class="thumbnail">
    <div id="map">
      <div id="map-canvas" style="height: 380px; width: 480px"></div>
      <br />@if (Model.Address.Completed == ListingComplete.Complete) {
      <div id="addressDiv">
        <button id="addressbutton" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
          Edit Address
        </button>
        <button id="editPinDrop" type="button" class="btn btn-primary btn-lg">
          Adjust Pin Location
        </button>
      </div>
      } else {
      <div id="addressDiv">
        <button id="addressbutton" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
          Add Address
        </button>
        <button id="editPinDrop" type="button" class="btn btn-primary btn-lg" style="display:none;">
          Adjust Pin Location
        </button>
      </div>
      }
    </div>
  </div>
</div>

FIDDLE

---

这是我按下调整引脚位置按钮后的样子。

Answer 1

看起来这就是问题所在 - 如果您遵循 Fiddle 的指导并使用

$('<div/>').addClass('centerMarker').appendTo($googlemap.getDiv());

它应该可以工作。

本质上，您正在获取现有的 map 元素，将类添加到其中，然后将其附加到 map.getDiv() 的结果中。 .据我所知，您实际上想要附加一个新的空 div 类 centerMarker到 map 。