1

我正在尝试遵循此处所说的内容，但进行了一些编辑。我似乎无法弄清楚我做错了什么。什么都没有显示。自定义字段显然也被填充了。

的JavaScript：

function initialize() {
    lat = 0;
    long = 0;
    if (typeof my-coordinates !== 'undefined' && my-coordinates.lat && my-coordinates.long) {
        lat = my-coordinates.lat;
        long = my-coordinates.long;
    }
    var mapProp = {
      center: new google.maps.LatLng(lat, long),
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.ROADMAP
      };
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
}

的HTML：

    <script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script type="text/javascript" src="../map.js"></script>
</div>
    <div class="googlemap">
    <body onload="initialize()">
    <div id="map" style="width: 350px; height: 310px;"></div>
    </div>

功能：

function register_plugin_scripts() {
    global $post;
    $woo_maps_lat = get_post_meta($post->ID, 'woo_maps_lat', true);
    $woo_maps_long = get_post_meta($post->ID, 'woo_maps_long', true);

    if( !empty($woo_maps_lat) && !empty($woo_maps_long) ) {
        wp_localize_script('my-coordinates-script', 'my-coordinates', array(
        'lat' => $woo_maps_lat,
        'long' => $woo_maps_long
        ));
    }
} // end register_plugin_scripts
add_action( 'wp_enqueue_scripts', 'register_plugin_scripts' );

编辑：我仍然无法弄清楚这一点。这是我到目前为止所得到的。

function register_plugin_scripts() {
    global $post;
    $woo_maps_lat = get_post_meta($post->ID, 'woo_maps_lat', true);
    $woo_maps_long = get_post_meta($post->ID, 'woo_maps_long', true);

    if( !empty($woo_maps_lat) && !empty($woo_maps_long) ) {
        wp_enqueue_script('my_coordinates_script', get_template_directory_uri() . 'http://michaeltieso.com/map/wp-content/plugins/medellin-living-map/map.js');
        wp_localize_script('my_coordinates_script', 'my_coordinates', array(
            'lat' => $woo_maps_lat,
            'long' => $woo_maps_long
        ));
    }
}
add_action( 'wp_enqueue_scripts', 'register_plugin_scripts' );

对于 JS

function initialize() {
    lat = 0;
    long = 0;
    if (typeof my_coordinates !== 'undefined' && my_coordinates.lat && my_coordinates.long) {
        lat = my_coordinates.lat;
        long = my_coordinates.long;
    }
    var mapProp = {
      center: new google.maps.LatLng(lat, long),
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.ROADMAP
      };
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
}

您可以在此处查看示例：http: //michaeltieso.com/map/hello-world/

4

2 回答 2

1

例如，将您的initialize函数放在一个javascript文件中，my-script.js然后将此文件放在您的主题文件夹中，例如，themes/yourthemefolder/js/my-script.js然后在您的functions.php

function register_plugin_scripts() {
    global $post;
    $woo_maps_lat = get_post_meta($post->ID, 'woo_maps_lat', true);
    $woo_maps_long = get_post_meta($post->ID, 'woo_maps_long', true);

    if( $woo_maps_lat && $woo_maps_long ) {
        wp_enqueue_script('my-coordinates-script', get_template_directory_uri() . '/js/my-script.js');
        wp_localize_script('my-coordinates-script', 'my_coordinates', array(
            'lat' => $woo_maps_lat,
            'long' => $woo_maps_long
        ));
    }
}
add_action( 'wp_enqueue_scripts', 'register_plugin_scripts' );

重要提示：变量名my-coordinates应该是my_coordinates，破折号（-）不允许在JavaScript变量名中，检查这个小提琴。

重要提示！：wp_localize_script() 必须在它附加到的脚本已入队或注册后调用。它不会将本地化脚本放入队列中以供以后的脚本使用。

阅读更多关于 Codex的信息。

于 2013-06-06T00:45:30.737 回答
1

如果您查看浏览器控制台（通常是 f12），您会看到一些问题：

Failed to load resource: the server responded with a status of 404 (Not Found)
  http://michaeltieso.com/map/wp-content/themes/genesishttp:/michaeltieso.com/map/wp-content/plugins/medellin-living-map/map.js?ver=3.5.1
Uncaught TypeError: Cannot read property 'offsetWidth' of null

我不确定 main.js 是怎么回事，因为它被缩小了，但http://michaeltieso.com/map/wp-content/themes/genesishttp:/michaeltieso.com/map/wp-content/plugins/medellin-living-map/map.js?ver=3.5.1显然有一个问题：看起来你的 head 元素中有错字。

<script type="text/javascript" src="http://michaeltieso.com/map/wp-content/themes/genesishttp://michaeltieso.com/map/wp-content/plugins/medellin-living-map/map.js?ver=3.5.1"></script>

应该是

<script type="text/javascript" src="http://michaeltieso.com/map/wp-content/plugins/medellin-living-map/map.js?ver=3.5.1"></script>

所以浏览器找不到要执行的javascript。即便如此，main.js 中的另一个错误可能足以停止 JS 执行，但一定要先修复地图脚本。

编辑：

好吧，我想我可能知道还有什么问题。您正在使用此调用初始化地图：

var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

但 getElementById 不会返回任何内容，因为文档中没有 ID 为 googleMap 的元素。您可能打算针对此代码：

<div class="googlemap">
  <div id="map" style="width: 350px; height: 310px;"></div>
</div>

这将需要这个调用：

var map = new google.maps.Map(document.getElementById("map"), mapProp);

所以尝试一下，但要注意一点——使用像“map”这样的 id 是自找麻烦，因为它太通用了。很容易忘记你曾经使用过它并在页面中再次使用它，并且 id 应该是唯一的。您可能想使用一些更具体的东西。

于 2013-06-15T00:16:40.110 回答