私は自分のphpウェブサイトで動作するウェブサイトAPIのグーグルマップを取得しようとしています。そのために、マップのユーザー変数をロードするphpページがあります。javascriptはデフォルト値のWebページで正常に機能しますが、$php変数をスクリプトにロードできません。
たぶんJavaScriptの専門家が手を差し伸べることができます
function onProfileDisplay() {
$user = CFactory::getRequestUser();
$document =& JFactory::getDocument();
$document->addStyleSheet($css);
$my = CFactory::getUser();
$pluginParams = $this->params;
$param = new stdClass;
$param = $Lat = $pluginParams->get('Lat');
$param = $Lng = $pluginParams->get('Lng');
$param = $width = $pluginParams->get('width');
$param = $height = $pluginParams->get('height');
$param = $zoom = $pluginParams->get('zoom');
return '<body onload="onprofileDisplay()"> <div id="map_canvas" style="width:800px; height:500px"></div>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function onProfileDisplay() {
var latlng = new google.maps.LatLng(57.0442, 9.9116);
**var zoom = <?php echo ($zoom) ?>;**
var settings = {
**zoom: zoom,**
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
var companyPos = new google.maps.LatLng(57.0442, 9.9116);
var companyMarker = new google.maps.Marker({
position: companyPos,
map: map,
title:"Some title"
});
}
</script>
';
}
テストするには、php変数$zoomをjavascriptにロードしようとしているだけですが、javascript内では機能しません。
var zoom = <?php echo ($zoom) ?>;
zoom: zoom,
しかし、javascriptをoriginalに変更すると機能しません。removevar Zoom =; ズーム:15、それから動作しますが、静的なデフォルト値で
感謝します。
これは出力コードです:
<script type="text/javascript">
function onProfileDisplay() {
var latlng = new google.maps.LatLng(57.0442, 9.9116);
var zoom = ".$zoom.";
var settings = {
".$zoom.":".$zoom.",
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
var companyPos = new google.maps.LatLng(57.0442, 9.9116);
var companyMarker = new google.maps.Marker({
position: companyPos,
map: map,
});
}
</script>
元のコードは次のようになります。
public function onProfileDisplay() {
$user = CFactory::getRequestUser();
$document =& JFactory::getDocument();
$document->addStyleSheet($css);
$my = CFactory::getUser();
$pluginParams = $this->params;
$param = new stdClass;
$param = $api_key = $pluginParams->get('api_key');
$param = $Lat = $pluginParams->get('Lat');
$param = $Lng = $pluginParams->get('Lng');
$param = $width = $pluginParams->get('width');
$param = $height = $pluginParams->get('height');
$param = $zoom = $pluginParams->get('zoom');
return '<body onload="onProfileDisplay()">
<div id="map_canvas" style="width:800px; height:500px"></div
</body>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function onProfileDisplay() {
var latlng = new google.maps.LatLng(57.0442, 9.9116);
var zoom = ".$zoom.";
var settings = {
".$zoom.":".$zoom.",
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
var companyPos = new google.maps.LatLng(57.0442, 9.9116);
var companyMarker = new google.maps.Marker({
position: companyPos,
map: map,
});
}
</script>';
}
}
?>