jjzjj

javascript - 如何以编程方式输入搜索字符串并触发 Google Maps API 的 places_changed?

coder 2024-12-08 原文

所以我有一个带有位置输入的搜索页面。如果用户来自另一个带有搜索查询的页面,我想以编程方式将此查询输入到输入中并触发位置更改。

这是我目前所拥有的:

var searchBox = new google.maps.places.SearchBox(input);

$('input#location').val(searchQuery);
google.maps.event.trigger(searchBox, 'places_changed');

但是,对于我的 places_changed 函数的这一行,这给了我错误 Cannot read property 'length' of undefined:

var places = searchBox.getPlaces();

if (places.length == 0) {
  return;
}

很明显,当以编程方式填充输入时,searchBoxgetPlaces() 返回 undefined。我该如何解决这个问题?

更新: Here is a JSFiddle举例说明我的意思。

最佳答案

让我们来看看搜索框的工作流程:

  1. 用户输入一个字符串
  2. API 提供了一个包含预测的列表
  3. 用户选择一个预测
  4. API 根据所选预测执行文本搜索并返回地点列表

结论: 当您知道 searchTerm 并且不需要选择预测时,只需跳过步骤 1-3 并直接运行 TextSearch。将带有位置的返回数组分配给 SearchBoxplaces 属性(places_changed 事件将自动触发,因为 SearchBox 是一个MVCObject ,会观察属性的变化,并自动触发相关事件)

function initialize() {
        var goo = google.maps,
          map = new goo.Map(document.getElementById('map_canvas'), {
            zoom: 1,
            center: new goo.LatLng(0, 0),
            noClear: true
          }),
          input = map.getDiv().querySelector('input'),
          ac = new goo.places.SearchBox(input),
          service = new goo.places.PlacesService(map),
          win = new goo.InfoWindow,
          markers = [],
          request;


        map.controls[goo.ControlPosition.TOP_CENTER].push(input);

        if (input.value.match(/\S/)) {
          request = {
            query: input.value
          };
          if (ac.getBounds()) {
            request.bounds = ac.getBounds();
          }
          service.textSearch(request, function(places) {
            //set the places-property of the SearchBox
            //places_changed will be triggered automatically
            ac.set('places', places || [])
          });
        }

        goo.event.addListener(ac, 'places_changed', function() {
          
          win.close();
          
          //remove previous markers
          while (markers.length) {
            markers.pop().setMap(null);
          }

          //add new markers 
          (function(places) {
            var bounds = new goo.LatLngBounds();
            for (var p = 0; p < places.length; ++p) {
              markers.push((function(place) {
                bounds.extend(place.geometry.location);
                var marker = new google.maps.Marker({
                    map: map,
                    position: place.geometry.location
                  }),
                  content = document.createElement('div');
                content.appendChild(document.createElement('strong'));
                content.lastChild.appendChild(document.createTextNode(place.name));
                content.appendChild(document.createElement('div'));
                content.lastChild.appendChild(document.createTextNode(place.formatted_address));
                goo.event.addListener(marker, 'click', function() {
                  win.setContent(content);
                  win.open(map, this);
                });
                return marker;
              })(places[p]));
            };
            if (markers.length) {
              if (markers.length === 1) {
                map.setCenter(bounds.getCenter());
              } else {
                map.fitBounds(bounds);
              }
            }
          })(this.getPlaces());
        });
      }
      google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_canvas {
  height: 100%;
  margin: 0;
  padding: 0
}
strong{
 font-weight:bold;
}
<div id="map_canvas">
  <input value="berlin">
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places"></script>

关于javascript - 如何以编程方式输入搜索字符串并触发 Google Maps API 的 places_changed?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36158028/

