Question

我想知道如何将我的php代码中的变量添加到javascript代码中。

例如，我的查询结果是vertreklat，vertreklong，aankomstlat，aankomstlong

我的javascript代码：

echo "<script src='http://maps.googleapis.com/maps/api/js?sensor=false'></script>
<script>
/* ***** Start CustomMarker ***** */
function CustomMarker(latlng, map, marker_id, hovercard) {
  this.latlng_ = latlng;
  this.marker_id = marker_id;
  this.hovercard_content = hovercard;
  this.setMap(map);
}

CustomMarker.prototype = new google.maps.OverlayView();

CustomMarker.prototype.draw = function() {
  var me = this;
  var div = this.div_;
  if (!div) {
    div = this.div_ = document.createElement('DIV'); 
        div.id=me.marker_id;
    var panes = this.getPanes();
    panes.overlayImage.appendChild(div);
  }
  var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);
  if (point) {
      div.className = 'map-marker show-hovercard';
      div.style.left = (point.x-6) + 'px';
      div.style.top = (point.y-23) + 'px';
      $(div).attr('data-hovercard-content', me.hovercard_content);

  }
};

CustomMarker.prototype.remove = function() {
  if (this.div_) {
    this.div_.parentNode.removeChild(this.div_);
    this.div_ = null;
  }
};

CustomMarker.prototype.getPosition = function() {
 return this.latlng_;
};
/* ***** End CustomMarker ***** */

function initialize() {
  var markers = [];
  var bounds = new google.maps.LatLngBounds();
  var myOptions = {
    center: new google.maps.LatLng(20, 20), 
    zoom: 2,
    mapTypeId: google.maps.MapTypeId.TERRAIN,
    panControl: false,
    streetViewControl: false,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.SMALL
    }
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
        pos = new google.maps.LatLng(vertreklat, vertreklong);
    overlay = new CustomMarker(pos, map, 'marker_KMSP', 'some name');
    overlay.setMap(map);
        bounds.extend(pos);
            pos = new google.maps.LatLng(aankomstlat, aankomstlong);
    overlay = new CustomMarker(pos, map, 'marker_RJAA', 'some name');
    overlay.setMap(map);
        bounds.extend(pos);

      var flightPath = new google.maps.Polyline({path: [new   
google.maps.LatLng(vertreklat, vertreklong),new google.maps.LatLng(aankomstlat,   
aankomstlong)], strokeColor: '#ffffff', strokeOpacity: 0.7, strokeWeight: 2, geodesic: 
true });
      flightPath.setMap(map);



  map.fitBounds(bounds);google.maps.event.addListener(map, 'zoom_changed', 
function() {
      if(map.getZoom()<2) {
        map.setZoom(2); 
        }
    });
}
$(document).ready(function() {
    initialize();
});
</script>";

需要来自我的查询的所有数据都在脚本的这一部分内：

var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
        pos = new google.maps.LatLng(**vertreklat, vertreklong**);
    overlay = new CustomMarker(pos, map, 'marker_KMSP', 'some name');
    overlay.setMap(map);
        bounds.extend(pos);
            pos = new google.maps.LatLng(**aankomstlat, aankomstlong**);
    overlay = new CustomMarker(pos, map, 'marker_RJAA', 'some name');
    overlay.setMap(map);
        bounds.extend(pos);

      var flightPath = new google.maps.Polyline({path: [new   
google.maps.LatLng(**vertreklat, vertreklong**),new google.maps.LatLng(**aankomstlat,   
aankomstlong**)], strokeColor: '#ffffff', strokeOpacity: 0.7, strokeWeight: 2, geodesic: 
true });
      flightPath.setMap(map);

但我对如何完成这项任务感到困惑....

Answer 1

试试这个：

var flightPath = new google.maps.Polyline({path: [new   
google.maps.LatLng(".$row['vertreklat'].",".$row['vertreklong']."),new google.maps.LatLng(".$row['aankomstlat'].",".$row['aankomstlong'].")], strokeColor: '#ffffff', strokeOpacity: 0.7, strokeWeight: 2, geodesic: 
true });

由于你使用双引号启动了echo，你可以再次使用它们来破坏字符串并与点.连接。顺便说一句，你的PHP变量应该没有$？

Answer 2

对于如此长的输出块，而不是echo返回带有?>的文字输出。然后在需要回显变量的地方插入<?php ... ?>的小块。

?>
<script src='http://maps.googleapis.com/maps/api/js?sensor=false'></script>
<script>
/* ***** Start CustomMarker ***** */
function CustomMarker(latlng, map, marker_id, hovercard) {
  this.latlng_ = latlng;
  this.marker_id = marker_id;
  this.hovercard_content = hovercard;
  this.setMap(map);
}

CustomMarker.prototype = new google.maps.OverlayView();

CustomMarker.prototype.draw = function() {
  var me = this;
  var div = this.div_;
  if (!div) {
    div = this.div_ = document.createElement('DIV'); 
        div.id=me.marker_id;
    var panes = this.getPanes();
    panes.overlayImage.appendChild(div);
  }
  var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);
  if (point) {
      div.className = 'map-marker show-hovercard';
      div.style.left = (point.x-6) + 'px';
      div.style.top = (point.y-23) + 'px';
      $(div).attr('data-hovercard-content', me.hovercard_content);

  }
};

CustomMarker.prototype.remove = function() {
  if (this.div_) {
    this.div_.parentNode.removeChild(this.div_);
    this.div_ = null;
  }
};

CustomMarker.prototype.getPosition = function() {
 return this.latlng_;
};
/* ***** End CustomMarker ***** */

function initialize() {
  var markers = [];
  var bounds = new google.maps.LatLngBounds();
  var myOptions = {
    center: new google.maps.LatLng(20, 20), 
    zoom: 2,
    mapTypeId: google.maps.MapTypeId.TERRAIN,
    panControl: false,
    streetViewControl: false,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.SMALL
    }
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
        pos = new google.maps.LatLng(<?php echo $vertreklat ?>, <?php echo $vertreklong ?>);
    overlay = new CustomMarker(pos, map, 'marker_KMSP', 'some name');
    overlay.setMap(map);
        bounds.extend(pos);
            pos = new google.maps.LatLng(<?php echo $aankomstlat ?>, <?php echo $aankomstlong ?>);
    overlay = new CustomMarker(pos, map, 'marker_RJAA', 'some name');
    overlay.setMap(map);
        bounds.extend(pos);

      var flightPath = new google.maps.Polyline({path: [new   
google.maps.LatLng(vertreklat, vertreklong),new google.maps.LatLng(<?php echo $aankomstlat ?>, <?php echo $aankomstlong ?>)], strokeColor: '#ffffff', strokeOpacity: 0.7, strokeWeight: 2, geodesic: 
true });
      flightPath.setMap(map);



  map.fitBounds(bounds);google.maps.event.addListener(map, 'zoom_changed', 
function() {
      if(map.getZoom()<2) {
        map.setZoom(2); 
        }
    });
}
$(document).ready(function() {
    initialize();
});
</script>

Answer 3

您可以使用短回声开放标记：

<script>
var foo = <?=$foo?>;
console.log(foo);
</script>

或使用AJAX

将php变量合并到javascript中

3 个答案: