Question

我正在开发一个谷歌地图API项目。

我从数据库中获取 lat 和 long 值，并将它们显示在PHP呈现的HTML中。

当我点击带有lat＆amp; long值的按钮时，我想在地图上绘制路线。（查看图片http://imgur.com/DkxlFbC）

但是出现了问题，并且总是采用相同的值来绘制路线。

我尝试使用 changehandler 但不起作用。

的index.php：

  $('figure').each( function() {
    var thumb = $(this).find('.thumbnail');
    var image = $(this).find('a').attr('href');
    $(thumb).css('background-image', image);
  });

JS：

<?php
    $test=mysql_query("SELECT lat, lng FROM markers  ");
    ?>
    <div class='container'>
      <div class='row'>
        <center>
          <?php
          while ($deneme=mysql_fetch_assoc($test)) {
            extract($deneme);
            echo '<br>';
            echo '<h6 id="lat" class="box-design">'.$deneme['lat'].'</h6>';
            echo '<h6 id="lng" class="box-design">'.$deneme['lng'].'</h6>';
            echo '<br>';
            echo '<input id="submit" onclick="myFunction()" type="submit" class="btn btn-primary" value="Button">';
            echo '</div>';
          }
          ?>
        </center>
      </div>
    </div>

Answer 1

与评论中提到的一样， id 属性必须是唯一的。

_{id global attribute定义了一个唯一标识符（ID），该标识符在整个文档中必须是唯一的。} ¹

使用类似下面的技术，为每组纬度和经度值添加数字索引及相关按钮。请注意，最后一个引用（即onclick="myFunction('.$index++.')"）使用post-increment operator来增加 while 循环的下一次迭代的索引。

$index = 1;
while ($deneme=mysql_fetch_assoc($test)) {
    extract($deneme);
        echo '<br>';
        echo '<h6 id="lat'.$index.'" class="box-design">'.$deneme['lat'].'</h6>';
        echo '<h6 id="lng'.$index.'" class="box-design">'.$deneme['lng'].'</h6>';
        echo '<br>';
        echo '<input id="submit" onclick="myFunction('.$index++.')" type="submit" class="btn btn-primary" value="Button">';
        echo '</div>';
      }

然后由于javascript函数 myFunction （）现在将传递一个整数，该参数（例如命名为 index ）可用于查找关联的纬度和逻辑值（或者那些可以在函数调用中用作参数）。

因此更新函数定义以包含该参数：

function myFunction() {

变为：

function myFunction(index) {

然后这一行：

 destLatLng = new google.maps.LatLng(document.getElementById('lat').textContent, document.getElementById('lng').textContent);

可以更新为使用该索引：

destLatLng = new google.maps.LatLng(document.getElementById('lat' + index).textContent, document.getElementById('lng' + index).textContent);

此外，要重新使用相同的路线服务和路线渲染器，请在javascript的开头声明它们，然后在初始化地图的函数中初始化它们（例如 initMap（））：

var map, pointA, directionsService, directionsDisplay;
function initMap() {
    var options = {};
    /*
    code to setup options
    */
    map = new google.maps.Map(document.getElementById('map-canvas'), options);
    directionsService = new google.maps.DirectionsService;
    directionsDisplay = new google.maps.DirectionsRenderer({ /* ... */});
}

这样， myFunction（）中的代码可以在适当的时候 directionsService.route（）和 directionsDisplay.setDirections（）。

将所有这些放在一起，我们在this phpfiddle中展示了类似的东西。

¹ <子> https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

谷歌地图API从DOM元素获取lat和long值

的index.php：

JS：

1 个答案: