javascript - 如何在 Laravel View 页面中动态显示 Google map 标记？

Question

我在互联网上找到了一些 JavaScript 代码。它帮助我通过移动数据库表上的标记来存储 Google map 中某个地点的纬度和经度。

数据库列名称为la|lo。现在我想在 View 页面上显示该位置。 map 应具有以下属性 frameborder="0"、scrolling="no"、marginheight="0"、marginwidth= “0”，宽度=“250”，高度=“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">

Answer 1

由于您指定了纬度/经度在数据库中，因此您可以检索它并将其设置在 js 中的数组列表中。之后，您只需将列表迭代到 add markers以此为基础。

这里的代码来自官方提供的文档。

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!'
  });
}

对于样式，您可以查看 Styled Maps官方文档中的页面。对于您想要在帖子中设置的内容来说，它应该足够了。