有关javascript - 如何以编程方式输入搜索字符串并触发 Google Maps API 的 places_changed?的更多相关文章

  1. ruby - 如何以所有可能的方式将字符串拆分为长度最多为 3 的连续子字符串? - 2

    我试图获取一个长度在1到10之间的字符串,并输出将字符串分解为大小为1、2或3的连续子字符串的所有可能方式。例如:输入:123456将整数分割成单个字符,然后继续查找组合。该代码将返回以下所有数组。[1,2,3,4,5,6][12,3,4,5,6][1,23,4,5,6][1,2,34,5,6][1,2,3,45,6][1,2,3,4,56][12,34,5,6][12,3,45,6][12,3,4,56][1,23,45,6][1,2,34,56][1,23,4,56][12,34,56][123,4,5,6][1,234,5,6][1,2,345,6][1,2,3,456][123

  2. ruby - 解析 RDFa、微数据等的最佳方式是什么,使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作,但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式,例如使用这个yaml文件,它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  3. ruby-on-rails - 正确的 Rails 2.1 做事方式 - 2

    question的一些答案关于redirect_to让我想到了其他一些问题。基本上,我正在使用Rails2.1编写博客应用程序。我一直在尝试自己完成大部分工作(因为我对Rails有所了解),但在需要时会引用Internet上的教程和引用资料。我设法让一个简单的博客正常运行,然后我尝试添加评论。靠我自己,我设法让它进入了可以从script/console添加评论的阶段,但我无法让表单正常工作。我遵循的其中一个教程建议在帖子Controller中创建一个“评论”操作,以添加评论。我的问题是:这是“标准”方式吗?我的另一个问题的答案之一似乎暗示应该有一个CommentsController参

  4. ruby - 寻找通过阅读代码确定编程语言的ruby gem? - 2

    几个月前,我读了一篇关于ruby​​gem的博客文章,它可以通过阅读代码本身来确定编程语言。对于我的生活,我不记得博客或gem的名称。谷歌搜索“ruby编程语言猜测”及其变体也无济于事。有人碰巧知道相关gem的名称吗? 最佳答案 是这个吗:http://github.com/chrislo/sourceclassifier/tree/master 关于ruby-寻找通过阅读代码确定编程语言的rubygem?,我们在StackOverflow上找到一个类似的问题:

  5. 【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2

    在应用开发中,有时候我们需要获取系统的设备信息,用于数据上报和行为分析。那在鸿蒙系统中,我们应该怎么去获取设备的系统信息呢,比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况,一种是设备信息的获取,一种是系统信息的获取。1.1、获取设备信息获取设备信息,鸿蒙的SDK包为我们提供了DeviceInfo类,通过该类的一些静态方法,可以获取设备信息,DeviceInfo类的包路径为:ohos.system.DeviceInfo.具体的方法如下:ModifierandTypeMethodDescriptionstatic StringgetAbiList​()Obt

  6. 网络编程套接字 - 2

    网络编程套接字网络编程基础知识理解源`IP`地址和目的`IP`地址理解源MAC地址和目的MAC地址认识端口号理解端口号和进程ID理解源端口号和目的端口号认识`TCP`协议认识`UDP`协议网络字节序socket编程接口`sockaddr``UDP`网络程序服务器端代码逻辑:需要用到的接口服务器端代码`udp`客户端代码逻辑`udp`客户端代码`TCP`网络程序服务器代码逻辑多个版本服务器单进程版本多进程版本多线程版本线程池版本服务器端代码客户端代码逻辑客户端代码TCP协议通讯流程TCP协议的客户端/服务器程序流程三次握手(建立连接)数据传输四次挥手(断开连接)TCP和UDP对比网络编程基础知识

  7. ruby-on-rails - 在 RSpec 中,如何以任意顺序期望具有不同参数的多条消息? - 2

    RSpec似乎按顺序匹配方法接收的消息。我不确定如何使以下代码工作:allow(a).toreceive(:f)expect(a).toreceive(:f).with(2)a.f(1)a.f(2)a.f(3)我问的原因是a.f的一些调用是由我的代码的上层控制的,所以我不能对这些方法调用添加期望。 最佳答案 RSpecspy是测试这种情况的一种方式。要监视一个方法,用allowstub,除了方法名称之外没有任何约束,调用该方法,然后expect确切的方法调用。例如:allow(a).toreceive(:f)a.f(2)a.f(1)

  8. ruby - 鸭子输入字符串、符号和数组的优雅方式? - 2

    这是针对我无法破坏的现有公共(public)API,但我确实希望对其进行扩展。目前,该方法采用字符串或符号或任何其他在作为第一个参数传递给send时有意义的内容我想添加发送字符串、符号等列表的功能。我可以只使用is_a吗?数组,但还有其他发送列表的方法,这不是很像ruby​​。我将调用列表中的map,所以第一个倾向是使用respond_to?:map。但是字符串也会响应:map,所以这行不通。 最佳答案 如何将它们全部视为数组?String的行为与仅包含String的Array相同:deffoo(obj,arg)[*arg].eac

  9. ruby - 我正在学习编程并选择了 Ruby。我应该升级到 Ruby 1.9 吗? - 2

    我完全不是程序员,正在学习使用Ruby和Rails框架进行编程。我目前正在使用Ruby1.8.7和Rails3.0.3,但我想知道我是否应该升级到Ruby1.9,因为我真的没有任何升级的“遗留”成本。缺点是什么?我是否会遇到与普通gem的兼容性问题,或者甚至其他我不太了解甚至无法预料的问题? 最佳答案 你应该升级。不要坚持从1.8.7开始。如果您发现不支持1.9.2的gem,请避免使用它们(因为它们很可能不被维护)。如果您对gem是否兼容1.9.2有任何疑问,您可以在以下位置查看:http://www.railsplugins.or

  10. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法? - 2

    我遇到了一个非常奇怪的问题,我很难解决。在我看来,我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时,我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性,其中包括href和data-method。再次单击此链接后,我的服务器收到了对新href的请求,但使用的是旧的data-method,即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是,如果我刷新页面,HTML与"new"HTML相同(随返回的JS发生变化),但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

随机推荐