我需要在JavaScript文件中使用PHP，因为Wordpress，我该怎么做或者是一个更好的选择

Question

I am using a Google Map Plugin, This One to be exact.

Anyways that google map plugin gives me the options to change some settings like custom markers and a lot of other useful things. So I changed the main marker with my own image and it works great on my static HTML site but in Wordpress it does not and this is why.

So lets say I load the plugin in as so:

  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
  <script type="text/javascript" src="js/gmaps.js"></script>

now I have some options I can change in my footer or in WORDPRESS through my themes_js and load that in my functions.php and here they are:

var map = new GMaps({
    div: '#map',
    lat: 94.09454,
    lng: -219.35574
});

map.drawOverlay({
    lat: 94.09454,
    lng: -219.35574,
    content: '<div class="map-logo"><img src="images/logo.png" alt=""></div>'
});

Now the problem is in content when I try to change my image Wordpress will not get the image if it's just src="images/logo.png" it would have to be src="<?php bloginfo('template_directory'); ?>/images/logo.png" and the thing is the themes.js file I call all my javascript in wont read PHP and I need to use <?php bloginfo('template_directory'); ?>.

So how can I go about showing my image because the only way I can customize it is through the parameters they have provided through javascript and I can't just use HTML to call my custom marker image called logo.

Im sure im not the only one that has ran into a problem like so. Anyone have an idea??

UPDATE

So I have tried the wp_localize_script method and 2 things happen.

1. I dont see my image not as in a broken link but cannot see it at all
2. my entire URL displays in the header for some reason

Here is my functions.php where I called the wp_localize_script:

/**
 * Enqueue scripts and styles.
 */
function loading() {

    global $wp_scripts;

    wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap.css' );

    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

    wp_enqueue_style( 'owlcarousel_css', get_template_directory_uri() . '/owl-carousel/owl.carousel.css' );

    wp_enqueue_style( 'owltheme_css', get_template_directory_uri() . '/owl-carousel/owl.theme.css' );

    wp_enqueue_style( 'animate_css', get_template_directory_uri() . '/css/animate.css' );

    wp_enqueue_style( 'google_fonts', 'http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' );

    wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/js/bootstrap.js', array('jquery'), '', true );

    wp_enqueue_script( 'owl_js', get_template_directory_uri() . '/owl-carousel/owl.carousel.js', array('jquery'), '', true );

    wp_enqueue_script( 'theme_js', get_template_directory_uri() . '/js/theme.js', array('jquery', 'bootstrap_js'), '', true );

    wp_enqueue_script( 'viewport_js', get_template_directory_uri() . '/js/jquery.viewportchecker.js', array('jquery'), '', true );



    wp_enqueue_script( 'maps_js', get_template_directory_uri() . '/js/gmaps.js', array('jquery'), '', true );

    wp_enqueue_script('maps_custom', get_stylesheet_directory_uri() . '/js/maps-custom.js');

    wp_localize_script('maps_custom', 'mapsCustom', array(

    'templateUrl' => bloginfo('template_directory'),));



    wp_register_script ('html5_shiv', 'https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js', '', '', false );

    wp_register_script ('respond_js', 'https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js', '', '', false );

    $wp_scripts->add_data( 'html5_shiv', 'conditional', 'lt IE 9' );

    $wp_scripts->add_data( 'respond_js', 'conditional', 'lt IE 9' );

}
add_action( 'wp_enqueue_scripts', 'loading' );

and here is the maps_js that I call my map on:

jQuery(document).ready(function( $ ) {

    var href = mapsCustom.templateUrl + '/images/logo.png';

    var map = new GMaps({
    div: '#map',
    lat: 22.22222,
    lng: -22.22222
});

map.drawOverlay({
    lat: 22.22222,
    lng: -22.22222,
    content: $href

      }); 
});

Answer 1

Use wp_localize_script() to pass any kind of data to your loaded scripts, in this case we need bloginfo('template_directory'):

wp_enqueue_script('my-script', get_stylesheet_directory_uri() . '/js/my-script.js');
wp_localize_script('my-script', 'myScript', array(
'templateUrl' => bloginfo('template_directory'),));

Now you will have access to myScript.pluginsUrl in your script file:

var href = myScript.templateUrl + '/path/to/resource';

Generally, you can not use PHP in your JS file.So for that wordpress provide wp_localize_script().With the help of that you can localize your path and then pass that localize to the JS file.So basically it will work.

Above I have given example how can you achieve.Modify it according to your need.

Hope this will solve your problem.