Question

我正在尝试加载页面上的默认位置，并在用户点击链接时进行更改。我试着找一些我在网上找到的脚本，但我无法修复它。我确信我已经非常接近了，但我已经尝试了一周=（有人可以帮帮我吗？ =）

html
<div class="container-fluid" style="padding: 0;">
  <div class="col-lg-12">
    <div class="col-lg-3 sidebarMap">
      <h3>Casa Central SFV</h3>
      <p class="formInfo" style="border-bottom:0px;">Dirección:
        <a class="openmap" role="button" data-id="Casa Central">Ver en mapa</a>
      </p>
      <h3>Oficinas Belén</h3>
      <p class="formInfo" style="border-bottom:0px;">Dirección:
        <a class="openmap" role="button" data-id="Oficina Belen">Ver en mapa</a>
      </p>
    </div>

    <div class="col-lg-9" id="contactMap">
    </div>
  </div>

</div>

JS

var map;
var marker;
var uluru;

function initMap(longs, latts, markerTitle) {
  uluru = new google.maps.LatLng(longs, latts);
  // var uluru = {lat: -28.458342, lng: -65.770767};
  var map = new google.maps.Map(document.getElementById('contactMap'), {
    zoom: 17,
    center: uluru
  });
  var image = 'img/contacto/icon-map.png';
  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    icon: image,
    title: markerTitle,
    animation: google.maps.Animation.DROP,
    maxWidth: 200,
    maxHeight: 200
  });

  $('#mapModal').on('shown.bs.tab', function() {
    google.maps.event.trigger(map, "resize");
    map.setCenter(uluru);
  });
}


// Start Map Modals 
$(document).ready(function() {
  var myMapId = $(this).data('id');
  myMapId == "Casa Central";
  initMap(-28.458342, -65.770767, "Casa Central");
});

$(document).on("click", ".openmap", function() {
  var myMapId = $(this).data('id');
  if (myMapId == "Casa Central") {
    initMap(-28.458342, -65.770767, "Casa Central");
  } else if (myMapId == "Oficina Belen") {
    initMap(-27.652671, -67.028263, "Oficina Belén");
  }

});

CSS

#contactMap {
  height: 400px;
  width: 75%;
  float: right;
  z-index: 10;
}

.sidebarMap {
  position: absolute;
  top: 0px;
  left: 0;
  z-index: 1000;
  padding: 5px 15px 5px 25px;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #FFF;
}

我甚至不能做我的小提琴作品D： https://jsfiddle.net/Karsp/9z6dpk7j/

它在我的文件中工作正常，只是不加载默认的第一个位置。

Answer 1

在您的网站中，我注意到initMap()函数被调用了两次：

第一次来自$(document).ready()，但此处尚未初始化google对象，
第二次来自https://maps.googleapis.com/maps/api/js?key=xyz&callback=initMap所述的callback。在第二种情况下，谷歌被初始化。

尝试以这种方式更改Google Maps API参考：

https://maps.googleapis.com/maps/api/js?key=xyz&callback=initialize

和代码来自：

$(document).ready( function () {   
    var myMapId = $(this).data('id');
    myMapId == "Casa Central"; 
    initMap(-28.458342,-65.770767,"Casa Central");
});

为：

function initialize() {   
    var myMapId = $(this).data('id');
    myMapId == "Casa Central"; 
    initMap(-28.458342,-65.770767,"Casa Central");
};

P.S。：initialize（）函数必须可全局访问

Google地图会在点击时加载默认位置和不同位置

1 个答案: