javascript - 如何在交互式 map 上使用自定义选项填充谷歌地图自动完成搜索结果？-6ren

javascript - 如何在交互式 map 上使用自定义选项填充谷歌地图自动完成搜索结果？

转载作者：行者123 更新时间：2023-11-28 05:22:56

25

4

所以我坚持这个 - 我正在构建一个网站，根据用户输入的位置显示用户附近的事件，即如果我在搜索框中输入“肯特，伦敦”或邮政编码，它将显示带有图钉和/或详细说明附近事件的列表的交互式 map - 本质上类似于 Trivago 在您输入位置时显示酒店的功能，您可以查看列表/显示 map 。

到目前为止，我已经通过创建一个输入框并像这样调用 Google Maps API 来设法让自动完成功能在现场工作:

    <head>
...
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
...
</head>
<body>
...
<input id="searchTextField" type="text" size="50">
...
</body>

然后调用一个JS函数:

    function initialize() {

var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
}

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

但是我不知道如何:

获取搜索框，当用户点击输入或点击 “搜索”按钮，显示带有交互式 map 的页面 - 待定老实说，我认为这将是一个 onClick 函数或类似的东西如果有人可以澄清并向我提供正确的信息用这个打开新页面的语法？
1. 在这个新页面上 - 我希望交互式 map 显示的数据取决于用户输入的位置 - 我可以感谢并非所有地点都适用，我不打算覆盖整个国家 - 相反我想开始一两个位置并在 map 上列出依赖于它们的事件 -因此，如果我输入“肯特”或什至输入邮政编码 - 我将如何得到要显示的 map ？
2. 至于事件本身，我知道我想放入哪些事件，但根据上述要求输入和调用这些事件的正确方法是什么？我需要创建然后从某种数据库中导入它们吗？这些可以作为图钉填充在 map 上吗？当您单击图钉时，会显示更多信息吗？或者作为 map 侧面或下方的列表？

感谢任何帮助我能理解这是一个复杂的问题，我绝不打算做一些像 Trivago 这样规模的事情——更多的是本着他们的搜索精神的 super 精简版本。

最佳答案

您可以尝试从 Google Maps JavaScript API 提供的不同示例代码开始.

这是关于如何使用 Place Autocomplete 的示例代码.

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -33.8688, lng: 151.2195},
    zoom: 13
  });
  var input = /** @type {!HTMLInputElement} */(
      document.getElementById('pac-input'));

  var types = document.getElementById('type-selector');
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);

  var autocomplete = new google.maps.places.Autocomplete(input);
  autocomplete.bindTo('bounds', map);

  var infowindow = new google.maps.InfoWindow();
  var marker = new google.maps.Marker({
    map: map,
    anchorPoint: new google.maps.Point(0, -29)
  });

  autocomplete.addListener('place_changed', function() {
    infowindow.close();
    marker.setVisible(false);
    var place = autocomplete.getPlace();
    if (!place.geometry) {
      window.alert("Autocomplete's returned place contains no geometry");
      return;
    }



    // If the place has a geometry, then present it on a map.
    if (place.geometry.viewport) {
      map.fitBounds(place.geometry.viewport);
    } else {
      map.setCenter(place.geometry.location);
      map.setZoom(17);  // Why 17? Because it looks good.
    }
    marker.setIcon(/** @type {google.maps.Icon} */({
      url: place.icon,
      size: new google.maps.Size(71, 71),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(17, 34),
      scaledSize: new google.maps.Size(35, 35)
    }));
    marker.setPosition(place.geometry.location);
    marker.setVisible(true);

    var address = '';
    if (place.address_components) {
      address = [
        (place.address_components[0] && place.address_components[0].short_name || ''),
        (place.address_components[1] && place.address_components[1].short_name || ''),
        (place.address_components[2] && place.address_components[2].short_name || '')
      ].join(' ');
    }

    infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
    infowindow.open(map, marker);
  });

  // Sets a listener on a radio button to change the filter type on Places
  // Autocomplete.
  function setupClickListener(id, types) {
    var radioButton = document.getElementById(id);
    radioButton.addEventListener('click', function() {
      autocomplete.setTypes(types);
    });
  }

  setupClickListener('changetype-all', []);
  setupClickListener('changetype-address', ['address']);
  setupClickListener('changetype-establishment', ['establishment']);
  setupClickListener('changetype-geocode', ['geocode']);
}

现在，您可以将此代码作为起点，然后尝试在此处应用您希望应用程序执行的不同功能。

关于javascript - 如何在交互式 map 上使用自定义选项填充谷歌地图自动完成搜索结果？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38941655/

25

4

0

文章推荐： php 循环破坏了我的 css 外观

文章推荐： javascript - 从 javascript 代码发布到 PHP 后端

文章推荐： html - 如何将 figcaption 放在图像顶部

文章推荐： javascript - 如何从一个目录加载所有图像

