如何在Laravel视图页面中动态显示谷歌地图标记

How to show Google Map marker dynamically in a Laravel view page?

本文关键字：谷歌 动态显示 地图 图标 Laravel 视图      更新时间：2023-09-26

我在互联网上发现了一些JavaScript代码。它通过移动数据库表上的标记，帮助我从谷歌地图中存储一个地方的纬度和经度。

数据库列名为la|lo。现在我想在视图页面上显示位置。映射应该具有以下属性frameborder="0"、scrolling="no"、marginheight="0"、marginwidth="0"、width="250"、height="272"。

我是一个新手，对JavaScript的了解很差。我提供了注册纬度和经度的js代码。

<script
src="http://maps.googleapis.com/maps/api/js">
</script>
<script>
function initialize() {
    var latitude = 23.786758526804636;
    var longitude = 90.39979934692383;
    var zoom = 11;
    var LatLng = new google.maps.LatLng(latitude, longitude);
  var mapProp = {
    center: LatLng,
    zoom:12,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
  var marker = new google.maps.Marker({
      position: LatLng,
      map: map,
      title: 'Drag Me!',
      draggable: true
    });
  google.maps.event.addListener(marker, 'dragend', function(event) {
      document.getElementById('la').value = event.latLng.lat();
      document.getElementById('lo').value = event.latLng.lng();

});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
        <div id="googleMap" style="width:auto;height:400px;"></div>
        <input type="hidden" id="la" name="la">
        <input type="hidden" id="lo" name="lo">

由于您指示lat/long在数据库中，因此您只需检索它并在js中的数组列表中设置它。在那之后，你只需要迭代列表来添加基于它的标记

此处的代码来自提供的官方文档。

function initMap() {
  var myLatLng = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: myLatLng
  });
  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
  });
}

对于样式，您可以查看官方文档中的"样式化地图"页面。你想在帖子中设置的内容应该足够了。

相关文章：