Question

我只需按一下页面上的按钮，就可以使用JQuery中的'addClass（）'为我的Google地图添加标记。标记是静态的，因此在拖动页面时它会停留在页面的中心。

我想也许问题是我将CSS类添加到包含地图的div中，当添加类时，它不仅会操纵标记，还会操纵地图。

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

<小时/> 以下是我的一些代码：

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

enter image description here

按下调整针位置按钮后，这就是它的样子。

enter image description here

Answer 1

看起来这就是问题所在 - 如果你遵循小提琴的主角并使用

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

它应该有用。

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

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

1 个答案: