Javascript 如何在客户端上存储谷歌地图地理编码信息？

我希望用户执行以下操作： 1） 输入他们的街道地址和邮政编码，点击“提交”，这将触发谷歌地图对地址进行地理编码，并在地图上放置一个标记。我正在为此使用以下代码（工作正常，并获得我所需的所有地址信息）：

---

2） 在用户看到标记后，我希望他们点击“确认”按钮将数据提交到我的服务器（我通过他们的Javascript API使用Firebase）。我的问题是，在谷歌地图返回数据和用户点击“确认”按钮之间，如何最好地存储变量“streetNumber”、“streetName”、“city”、“state”、“zipCode”和“Neighbor”？我唯一能想到的是将其存储在浏览器窗口中（例如window.streetName、window.streetNumber等），但我知道这不是最佳做法。

您可以将这些数据存储为按钮的属性，以后访问它们会非常容易（但这也不是一个好做法）

你能做的最好的事情就是将你的所有对象存储在一个“类”中（我指的是所有全局的，目前也是

map

，

geocoder

，

codemaddress

和

initialize

都是全局的）

下面是一个示例代码（可以使用，它不公开任何全局属性）：

//一个自动执行的匿名函数
（功能（选项，ns）{
//“that”是我们的对象，它包含所有属性和方法
//并且仅在此功能范围内可见
var that={geocoder:null，
map:null，
选项：选项，
ns:ns，
postData:null}，
goo=google.maps，
byId=函数（id）{return document.getElementById（id）；}；
//初始化映射
that.initialize=函数（）{
var latlng=新的goo.latlng（this.opts.lat，this.opts.lng）；
变量映射选项={
中心：拉特林，
缩放：12，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
this.map=new-goo.map（byId（this.opts.ids.map），mapOptions）；
//为按钮指定单击处理程序
goo.event.addDomListener（byId（this.opts.ids.btnGeo），'click'，function（）{
that.codemaddress.call（that）；}）；
addDomListener（byId（this.opts.ids.btnSend），'click'，function（）{
that.onSubmit.call（that）；}）；
}
//将数据发送到这里
that.onSubmit=function（）{
警报（JSON.stringify（that.postData））；
}
//将地址组件解析为对象
that.parseAddressComponents=函数（ac）{
变量分量={
街道编号：[“街道编号”、“长名称”]，
路线：['streetName'，'short_name']，
行政区一级：[“州”、“简称”]，
邻居：[“邻居”，“简称”]，
邮政编码：['zipCode'，'long_name']
}，o={}；
对于（var i=0；i*/
街道地址：
zipCode：

Hmmm，我不知道该怎么做。你能给我举个例子吗？

var geocoder;
var map;

function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(37.7789, -122.3917);
    var mapOptions = {
        center: latlng,
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}

function codeAddress() {
  var address = document.getElementById('streetAddress').value +", "+document.getElementById('zipCode').value;
  geocoder.geocode( { 'address': address, 'region': 'US'}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        if (results[0].address_components) {
            for (var i in results[0].address_components) {
                if (typeof(results[0].address_components[i]) === "object" && results[0].address_components[i].types[0] == "street_number") {
                    var streetNumber= results[0].address_components[i].long_name;
                } else if (typeof(results[0].address_components[i]) === "object" && results[0].address_components[i].types[0] == "route") {
                    var streetName= results[0].address_components[i].short_name;
                } else if (typeof(results[0].address_components[i]) === "object" && results[0].address_components[i].types[0] == "neighborhood") {
                    var neighborhood= results[0].address_components[i].short_name;
                } else if (typeof(results[0].address_components[i]) === "object" && results[0].address_components[i].types[0] == "administrative_area_level_1") {
                    var state= results[0].address_components[i].short_name;
                } else if (typeof(results[0].address_components[i]) === "object" && results[0].address_components[i].types[0] == "postal_code") {
                    var zipCode= results[0].address_components[i].long_name;
                }   
            }
        }
        console.log(streetNumber+", "+streetName+", "+neighborhood+", "+state+", "+zipCode);        
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}   

google.maps.event.addDomListener(window, 'load', initialize);

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
</script>
<script  type="text/javascript">
//a self-executing, anonymous function
(function(opts,ns){

  //"that" is our object, it holds all properties and methods
  //and is only visible within the scope of this function
  var that = {geocoder:  null,
              map:       null,
              opts:      opts,
              ns:        ns,
              postData:  null},
      goo  =  google.maps,
      byId = function(id){return document.getElementById(id);};

  //initialize the map
  that.initialize=function() {
    var latlng = new goo.LatLng(this.opts.lat,this.opts.lng);
    var mapOptions = {
        center:     latlng,
        zoom:       12,
        mapTypeId:  google.maps.MapTypeId.ROADMAP
    };
    this.map = new goo.Map(byId(this.opts.ids.map), mapOptions);
    //assign click-handlers to the buttons
    goo.event.addDomListener(byId(this.opts.ids.btnGeo),'click',function(){
                                              that.codeAddress.call(that);});
    goo.event.addDomListener(byId(this.opts.ids.btnSend),'click',function(){
                                              that.onSubmit.call(that);});

  }
  //send the data here  
  that.onSubmit=function(){
    alert(JSON.stringify(that.postData));
  }
  //parse the address-components into an object
  that.parseAddressComponents=function(ac){
    var components={
                    street_number:              ['streetNumber', 'long_name'],
                    route:                      ['streetName', 'short_name'],
                    administrative_area_level_1:['state', 'short_name'],
                    neighborhood:               ['neighborhood', 'short_name'],
                    postal_code:                ['zipCode', 'long_name']
                   },o={};

    for(var i=0;i<ac.length;++i){
      inner:for(var c in components){
        if(ac[i].types[0]==c){
          o[components[c][0]]=ac[i][components[c][1]];
          break inner;
        }
      }
    }
    return o;
  }

  //geocoding-callback
  that.geoCallback=function(results, status){
      if (status == goo.GeocoderStatus.OK) {
       //store the parsed address-components as property of "that"
       that.postData=that.parseAddressComponents(results[0].address_components);

        that.map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: that.map,
            position: results[0].geometry.location
      });
    } else {
      that.postData={};
      alert(status);
    }
  }
  //geocoding
  that.codeAddress=function() {
    var address = [byId(this.opts.ids.uiAddr).value,
                   byId(this.opts.ids.uiZip).value].join(',');
    //initialize geocoder on first run
    if(!this.geocoder){this.geocoder=new goo.Geocoder();}
      this.geocoder.geocode( { 'address': address, 'region': this.opts.region}, 
                              this.geoCallback);
  }
  //make "that" global when needed
  if(ns)window[ns]=that;
  //load-handler
  goo.event.addDomListener(window, 'load',function(){
                    that.initialize();});
})
(   //some properties for the object
    {
      lat:37.7789,
      lng:-122.3917,
      region:'US',
      ids:{ map     :'map_canvas',
            btnGeo  :'geobutton',
            btnSend :'sendbutton',
            uiAddr  :'streetAddress',
            uiZip   :'zipCode'}
    },
    //supply a name for the object here when you want to make it global
    null
);
/*]]>*/
</script>
<fieldset>
  streetAddress:<input id="streetAddress" value="paisley park">
  zipCode:<input id="zipCode" value="55422">
  <input id="geobutton" type="button" value="geocode">
  <input id="sendbutton" type="button" value="send">
</fieldset>
<div id="map_canvas" style="height:300px;"></div>