【问题标题】:GMaps centering not workingGMaps居中不起作用
【发布时间】:2017-09-19 05:10:35
【问题描述】:

我正在开发一个坐标点很少的应用程序,但我无法获得中心点。任何人都可以帮忙吗?这是我的代码:

<div id="mymap"></div>



 <script type="text/javascript">
       function initMap() {
    var locations = <?php print_r(json_encode($hospitalmap)) ?>;




    var mymap = new GMaps({
      el: '#mymap',
      lat: mymap.getCenter().lat(),
      lng: mymap.getCenter().lng(),
      zoom:13
    });
    //gMap.setCenter(new google.maps.LatLng(-6.2598513, 106.6160752));

    $.each( locations, function( index, value ){
        mymap.addMarker({
          lat: value.HospitalLatitude,
          lng: value.HospitalLongitude,
          title: value.HospitalName,
          click: function(e) {
            alert('This is '+value.HospitalName+'.');
          }
        });
   });

  }

  </script>

PS 如果我手动发送中心,它会起作用

编辑:我试图用 rohit 的指南来改变它

    var bounds = new google.maps.LatLngBounds();

    var mymap = new GMaps({
      el: '#mymap',

      zoom:13
    });


    $.each( locations, function( index, value ){
        mymap.addMarker({
          lat: value.HospitalLatitude,
          lng: value.HospitalLongitude,
          title: value.HospitalName,
          click: function(e) {
            alert('This is '+value.HospitalName+'.');
          }
        });
        bounds.extend(marker.position);
   }

   );map.fitBounds(bounds);

  }

  </script>

目前仍然无法正常工作。请帮忙!

这是数据样本:

var locations = [
{"HospitalID":2,"HospitalName":"RS Bethsaida","HospitalDesc":"","HospitalClass":"A","HospitalAddress":"Curug Sangereng, Kelapa Dua, Tangerang, Banten","HospitalPhone":"02183929302","HospitalEmail":"bethsaida@gmail.com","HospitalLatitude":"-6.254463","HospitalLongitude":"106.622776","Balance":"5250007","Active":"1","LoginMethod":null,"AcceptedBy":null,"AcceptedDate":null,"CreatedBy":"5","CreatedDate":"2017-08-01 00:00:00","ModifiedBy":"5","ModifiedDate":"2017-08-03 00:00:00"},
{"HospitalID":3,"HospitalName":"RS Mayapada","HospitalDesc":"","HospitalClass":"A","HospitalAddress":"Modernland, Jl. Honoris Raya Kav. 6, Kelapa Indah, Klp. Indah, Kec. Tangerang, Kota Tangerang, Banten","HospitalPhone":"02100001920","HospitalEmail":"rs@mayapada.com","HospitalLatitude":"-6.204981","HospitalLongitude":"106.641538","Balance":"0","Active":"1","LoginMethod":null,"AcceptedBy":null,"AcceptedDate":null,"CreatedBy":"5","CreatedDate":"2017-08-01 00:00:00","ModifiedBy":"5","ModifiedDate":"2017-08-03 00:00:00"}];

【问题讨论】:

标签: php laravel google-maps gmaps.js


【解决方案1】:

现在下面是一个工作示例,你可以用你的 PHP 代码替换位置,希望这能正常工作。

<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript' src="https://maps.google.com/maps/api/js?key=AIzaSyD95RyzZ5IEngrkYckzqRMAwyCZ7-eezMw"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.24/gmaps.js"></script>
<div id="map">dfas</div>
<style>
 #map {

        width: 98%;
        height: 600px;
        margin-bottom:50px;
        margin-left:15px;
    }
</style>
<script type='text/javascript'>

function initMap() {
var locations = [
{"HospitalID":2,"HospitalName":"RS Bethsaida","HospitalDesc":"","HospitalClass":"A","HospitalAddress":"Curug Sangereng, Kelapa Dua, Tangerang, Banten","HospitalPhone":"02183929302","HospitalEmail":"bethsaida@gmail.com","HospitalLatitude":"-6.254463","HospitalLongitude":"106.622776","Balance":"5250007","Active":"1","LoginMethod":null,"AcceptedBy":null,"AcceptedDate":null,"CreatedBy":"5","CreatedDate":"2017-08-01 00:00:00","ModifiedBy":"5","ModifiedDate":"2017-08-03 00:00:00"},
{"HospitalID":3,"HospitalName":"RS Mayapada","HospitalDesc":"","HospitalClass":"A","HospitalAddress":"Modernland, Jl. Honoris Raya Kav. 6, Kelapa Indah, Klp. Indah, Kec. Tangerang, Kota Tangerang, Banten","HospitalPhone":"02100001920","HospitalEmail":"rs@mayapada.com","HospitalLatitude":"-6.204981","HospitalLongitude":"106.641538","Balance":"0","Active":"1","LoginMethod":null,"AcceptedBy":null,"AcceptedDate":null,"CreatedBy":"5","CreatedDate":"2017-08-01 00:00:00","ModifiedBy":"5","ModifiedDate":"2017-08-03 00:00:00"}];
var map;
var bounds = new google.maps.LatLngBounds();
 map = new GMaps({
    el: '#map',
    lat: -6.254463,
    lng: 106.622776
  });

  $.each( locations, function( index, value ){
    map.addMarker({
      lat: parseFloat(value.HospitalLatitude),
      lng: parseFloat(value.HospitalLongitude),
      title: value.HospitalName,
      click: function(e) {
        alert('This is '+value.HospitalName+'.');
      }
    });
  bounds.extend({lat: parseFloat(value.HospitalLatitude), lng: parseFloat(value.HospitalLongitude)});

  });
    map.fitBounds(bounds);
}
initMap();
</script>

谢谢

【讨论】:

  • 这个还是不行,不过我把fiddle转过来试试:)再次感谢回复
  • 小提琴的链接在哪里?
  • 你的小提琴似乎不起作用。请同时加载所有必需的js。我试过了,但它显示我缺少 API_KEY。请使其正常运行,然后我们将移至 setcenter。甚至那里有 PHP 代码。
  • ;这是我所有的 JS,我使用 Gmaps cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.24/gmaps.js @rohit
  • @Cookie 我已经修改了我的答案,现在这是一个工作示例。请检查并让我知道是否还有其他需要。谢谢
猜你喜欢
  • 2017-02-13
  • 2014-10-16
  • 2014-06-18
  • 2015-05-11
  • 2018-08-24
  • 1970-01-01
  • 2016-05-11
  • 1970-01-01
相关资源
最近更新 更多