0

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);

しかし、私はこのタスクを達成する方法について混乱しています....

4

3 に答える 3

0

短いエコー オープン タグを使用できます。

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

またはAJAXを使用する

于 2013-09-09T07:33:34.407 に答える
0

これを試して：

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 wqith 二重引用符を開始したので、それらを再度使用して文字列を分割し、ドットで連結できます.。ところで、PHP 変数には$?

于 2013-09-08T22:11:44.937 に答える
0

このような長い出力ブロックの場合は、 を使用し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>
于 2013-09-08T22:45:33.037 に答える