Question

好的iv现在已经挣扎了将近一个星期了，无论我怎样尝试我似乎无法让这个工作。

我已成功设法运行一个计时器（setInterval）来从mysql表中检索值，这个文件是调用apijson.php并将它们返回给字符串并且没问题。（转到输出div）

我遇到了将它集成到谷歌地图api中的问题，以便将标记移动并平移到刚刚检索到的协调。

我希望我能在实现的目标中有所作为。

<html>
  <head>
  <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
    </style>
    <script language="javascript" type="text/javascript" src="jquery.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
function initialize() {
  var myLatlng = new google.maps.LatLng(55.953429,-3.188095);
  var mapOptions = {
    zoom: 11,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Marker'
  });

  moveBus( map, marker );
}

function moveBus( map, marker ) {

    marker.setPosition( new google.maps.LatLng( 0, 0 ) );
    map.panTo( new google.maps.LatLng( 0, 0 ) );

};

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
  <div id="map-canvas"></div>
  <div id="output"></div>

  <script id="source" language="javascript" type="text/javascript">
  setInterval(function() 
  {

    $.ajax({                                      
      url: 'apijson.php',                  //the script to call to get data          
      data: "Driver=<?php echo $_GET['Driver']; ?>",                        //you can insert url argumnets here to pass to api.php for example "id=5&parent=6"
      dataType: 'json',                //data format      
      success: function(data)          //on recieve of reply
      {
        var xx = data[7];              //latitude
        var xy = data[8];           //longtude
        var drv = data[2];           //driver
        var clsn = data[1];           //id
        marker.setPosition( new google.maps.LatLng( data[7], data[8] ) );
    map.panTo( new google.maps.LatLng( data[7], data[8] ) );

        $('#output').html("<b>Lat : </b>"+xx+"<b> Long : </b>"+xy+"<b> Driver : </b>"+drv+" ("+clsn+")");     //Set output element html

      } 
    }, 5000);

  }); 


  </script>

  </body>
</html>

Answer 1

您在功能marker中设置了本地变量，即initialize，您尝试在ajax success事件中访问该变量。如果它是全球性的，比如window.myTestMarker = /* .... */;，然后您可以在window.myTestMarker事件中使用success访问它，那么您应该更接近您想要的结果。

jquery移动地图标记mysql

1 个答案: