- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用Angular Google Maps获取带有搜索框的 map 。
我试图将搜索限制为“地址”和一个国家/地区(法国),因此我想使用搜索框指令的“自动完成”选项,如 documentation 中指定的那样。 .
问题是我的代码中的 autocomplete:true
位确实有效地限制了搜索,但它阻止了事件的触发( map 和标记不会更新)。但控制台并没有报错。
但是,如果我注释掉或删除 autocomplete:true
,则会触发事件(刷新 map 和标记),但搜索不限于法国和地址。 .
这是我的代码:
var events = {
places_changed:function (searchBox) {
var place = searchBox.getPlaces();
if (!place || place == 'undefined' || place.length == 0) {
console.log('no place data :(');
return;
}
// refresh the map
$scope.map = {
center:{
latitude:place[0].geometry.location.lat(),
longitude:place[0].geometry.location.lng()
},
zoom:10
};
// refresh the marker
$scope.marker = {
id:0,
options:{ draggable:false },
coords:{
latitude:place[0].geometry.location.lat(),
longitude:place[0].geometry.location.lng()
}
};
}
};
$scope.searchbox = {
template:'searchbox.tpl.html',
events:events,
options:{
autocomplete:true,
types:['address'],
componentRestrictions:{
country:'fr'
}
}
};
在 html 文件中:
<div style="height: 500px;">
<script type="text/ng-template" id="searchbox.tpl.html">
<input type="text"
placeholder="{{'searchbox.google.maps' | text}}"
style="width:270px; height:30px;">
</script>
<ui-gmap-google-map center='map.center' zoom='map.zoom'>
<!--SEARCHBOX-->
<ui-gmap-search-box template="searchbox.template"
events="searchbox.events"
position="BOTTOM_RIGHT"
options="searchbox.options"></ui-gmap-search-box>
<!--MARKER-->
<ui-gmap-marker coords="marker.coords"
options="marker.options"
events="marker.events"
idkey="marker.id">
</ui-gmap-marker>
</ui-gmap-google-map>
</div>
我做错了什么?有没有办法获得对搜索和触发事件的限制?
提前谢谢您!
最佳答案
好吧,我明白了,所以我回答我自己的问题,以防其他人陷入困境!
如果 autocomplete:true
,那么它不是 places_changed
和 searchBox.getPlaces()
,而是 place_changed
和 searchBox.getPlace() 。我们得到的不是一系列地点,而是一个地点。
这是一个工作代码:
var events = {
place_changed:function (searchBox) {
var place = searchBox.getPlace();
if (!place || place == 'undefined') {
console.log('no place data :(');
return;
}
// refresh the map
$scope.map = {
center:{
latitude:place.geometry.location.lat(),
longitude:place.geometry.location.lng()
},
zoom:10
};
// refresh the marker
$scope.marker = {
id:0,
options:{ draggable:false },
coords:{
latitude:place.geometry.location.lat(),
longitude:place.geometry.location.lng()
}
};
}
};
关于angularjs - Angular 谷歌地图搜索框指令: events don't fire when trying to restrict the search (with autocomplete option),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32024234/
我想为我们的网站创建一个自定义搜索框。让它工作如下: function bookssearch(bs) { window.open('http://webpac.kdu.edu.my/s
我需要向我的搜索系统添加一个弹出窗口事件 - 当客户仅输入 2 个字符时,它应该弹出一个带有警报 e 的小表格。 G。 “搜索时必须输入至少 3 个字符...”并且背景应变灰。 这对我来说可能吗?这是
我的以下功能存在格式问题。正如您将在下面看到的,它大部分都有效,只是搜索框的格式不是我想要的(我想复制 typeahead Twitter Bootstrap 功能): 用户可以在搜索框中输入书名,在
我正在尝试使用 php 和 jquery 实现一个搜索框(搜索结果来自数据库)。我想要做的是,当用户在搜索框中键入内容时,将进行查询以查找包含用户在搜索框中输入的关键字的数据。我遇到的问题是我有这样的
我想知道为什么当我在我的计算机上本地加载 Angular 搜索框时它不起作用。我使用的是相同的代码,当我使用 codepen、plunker 或 jsfiddle 等网站时,它确实有效。它无法正常工作
我想知道如何在鼠标悬停事件上将焦点设置到输入字段。 我想知道当鼠标悬停在输入字段或焦点字段上时如何加载输入字段或焦点字段,以便在光标触摸或鼠标悬停在搜索框的输入字段上时轻松准备打字。 最佳答案 您可以
我有index.jsp,我想搜索视频,但每当我搜索时,它都会给我带来不同的错误,并且我无法获得结果,就像它应该将用户带到搜索文本所在的页面一样。 Search.java import java.io.
所以搜索就像'Ozzie Smith' 第一个表有 (username, fname, lname) = osmith, ozzie, smith 第二张表有 (username, team) = o
有什么方法可以启动/打开带有代码的搜索框,或者只需单击搜索键即可? 最佳答案 SearchManager mgr = ((SearchManager) getSystemService(Context
废话不多说了,直接给大家贴关键代码了,具体代码如下所示: ? 1
我想制作一个具有自动建议并搜索 XML 文件中特定标签的搜索框。我怎样才能实现这一点? 最佳答案 这取决于您所说的 XML 文件的含义。 XML 文件在某些服务器上可用吗? 看看jQuery及其
我用javaee6和jsf2开发了一个小应用程序。我想要一个没有按钮的搜索字段(只需键入并按 Enter 键并给出结果)。我在 bean 中有一个搜索方法: public Book searchByT
首先,这个标题是我能想到的最好的标题。 我编写了一个非常短的小脚本来执行实时搜索。 它的基本原理是: (function ($) { $.fn.SearchThing = function (
我正在用 Java 创建一个简单的桌面应用程序,它显示当前正在运行的服务。我想在顶部添加一个谷歌搜索栏,可以直接在默认浏览器中打开应用中输入的关键字的谷歌搜索结果(网页)。 最佳答案 您应该从输入框中
美好的一天。我正在研究我的搜索框。我如何从多列中进行搜索。除了“id”列之外,我还有名字、姓氏、RFIDnum。我如何将它们添加到我当前的代码中。 这是我的代码: DataView dv = new
在 this site ,右上角的搜索框不起作用。 我尝试向父元素添加 z-index: .col-right-one-thirds { max-width: 22.38033333em;
我想要在 bootstrap 3+ 中带有选择选项和清除按钮的大搜索框。我尝试了下面的代码,但它没有正确对齐。
执行此代码$("input[name=q]").value = "Hello"; 应在 stackoverflow 搜索框中输入“Hello”。然而它仍然是空的。为什么? 最佳答案 因为它应该是: $
我是新手。我尝试制作一个搜索框。当我在 Firefox 上打开它时。对我来说没关系。然后我在 IE、Chrome 和 Safari 中执行此操作。实际上并不酷。有谁知道我的问题,请帮我解决一下? 我想
当用户加载我的页面时,浏览器中第一个激活的元素是我的菜单按钮之一。 我的页面上有一个搜索框(表单域),我希望它成为第一个激活的东西。 我所说的“事件”是指当用户按下选项卡按钮时,它会循环浏览网站上的所
我是一名优秀的程序员,十分优秀!