繁体   English   中英

试图将 map 更新到正确的地址

trying to update the map to the right address

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

当我显示所有地址时,我正在尝试更新 map 图像。 我有 5 个地址,但它只显示一个 map,它是所有 5 个地址的第一个 map。

但每次我点击显示地址时,它只会给我 map 的相同模板。 我如何编码 map 将更改为我的获取地址 function 中列出的地址。

 function startUp(){ wireHandlers(); }; function getAddresses(){ return [ {'name': 'Facebook', 'lineOne': '1 Hacker Way', 'lineTwo': 'Menlo Park, CA 94025', 'city': 'Menlo Park', 'state': 'CA', 'zipCode': '94025', 'country': 'United States'}, {'name': 'Buena Park Home', 'lineOne': '6490 Crescent Ave', 'lineTwo': 'Buena Park CA 90620', 'city': 'Buena Park', 'state': 'CA', 'zipCode': 92804, 'country': 'United States'}, {'name': 'Home', 'lineOne': '1030 N Magnolia Ave', 'lineTwo': 'Anaheim CA 92801', 'city': 'Anaheim', 'state': 'CA', 'zipCode': 92801, 'country': 'United States'}, {'name': 'Nationwide', 'lineOne': '1360 E Walnut St', 'lineTwo': 'Pasadena CA 91106', 'city': 'Pasadena', 'state': 'CA', 'zipCode': 91106, 'country': 'United States'}, {'name': 'Seacliff Self Storage', 'lineOne': '18100 Kovacs Ln', 'lineTwo': 'Huntington Beach CA 92648', 'city': 'Huntington Beach', 'state': 'CA', 'zipCode': 92648, 'country': 'United States'} ] }; function wireHandlers(){ $('#showsAddresses').on('click', onShowAddresses); $('#emptyAddresses').on('click', emptyAllAddresses); $('.deleteAddress').on('click', onDeleteAddress); }; function onShowAddresses(e){ e.preventDefault(); var addresses = getAddresses(); console.log(addresses); renderAddresses(addresses); }; function getTemplate(){ return $($('#addressTemplate').html()); }; function renderAddresses(addressArr){ for (let index = 0; index < addressArr.length; index++) { const template = getTemplate(); template.find('.card-name').text(addressArr[index].name); template.find('.line-one').text(addressArr[index].lineOne); template.find('.line-two').text(addressArr[index].lineTwo); template.find('.city-name').text(addressArr[index].city); template.find('.state-name').text(addressArr[index].state); template.find('.zip-code').text(addressArr[index].zipCode); template.find('.country').text(addressArr[index].country); $('.clone-container').append(template); } }; function emptyAllAddresses(){ $('.clone-container').empty(); }; function onDeleteAddress(){ // $('.deleteAddress').click(function(){ // $('.deleteAddress').remove(); // }); };

当我显示所有地址时,我正在尝试更新 map 图像。 我有 5 个地址,但它只显示一个 map,它是所有 5 个地址的第一个 map。

    function renderAddresses(addressArr){
        for (let index = 0; index < addressArr.length; index++) {
            const template = getTemplate();
            template.find('.card-name').text(addressArr[index].name);
            template.find('.line-one').text(addressArr[index].lineOne);
            template.find('.line-two').text(addressArr[index].lineTwo);
            template.find('.city-name').text(addressArr[index].city);
            template.find('.state-name').text(addressArr[index].state);
            template.find('.zip-code').text(addressArr[index].zipCode);
            template.find('.country').text(addressArr[index].country);
            $('.clone-container').append(template);


        }
    };
1 个回复

您可以考虑使用$.each() 这是一个例子:

function startUp() {
  wireHandlers();
};

function getAddresses() {
  return [{
      'name': 'Facebook',
      'lineOne': '1 Hacker Way',
      'lineTwo': 'Menlo Park, CA 94025',
      'city': 'Menlo Park',
      'state': 'CA',
      'zipCode': '94025',
      'country': 'United States'
    },
    {
      'name': 'Buena Park Home',
      'lineOne': '6490 Crescent Ave',
      'lineTwo': 'Buena Park CA 90620',
      'city': 'Buena Park',
      'state': 'CA',
      'zipCode': 92804,
      'country': 'United States'
    },
    {
      'name': 'Home',
      'lineOne': '1030 N Magnolia Ave',
      'lineTwo': 'Anaheim CA 92801',
      'city': 'Anaheim',
      'state': 'CA',
      'zipCode': 92801,
      'country': 'United States'
    },
    {
      'name': 'Nationwide',
      'lineOne': '1360 E Walnut St',
      'lineTwo': 'Pasadena CA 91106',
      'city': 'Pasadena',
      'state': 'CA',
      'zipCode': 91106,
      'country': 'United States'
    },
    {
      'name': 'Seacliff Self Storage',
      'lineOne': '18100 Kovacs Ln',
      'lineTwo': 'Huntington Beach CA 92648',
      'city': 'Huntington Beach',
      'state': 'CA',
      'zipCode': 92648,
      'country': 'United States'
    }
  ];
};

function wireHandlers() {
  $('#showsAddresses').on('click', onShowAddresses);
  $('#emptyAddresses').on('click', emptyAllAddresses);
  $('.deleteAddress').on('click', onDeleteAddress);
};

function onShowAddresses(e) {
  e.preventDefault();
  var addresses = getAddresses();
  console.log(addresses);
  renderAddresses(addresses);
};

function getTemplate() {
  var clone = $("#addressTemplate").html();
  return $(clone);
};

function renderAddresses(addressArr) {
  var temp;
  $.each(addressArr, function(i, a) {
    temp = getTemplate();
    $(".card-name", temp).html(a.name);
    $(".line-one", temp).html(a.lineOne);
    $(".line-two", temp).html(a.lineTwo);
    $(".city-name", temp).html(a.city);
    $(".state-name", temp).html(a.state);
    $(".zip-code", temp).html(a.zipCode);
    $(".country", temp).html(a.country);
    $('.clone-container').append(temp);
  });
};

function emptyAllAddresses() {
  $('.clone-container').html("");
};

function onDeleteAddress() {
  $(this).parent().remove();
};

查看更多: jQuery.each()

如果它不起作用,您可能需要查看您的getTemplate() function 并考虑使用.prop("outerHTML")

1 实时 Map 更新

我正在使用谷歌地图和 android 的定位服务,但是即使当我移动设备时,该方法也不会更新用户界面。 我已请求允许使用我在移动设备时假定的位置当用户移动设备时,locationObtained 将获得更新的纬度和经度信息,但这似乎只获得一次。 这是我使用依赖服务获取位置的 class。 这是我的清单 ...

2 实时地图更新

我有一个Web服务,它会定期获取用户位置。 我想创建一个桌面应用程序,该应用程序使用这些值并自动在地图上显示用户的实时位置。 我可以遵循的获取实时更新的最佳方法是什么? 我可以使用Ajax吗? 是否支持自动刷新? 是否有更好的方法支持自动刷新并显示实时数据? 谢谢.. ...

2012-03-31 06:03:44 1 304   c#/ map
3 Scala地图更新

我想更新另一个地图中存在的地图值。 当我尝试更新时说“值更新不是Option [scala.collection.immutable.Map [Int,Int]]的成员”。 我尝试将值转换为Map,但仍然对我不起作用。 ...

2017-05-25 16:22:02 2 3197   scala
4 UWP地图更新性能

UWP地图控件具有出色的性能-我可以在地图上绘制数千个多边形,并且在缩放和平移时保持响应。 但是,如果我更新了项目在地图上的位置,很快就会变得无响应。 根据我的基准,我每秒只能实现约100次更新,因此,如果我尝试每秒更新100个对象(每秒1个对象)的位置,就是这样。 每次更新不会替 ...

5 DynamoDb 嵌套 Map 更新

在使用了 DynamoDb 之后,我遇到了一个问题,从我目前所读到的内容来看,这对于 DynamoDb 来说并不理想。 因此,在我切换到 RDS 之前,我想看看是否有任何方法可以通过 DynamoDb 实现我所需要的。 我还考虑过将其分解为 DynamoDb 的多个表在我的数据架构下方。 项目内嵌套 ...

6 地图更新历史

有没有办法访问离线地图的版本历史? 我正在使用MapLoader“ performMapUpdates”来安装版本,并且工作正常,但是最近我们使用了不寻常的数据(&gt; 1Gb),我想知道已应用了哪些地图更新及其大小。 谢谢, ...

7 Jackcess从地图更新行

这是我的问题。 我有一张这样的桌子 我想借助游标仅提取具有相同别名的行,例如:仅提取以B0开头的行。 我发现了这一点: 使用此示例,如何设置索引,starRow和endRow ??? 我将用此数据填充一个gridview,一旦用户编辑一个空字段,我会将那一行从gridv ...

8 Android谷歌地图随谷歌地图更新 - 对吧?

我在问一个问题以确认怀疑,但我只是想确定在我回复我的客户之前。 该应用程序的一些消费者抱怨说,Google地图(使用谷歌地图)在谷歌地图上没有得到更新,就像在网上一样。 我的第一个想法是,这是错误的。 我认为,并且无法找到,当谷歌地图得到更新时,Android设备上的地图会更新。 这 ...

9 谷歌地图更新位置 - 迅速

我正在使用 api 谷歌地图。 当我点击按钮时,我调用了locationManager.startUpdatingLocation()方法。 但是这个方法监控我的位置,我只需要取一次数据(坐标)。 在这种情况下我应该使用什么? ...

10 将坐标和中心地图更新为标记

我的网站上有一个Google Maps JavaScript v3地图,允许我拖动标记以获取给定位置的坐标。 这很好用,但我也想手动输入坐标,然后点击链接更新标记。 这很好但我无法将地图居中到标记(使其平移到标记)。 我还添加了一个带有实心坐标的选择框,可以快速到达地图上的特定位置。 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM