0

我正在尝试在 wordpress 插件（帖子上的 metabox）上实现这个示例http://jsfiddle.net/gzF6w/1/（来自另一个问题，这里是 stak）。

由于某种原因，该框未按应有的方式显示地图。

到目前为止，这是我的代码

// Put the script on the head after jQuery is loaded        
function map_script_one($hook) {
        wp_deregister_script('googlemapsapi3');
        wp_enqueue_script('googlemapsapi3', 'http://maps.google.com/maps/api/js?sensor=false', false, '3', false);
        wp_enqueue_script( 'gmap3', get_site_url().'/wp-content/plugins/maps/gmap3-3.4-min.js', array('jquery'));
        wp_enqueue_script( 'autocomplete', get_site_url().'/wp-content/plugins/maps/jquery-autocomplete.min.js', array('jquery'));
    }
        
add_action( 'admin_enqueue_scripts', 'map_script_one' );


// Include some css and jQuery script for the maps
function map_script_two() { ?>
    <link rel="stylesheet" type="text/css" href="'.get_site_url().'/wp-content/plugins/maps/jquery-autocomplete.css"/>
        <style>
          .gmap3{
            margin: 20px auto;
            border: 1px dashed #C0C0C0;
            width: 1000px;
            height: 500px;
          }
          .ui-menu .ui-menu-item{
            text-align: left;  
            font-weight: normal;
          }
          .ui-menu .ui-menu-item a.ui-state-hover{
            border: 1px solid red; 
            background: #FFBFBF; 
            color: black;
            font-weight:bold;
          }
        </style>
    
        <script type="text/javascript">
          jQuery(function(){
              
              jQuery('#test').gmap3();
    
              jQuery('#address').autocomplete({
                source: function() {
                  jQuery("#test").gmap3({
                    action:'getAddress',
                    address: jQuery(this).val(),
                    callback:function(results){
                      if (!results) return;
                      jQuery('#address').autocomplete(
                        'display', 
                        results,
                        false
                      );
                    }
                  });
                },
                cb:{
                  cast: function(item){
                    return item.formatted_address;
                  },
                  select: function(item) {
                    jQuery("#test").gmap3(
                      {action:'clear', name:'marker'},
                      {action:'addMarker',
                        latLng:item.geometry.location,
                        map:{center:true}
                      }
                    );
                  }
                }
              })
              .focus();
              
          });
        </script><?php 
    }
add_action( 'admin_head', 'map_script_two' );

// Create the box    
function set_map_box() {
    add_meta_box('addressmap', 'Address Map', 'address_map', 'post', 'normal', 'default');
    }
add_action('admin_init','set_map_box');


// Content of the box
function address_map() {
        global $post; ?>
        <input type="text" id="address" size="60">
    <div id="test" class="gmap3"></div>
<?php } // more code after.

到目前为止，我试图在脚本上将“$”更改为 jQuery，从 wordpress 中注销原始 jquery 并使用另一个版本，禁用所有插件并删除此自定义插件上不必要的代码，但到目前为止似乎没有任何效果:(

知道可能是什么问题吗？

基本上，该示例所做的是显示一个框，用户可以在其中输入地址，并且地图会更新为该地址。

4

1 回答 1

1

您可能正在尝试在#test创建 div 之前绘制地图。尝试使用

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

在您的map_script_two()函数中延迟地图的绘制，直到整个文档加载完毕。

您还可以在您的div之后将该 jQuery 包含在您的address_map()函数中。#test

于 2012-06-18T12:40:00.313 回答