0

この例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 に変更し、元の jquery を wordpress から登録解除して別のバージョンを使用し、すべてのプラグインを無効にして、このカスタム プラグインの不要なコードを削除しようとしましたが、これまでのところ何も機能していないようです :(

何が問題になる可能性がありますか？

基本的にこの例では、ユーザーが住所を入力できるボックスを表示すると、地図がその住所に更新されます。

4

1 に答える 1

1

#testdiv が作成される前にマップを描画しようとしている可能性があります。使ってみて

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

関数内で、map_script_two()ドキュメント全体が読み込まれるまでマップの描画を遅らせます。

divのaddress_map()後の関数にその jQuery を含めることもできます。#test

于 2012-06-18T12:40:00.313 に答える