Marker不会加载谷歌地图,

时间:2017-01-15 08:51:59

标签: javascript google-maps-api-3 codeigniter-3

我试图从数据库加载标记,但这些标记没有加载。但是,如果我尝试手动加载它就可以了。

我的观点view_file.php

  var map;
  function initialize(lt,lg) {
    var mapDiv = document.getElementById('map-canvas');
    map = new google.maps.Map(mapDiv, {
      center: new google.maps.LatLng(lt, lg),
      zoom: 7,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
      <?php foreach ($position as $row) { ?>
            $lat = $row['lat'];
            $longi = $row['longi'];
            var latLng = new google.maps.LatLng($lat,$longi);
            new google.maps.Marker({
                position: latLng,
                map: map
            })
        <?php } ?>
  }
</script>
</head>
<body onload="initialize(-0.165343, 113.930935)">
<div id="map-canvas" style="width: 100%; height: 600px"></div>  

我的控制器map.php

public function __construct(){
    parent::__construct();
    $this->load->model('maps');
}

function index(){
    $data['position']   =   $this->maps->marker();
    $this->load->view('include/header');
    $this->load->view('view_file', $data);
    $this->load->view('include/footer');
}  

我的模型maps.php

function marker(){
    $post = $this->db->get('koor');
    return $post->result();
}

以下代码适用(手动输入坐标)。控制器与上面相同。

var map;
  function initialize(lt,lg) {
    var mapDiv = document.getElementById('map-canvas');
    map = new google.maps.Map(mapDiv, {
      center: new google.maps.LatLng(lt, lg),
      zoom: 7,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    marker(-0.735467, 110.521677);
    marker(1.549480, 116.124705);
    marker(-2.558367, 115.179880);
  }

   function marker(lt,lg){
      var latLng = new google.maps.LatLng(lt,lg);
      var marker = new google.maps.Marker({
        position: latLng,
        map: map
      });
  }
</script>
</head>
<body onload="initialize(-0.165343, 113.930935)">
<div id="map-canvas" style="width: 100%; height: 600px"></div>  

我试图修改我的代码,搜索了类似的问题,但没有任何作用,这是我的代码的最后一种形状。

更新

我已经解决了这个问题

 var map;
 function initialize() {
    var mapDiv = document.getElementById('map-canvas');
    map = new google.maps.Map(mapDiv, {
      center: new google.maps.LatLng(-0.165343, 113.930935),
      zoom: 7,
      mapTypeId: google.maps.MapTypeId.ROADMAP
 });
    var lat, longi, marker;
    <?php foreach ($position as $row) { ?>
        lat = <?php echo $row->lat ?>,
        longi = <?php echo $row->longi ?>,

        marker = new google.maps.LatLng(lat,longi);
        new google.maps.Marker({
            position: marker,
            map: map
        });
    <?php } ?>
}

2 个答案:

答案 0 :(得分:0)

您的错误:

<?php
    $lat = $row['lat'];
    $longi = $row['longi'];
?>

这是在javascript中显示的。 确保它将在php中执行而不是javascript。

正确的代码:

    <div id="ShowCase" style="background-color: black; position: absolute; height: 100%; width: 100%; top: 0px; left: 0px; opacity: 0.5;  color: white;">
            <h2 >شما با این گزینه می توانید</h2>
    </div>

答案 1 :(得分:0)

  var map;
  function initialize(lt,lg) {
    var mapDiv = document.getElementById('map-canvas');
    map = new google.maps.Map(mapDiv, {
      center: new google.maps.LatLng(lt, lg),
      zoom: 7,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

      var lat, longi;

      <?php foreach ($position as $row) { ?>

            lat = <?= $row->lat ?>;
            longi = <?= $row->longi ?>;
            marker(lat, longi);

        <?php } ?>
  }

  function marker(lt,lg){
      var latLng = new google.maps.LatLng(lt,lg);
      var marker = new google.maps.Marker({
        position: latLng,
        map: map
      });
  }
</script>
</head>
<body onload="initialize(-0.165343, 113.930935)">
<div id="map-canvas" style="width: 100%; height: 600px"></div>