添加CSS类会在页面上移动Google地图

Question

按下页面上的按钮后，我将使用JQuery中的“ addClass（）”将标记添加到我的Google Map中。 该标记是静态的，因此在拖动页面时它将停留在页面的中央。

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

我遇到的问题是，在我的网站上，它正在向上和向右移动地图。 我还在下面提供了图片示例。

---

这是我的一些代码：

使用Javascript：

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

CSS：

<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>

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> 

小提琴

---

这就是我按下调整销位置按钮后的样子。

Answer 1

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

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

它应该工作。

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