谷歌地图加载默认和点击不同位置

  • Z时代
  • 2024-01-10
  • 分类：问答

我想加载一个页面上的默认位置，并改变当用户点击链接。我试图寻找一些我在网上找到的脚本，但我无法修复它。 我敢肯定，我很接近得到它，但我一直在努力了一个星期=（ 有人能帮助我吗？=）谷歌地图加载默认和点击不同位置

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/

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

回答：

在您的网站，我发现initMap()函数被调用两次：从$(document).ready()

  • 第一次，但在这里，谷歌对象尚未初始化，

  • ，第二次是从https://maps.googleapis.com/maps/api/js?key=xyz&callback=initMap说callback调用。在第二种情况下谷歌被初始化。

尝试改变谷歌地图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"); 
};

PS：初始化（）函数必须全球访问

以上是 谷歌地图加载默认和点击不同位置 的全部内容， 来源链接： utcz.com/qa/264967.html

回到顶部