如何显示流星/ autoform的反应地图，并获得标记全地址

Question

所以我一直在努力一个星期，使这种情况发生！

总之，我的结构如下：

Address = new SimpleSchema({ 
    location: { 
     type: Object 
    }, 
    fullAddress: { 
     type: String 
    }, 
    country: { 
     type: String 
    }, 
    governorate: { 
     type: String 
    }, 
    city: { 
     type: String 
    }, 
    street: { 
     type: String 
    }, 
    building: { 
     type: Number 
    } 
}); 

Branch = new SimpleSchema({ 
    address: { 
     type: Address 
    }, 
    .... 
}); 

Companies = new Mongo.Collection('companies'); 
CompanySchema = new SimpleSchema({ 
    branch: { 
     type: [Branch], 
     minCount: 1 
    }, 
    .... 
}); 
Companies.attachSchema(CompanySchema); 

正如你所看到的，我有分支机构的数组，所有分支都有一个地址&位置。

我希望能够调用自动窗体就像当要为每个[科]地图/地址：

{{> quickForm collection="Companies" type="insert" id="company_form"}} 

然后，有一些地图点击收听放置一个标记，然后反向geoDecode位置填写以下yogiben地址字段

我曾尝试：自动窗体地图，但是包是不完整的（已MyLocation按钮的问题放大异常，并不能显示每页多张地图），因此，不能在生产中使用。

我完全不同...请帮忙！

Answer 1

因此，我创建了我自己的解决方案，我将分享它以使任何具有相同问题的人受益。

我修改了yogiben/meteor-autoform-map并添加了pull request加入geo编码功能以及许多其他的东西。

以下是我目前的自动窗体配置&处理： -

模式

Location = new SimpleSchema({ 
    location: { 
     type: Object, 
     autoform:{ 
      type: 'map', 
      label: false, 
      afFieldInput: { 
       mapType: 'terrain', 
       defaultLat: 30.0444196, 
       defaultLng: 31.23571160000006, 
       geolocation: true, 
       autolocate: true, 
       searchBox: true, 
       language: function(){ return getUserLanguage(); }, 
       direction: function(){ return (getUserLanguage() == 'ar')? 'rtl' : 'ltr'; }, 
       zoom: 16, 
       key: Meteor.settings.public.google_maps_key, 
       googleMap: { 
        mapTypeControl: false 
       }, 
       geoCoding: true, 
       geoCodingCallBack: 'reverseGeoCode', 
       animateMarker: true 
      } 
     } 
    }, 
    placeId: { 
     type: String, 
     autoform: { 
      type: 'hidden' 
     }, 
     autoValue: function(){ 
      return ''; 
     } 
    }, 
    createdAt: { 
     type: Date, 
     autoValue: function(){ 
      return new Date(); 
     }, 
     autoform: { 
      type: 'hidden' 
     } 
    } 
}); 

Address = new SimpleSchema({ 
    location: { 
     type: Location, 
     label: function(){ 
      return (Session.get('lang') == 'ar')? 'الموقع على الخريطة' : 'Map Location'; 
     } 
    }, 
    country: { 
     type: String, 
     label: function(){ 
      return (Session.get('lang') == 'ar')? 'الدولة' : 'Country'; 
     }, 
     autoform: { 
      afFieldInput: { 
       placeholder: function(){ 
        return (Session.get('lang') == 'ar')? 'الدولة' : 'Country'; 
       } 
      }, 
      type: 'hidden' 
     } 
    }, 
    governorate: { 
     type: String, 
     label: function(){ 
      return (Session.get('lang') == 'ar')? 'المحافطة' : 'Governorate'; 
     }, 
     autoform: { 
      afFieldInput: { 
       placeholder: function(){ 
        return (Session.get('lang') == 'ar')? 'المحافظة' : 'Governorate'; 
       } 
      } 
     } 
    }, 
    city: { 
     type: String, 
     label: function(){ 
      return (Session.get('lang') == 'ar')? 'المدينة' : 'City'; 
     }, 
     autoform: { 
      afFieldInput: { 
       placeholder: function(){ 
        return (Session.get('lang') == 'ar')? 'المدينة' : 'City'; 
       } 
      } 
     } 
    }, 
    district: { 
     type: String, 
     label: function(){ 
      return (Session.get('lang') == 'ar')? 'الحي' : 'District'; 
     }, 
     autoform: { 
      afFieldInput: { 
       placeholder: function(){ 
        return (Session.get('lang') == 'ar')? 'الحي' : 'District'; 
       } 
      } 
     } 
    }, 
    street: { 
     type: String, 
     label: function(){ 
      return (Session.get('lang') == 'ar')? 'الشارع' : 'Street'; 
     }, 
     autoform: { 
      afFieldInput: { 
       placeholder: function(){ 
        return (Session.get('lang') == 'ar')? 'اسم \ رقم الشارع' : 'Street Name/Number'; 
       } 
      } 
     } 
    }, 
    building: { 
     type: String, 
     label: function(){ 
      return (Session.get('lang') == 'ar')? 'رقم المبنى' : 'Building Number'; 
     }, 
     regEx: /[\d+\-]/, 
     autoform: { 
      afFieldInput: { 
       placeholder: function(){ 
        return (Session.get('lang') == 'ar')? 'رقم المبنى' : 'Building Number'; 
       } 
      }, 
     } 
    }, 
    createdAt: { 
     type: Date, 
     autoValue: function(){ 
      return new Date(); 
     }, 
     autoform: { 
      type: 'hidden' 
     } 
    } 
}); 