dart - 对于 "pubsub.stream.listen(print, onDone: (){print(' 完成')})。 ", the "完成 :"never work
从 Redis 获取消息时，onDone:(){print('done')} 从未起作用。 import 'package:dartis/dartis.dart' as redis show PubS
Vim状态栏的预测/完成？
昨天我玩了一些vim脚本，并设法通过循环来对当前输入的内容进行状态栏预测(请参见屏幕截图(灰色+黄色栏))。问题是，我不记得我是怎么得到的，也找不到我用于该vim魔术的代码片段(我记得它很简单):它
Bash 完成
我尝试加载 bash_completion在我的 bash (3.2.25) 中，它不起作用。没有消息等。我在我的 .bashrc 中使用了以下内容 if [ -f ~/.bash_completio
具有等号和可枚举标志值的 Bash 完成
我正在尝试构建一个 bash 完成例程，它将建议命令行标志和合适的标志值。例如在下面 fstcompose 命令我想比赛套路先建议 compose_filter= 标志，然后建议来自 [alt_seq
重定向符号后的 Bash 完成
当我尝试在重定向符号后完成路径时，bash 完成的行为就好像它仍在尝试在重定向之前完成命令的参数一样。例如: dpkg -l > /med标签通过在 /med 之后点击 Tab我希望它完成通往 /
iphone - CAKeyframeAnimation 完成
我的类中有几个 CAKeyframeAnimation 对象。他们都以 self 为代表。在我的animationDidStop函数中，我如何知道调用来自哪里？是否有任何变量可以传递给 CAKe
cocoa - NSDateFormatter 完成
我有一个带有 NSDateFormatter 的 NSTextField。格式化程序接受“mm/dd/yy”。可以自动补全日期吗？因此，用户可以输入“mm”，格式化程序将完成当前月份和年份。最佳答
cocoa - NSTextfield 完成
有一个解决方案可以使用以下方法完成 NSTextField : - (NSArray *)control:(NSControl *)control textView:(NSTextView *)tex
javascript - 完成()与返回完成()
我正在阅读 Passport 的文档，我注意到 serialize()和 deserialize() done()被调用而不被返回。但是，当使用 passport.use() 设置新策略时在回调函数
javascript 加载图像!完成
在 ubuntu 11.10 上的 Firefox 8.0 中，尽管 img.complete 为 false，但仍会调用 onload 函数 draw。我设法用 setTimeout hack 解决
c++ - 等待第一个将来用C++完成
假设我有两个与两个并行执行的计算相对应的 future 。我如何等到第一个 future 准备好？理想情况下，我正在寻找类似于Python asyncio's wait且参数为return_when=
Java 数据结构表明队列已结束/完成？
我正在寻找一种 Java 7 数据结构，其行为类似于 java.util.Queue，并且还具有“最终项目已被删除”的概念。例如，应可以表达如下概念: while(!endingQueue.isFi
jquery - 完成 If 语句
这是一个简单的问题。 if ($('.dataTablePageList')) { 我想做的是执行一个 if 语句，该语句表示如果具有 dataTablesPageList 类的对象也具有 menu
jQuery 在执行之前等待replaceWith 完成
我用replaceWith批量替换了许多div中的html。替换后，我使用 jTruncate 来截断文本。然而它不起作用，因为在执行时，replaceWith 还没有完成。我尝试了回调技巧 ( H
JavaScript 表单提交()完成
有没有办法调用 javascript 表单 submit() 函数或 JQuery $.submit() 函数并确保它完成提交过程？具体来说，在一个表单中，我试图在一个 IFrame 中提交一个表单。
javascript - 推迟行动直到 .each() 完成
我有以下方法: function animatePortfolio(fadeElement) { fadeElement.children('article').each(function(i
android - registerEntityModifier 完成
我刚刚开始使用 AndEngine，我正在像这样移动 Sprite : if(pValueY < 0 && !jumping) { jumping =
android - 完成 "all"异步任务后更新屏幕
我正在使用 asynctask 来执行冗长的操作，例如数据库读取。我想开始一个新 Activity 并在所有异步任务完成后呈现其内容。实现这一目标的最佳方法是什么？我知道 onPostExecute
从另一个完成 Bash 完成
我有一个脚本需要命令名称和该命令的参数作为参数。所以我想编写一个完成函数来完成命令的名称并完成该命令的参数。所以我可以这样完成命令的名称 if [[ "$COMP_CWORD" == 1 ]];
android - 完成()不工作
我的应用程序有一个相当奇怪的行为。我在 BOOT_COMPLETE 之后启动我的应用程序，因此在我启动设备后它是可见的。 GUI 响应迅速，一切正常，直到我调用 finish()，按下按钮时，什么都没

首页

博学

6Ren·AI

商城

javascript - 如何在交互式 map 上使用自定义选项填充谷歌地图自动完成搜索结果？