谷歌地图为流星

时间:2016-12-21 06:26:33

标签: javascript google-maps reactjs meteor flow-router

我安装" meteor add dburles:google-maps"在流星。我将此代码添加到React组件,

...
import { GoogleMaps } from 'meteor/dburles:google-maps';
...
export default class Location extends TrackerReact(React.Component){
constructor(props) {
    super(props);
    this.state = {
        ...
    };
    GoogleMaps.load();
}
componentDidUpdate(){
    GoogleMaps.create({
      name: 'exampleMap',
      element: document.getElementById('basic_map'),
      options: {
        center: new google.maps.LatLng(-37.8136, 144.9631),
        zoom: 8
      }
    });
}
render() {
    ...
    return (
        ...
                    <div id="basic_map" style={{"width":"300px","height":"300px"}}></div>
        ...
    )
}

这里的问题是错误&#34; google未定义&#34;。我认为这是来自这行代码,

google.maps.LatLng(-37.8136, 144.9631),

我在安装中遗漏了什么吗?我怎样才能解决这个问题? 我正在使用Meteor,ReactJs,Flow路由器和TrackerReact

1 个答案:

答案 0 :(得分:2)

那是因为Google还没有加载。确保在点击创建之前检查//Enqueue Ajax Scripts function enqueue_cart_qty_ajax() { wp_register_script( 'cart-qty-ajax-js', get_template_directory_uri() . '/js/cart-qty-ajax.js', array( 'jquery' ), '', true ); wp_localize_script( 'cart-qty-ajax-js', 'cart_qty_ajax', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) ); wp_enqueue_script( 'cart-qty-ajax-js' ); } add_action('wp_enqueue_scripts', 'enqueue_cart_qty_ajax'); function ajax_qty_cart() { // Set item key as the hash found in input.qty's name $cart_item_key = $_POST['hash']; // Get the array of values owned by the product we're updating $threeball_product_values = WC()->cart->get_cart_item( $cart_item_key ); // Get the quantity of the item in the cart $threeball_product_quantity = apply_filters( 'woocommerce_stock_amount_cart_item', apply_filters( 'woocommerce_stock_amount', preg_replace( "/[^0-9\.]/", '', filter_var($_POST['quantity'], FILTER_SANITIZE_NUMBER_INT)) ), $cart_item_key ); // Update cart validation $passed_validation = apply_filters( 'woocommerce_update_cart_validation', true, $cart_item_key, $threeball_product_values, $threeball_product_quantity ); // Update the quantity of the item in the cart if ( $passed_validation ) { WC()->cart->set_quantity( $cart_item_key, $threeball_product_quantity, true ); } // Refresh the page echo do_shortcode( '[woocommerce_cart]' ); die(); } add_action('wp_ajax_qty_cart', 'ajax_qty_cart'); add_action('wp_ajax_nopriv_qty_cart', 'ajax_qty_cart');

作者David Burles写了一篇很好的example using the library with react,应该会有所帮助。它使用createContainer而不是TrackerReact,但应该让你走上正确的轨道。