Branch = new SimpleSchema({ 
    name: { 
     type: String, 
     label: function(){ 
      return (Session.get('lang') == 'ar')? 'اسم الفرع' : 'Branch Name'; 
     }, 
     autoform: { 
      afFieldInput: { 
       placeholder: function(){ 
        return (Session.get('lang') == 'ar')? 'اسم الفرع' : 'Branch Name'; 
       } 
      } 
     } 
    }, 
    address: { 
     type: Address, 
     label: function(){ 
      return (Session.get('lang') == 'ar')? 'العنوان' : 'Address'; 
     }, 
     minCount: 1, 
     optional: false 
    }, 
    createdAt: { 
     type: Date, 
     autoValue: function(){ 
      return new Date(); 
     }, 
     autoform: { 
      type: 'hidden' 
     } 
    } 
}); 

CompaniesSchema = new SimpleSchema({ 
    name: { 
     type: String, 
     label: function(){ 
      return (Session.get('lang') == 'ar')? 'اسم الشركة' : 'Company Name'; 
     }, 
     autoform: { 
      afFieldInput: { 
       placeholder: function(){ 
        return (Session.get('lang') == 'ar')? 'اسم الشركة' : 'Company Name'; 
       } 
      } 
     } 
    }, 
    branches: { 
     type: [Branch], 
     label: function(){ 
      return (Session.get('lang') == 'ar')? 'الفرع' : 'Branch'; 
     } 
    }, 
    createdAt: { 
     type: Date, 
     autoValue: function(){ 
      return new Date(); 
     }, 
     autoform: { 
      type: 'hidden' 
     } 
    } 
}); 

客户端/ main.js

Meteor.startup(() => { 
    // ================================================================ // 
    // Functions that need to be global perior to Packages loading  // 
    // ================================================================ // 
    // Get Initial/Current user language 
    getUserLanguage = function() { 
     return Session.get('lang') || Meteor.settings.public.defaultLang; 
    }; 

    // Reverse Geocode location 
    // @param t   => Template Instance - object 
    // @param geocoder => google.map.geocoder - object 
    // @param location => google.maps.LatLng - object 
    reverseGeoCode = function(t, geocoder, location){ 
     var latlng = {lat: location.lat(), lng: location.lng()}; 
     var geoCodingOpt = { 
      'location' : latlng, 
      'language' : Session.get('lang'), 
      'region' : 'eg' 
     }; 

     geocoder.geocode(geoCodingOpt, function(results, status){ 
      if(status === 'OK'){ 
       if(results.length !== 0){ 
        var address = results[0]; 
        var cmp = address.address_components; 
        var pfx = t.data.name.replace(/.location/g,''); 
        var sel = '[name="' + pfx + '.' + 'xx' + '"]'; 
        var selObj = { 
         placeId  : sel.replace('xx', 'location.placeId'), 
         country  : sel.replace('xx', 'country'), 
         governorate : sel.replace('xx', 'governorate'), 
         city  : sel.replace('xx', 'city'), 
         district : sel.replace('xx', 'district'), 
         street  : sel.replace('xx', 'street'), 
         building : sel.replace('xx', 'building') 
        }; 

        // Address Container DOM element 
        $addressElm = $(t.firstNode.closest('.autoform-array-item')); 
        // Place ID 
        $addressElm.find(selObj.placeId).val(address.place_id); 
        // Country 
        $addressElm.find(selObj.country).val(cmp[5].long_name); 
        // Governorate 
        $addressElm.find(selObj.governorate).val(cmp[4].long_name); 
        // City 
        $addressElm.find(selObj.city).val(cmp[3].long_name); 
        // District 
        $addressElm.find(selObj.district).val(cmp[2].long_name); 
        // Street 
        $addressElm.find(selObj.street).val(cmp[1].long_name); 
        // Building 
        $addressElm.find(selObj.building).val(cmp[0].long_name); 

        // Clear DOM refference for Garbage Collection 
        $addressElm.prevObject = null; 
        $addressElm = null; 
       } 
      } 
     }); 
    } 
}); 

希望帮助任何人。

随时查询任何精化