Question

我正在尝试按照here所说的内容进行操作，但需要进行一些编辑。我似乎无法弄清楚我做错了什么。什么都没有显示出来。自定义字段也明显填充。

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/

Answer 1

将initialize功能放在javascript文件中，例如my-script.js，然后将此文件放入主题文件夹，例如themes/yourthemefolder/js/my-script.js，然后放入functions.php 1}}

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变量名称check this fiddle中不允许使用短划线（ - ）。

重要！：wp_localize_script（）必须在脚本之后调用被附加的人已经入队或登记。它没有把队列中的本地化脚本，用于以后的脚本。

编辑：

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

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

所以尝试一下，但是一句警告 - 使用像“地图”这样的id就是在寻找麻烦，因为它是如此通用。忘记你曾经使用它并在页面中再次使用它是非常容易的，而且id应该是唯一的。您可能希望使用更具体的内容。

如何从WordPress自定义字段获取坐标以嵌入谷歌地图？

2 个答案:

编辑：