我为我的网站创建了一个简单的主题选项页面。选项页面包含三个输入字段。我可以使用get\\u选项输出字段。
使用以下命令调用这三个字段：
<?php echo get_option( \'map_zoom\' ); ?>
<?php echo get_option( \'map_longitude\' ); ?>
<?php echo get_option( \'map_latitude\' ); ?>
这些变量用于控制地图的缩放级别、经度和纬度。我有一个javascript文件，它使用google maps api呈现地图。我想把这些变量放到javascript文件中。当我将javascript放入php文件并添加这些变量时，map会呈现，但我丢失了所有剩余的map函数，这些函数非常重要。此外，我还必须在标头中调用脚本php，而不是在函数文件中使用wp\\u enqueue\\u脚本。
以下是地图javascript：
var infowindow = new google.maps.InfoWindow();
var shadow = new google.maps.MarkerImage(\'/wp-content/themes/re-aligned/images/shadow.png\', new google.maps.Size(37, 34) );
var markers = [];
var categories = [
{
name: \'People\',
slug: \'people\',
url: \'marker-people.png\'
}, {
name: \'Works\',
slug: \'works\',
url: \'marker-works.png\'
}, {
name: \'Discourse\',
slug: \'discourse\',
url: \'marker-discourse.png\'
}, {
name: \'Other\',
slug: \'other\',
url: \'marker.png\'
}
];
String.prototype.endsWith = function(suffix) {
return this.indexOf(suffix, this.length - suffix.length) !== -1;
};
function initialize() {
jQuery(\'body\').append(jQuery(\'<div id="toolbar"><h2>Map Categories</h2></div>\'));
// add checkboxes to toolbar
for (var i = 0; i < categories.length; i++) {
jQuery(\'#toolbar\').append(
jQuery(\'<input />\', {
type: \'checkbox\',
id: \'tog-marker-\'+categories[i].slug,
name: \'tog-marker-\'+categories[i].slug,
class: \'squaredTwo\',
value: i,
checked: true
})
);
jQuery(\'#toolbar\').append(
categories[i].name
);
}
jQuery(\'#toolbar > input[type=checkbox]\').click(function() {
for(var i = 0; i < markers.length; i++) {
if(markers[i].icon.url.endsWith(categories[jQuery(this).val()].url)) {
if(jQuery(this).is(\':checked\')) markers[i].setVisible(true);
else markers[i].setVisible(false);
}
}
});
// Create an array of styles.
var styles = [
{
"featureType": "landscape.natural",
"stylers": [
{ "color": "#ff412d" },
{ "visibility": "on" }
]
},{
"featureType": "administrative.land_parcel",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "administrative.neighborhood",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "administrative.province",
"stylers": [
{ "visibility": "simplified" }
]
},{
"featureType": "administrative.country",
"stylers": [
{ "visibility": "on" }
]
},{
"featureType": "water",
"stylers": [
{ "color": "#ffebc5" }
]
},{
"featureType": "road",
"stylers": [
{ "visibility": "simplified" },
{ "color": "#ffebc5" }
]
},{
"featureType": "poi",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "road.highway",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "administrative.locality",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "administrative.country",
"elementType": "geometry",
"stylers": [
{ "visibility": "off" }
]
}
];
// Create a new StyledMapType object, passing it the array of styles,
// as well as the name to be displayed on the map type control.
var styledMap = new google.maps.StyledMapType(styles,
{name: "Styled Map"});
// Create a map object, and include the MapTypeId to add
// to the map type control.
var mapOptions = {
zoom: <?php echo get_option( \'map_zoom\' ); ?>,
scrollwheel: true,
center: new google.maps.LatLng(<?php echo get_option( \'map_latitude\' ); ?>, <?php echo get_option( \'map_longitude\' ); ?>),
mapTypeIds: [google.maps.MapTypeId.ROADMAP, \'map_style\'],
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM_CENTER
},
panControl: false,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_CENTER
},
scaleControl: false,
scaleControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
},
streetViewControl: false,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
}
};
var map = new google.maps.Map(document.getElementById(\'map\'), mapOptions);
var oms = new OverlappingMarkerSpiderfier(map);
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set(\'map_style\', styledMap);
map.setMapTypeId(\'map_style\');
oms.addListener(\'click\', function(marker, event) {
infowindow.setContent(marker.desc);
infowindow.open(map, marker);
});
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: locations[i].latlng,
desc: locations[i].info,
icon: locations[i].marker,
shadow: shadow,
map: map
});
oms.addMarker(marker);
markers.push(marker);
}
}
如何将变量正确输出到javascript文件中？
UPDATE:
在了解了有关wp\\u localize\\u脚本的信息后，我做了以下工作：
我已经把这个放在我的函数中了。php
wp_enqueue_script( \'map-script\' );
$object = array(
\'zoom\' => get_option(\'map_zoom\'),
\'longitude\' => get_option(\'map_longitude\'),
\'latitude\' => get_option(\'map_latitude\'),
);
wp_localize_script(\'map-script\', \'JSObject\', $object);
}
并使用JSObject。my map javascript中的变量如下：
var mapOptions = {
zoom: JSObject.zoom,
scrollwheel: true,
center: new google.maps.LatLng(JSObject.latitude, JSObject.longitude),
mapTypeIds: [google.maps.MapTypeId.ROADMAP, \'map_style\'],
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM_CENTER
}
但这会返回错误：
Uncaught Error: Invalid value for property <zoom>: 9 9是实际的缩放变量，因此它似乎在某种程度上起作用。。。
