如何以编程方式为 google.maps.places.SearchBox 调用输入按下的事件
How to invoke event of enter pressed programatically for google.maps.places.SearchBox?
研究以下示例:
谷歌地图与搜索框
HTML + Javascipt:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
.controls {
margin-top: 16px;
border: 1px solid transparent;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 32px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#pac-input {
background-color: #fff;
padding: 0 11px 0 13px;
width: 400px;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
text-overflow: ellipsis;
}
#pac-input:focus {
border-color: #4d90fe;
margin-left: -1px;
padding-left: 14px; /* Regular padding-left + 1. */
width: 401px;
}
.pac-container {
font-family: Roboto;
}
#type-selector {
color: #fff;
background-color: #4d90fe;
padding: 5px 11px 0px 11px;
}
#type-selector label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
}
</style>
<title>Places search box</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script>
// This example adds a search box to a map, using the Google Place Autocomplete
// feature. People can enter geographical searches. The search box will return a
// pick list containing a mix of places and predicted search terms.
function initialize() {
var markers = [];
var map = new google.maps.Map(document.getElementById('map-canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-33.8902, 151.1759),
new google.maps.LatLng(-33.8474, 151.2631));
map.fitBounds(defaultBounds);
// Create the search box and link it to the UI element.
var input = /** @type {HTMLInputElement} */(
document.getElementById('pac-input'));
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var searchBox = new google.maps.places.SearchBox(
/** @type {HTMLInputElement} */(input));
// [START region_getplaces]
// Listen for the event fired when the user selects an item from the
// pick list. Retrieve the matching places for that item.
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
// For each place, get the icon, place name, and location.
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = {
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(25, 25)
};
// Create a marker for each place.
var marker = new google.maps.Marker({
map: map,
icon: image,
title: place.name,
position: place.geometry.location
});
markers.push(marker);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
});
// [END region_getplaces]
// Bias the SearchBox results towards places that are within the bounds of the
// current map's viewport.
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#target {
width: 345px;
}
</style>
</head>
<body>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map-canvas"></div>
</body>
</html>
输入miamy
后,我应该按"输入",之后地图将专注于另一个地方。
我想在此地图上按编程回车键。
我应该在浏览器控制台中写什么?
附言
我试过这个:
var event = new KeyboardEvent('keydown');
$("#pac-input").trigger(event);
但什么也没发生
附言
是的,我知道特别是对于上面提供的链接,它不起作用,因为$("#pac-input")
是空的但是我在本地重写了这段代码,并且"$("#pac-input")"不为空,但没有任何反应
附言
与最后一条评论相关的主题:
类似的问题
您需要
首先在输入元素上触发focus
,然后使用代码13
(回车键)触发keydown
事件。
var input = document.getElementById('pac-input');
google.maps.event.trigger(input, 'focus');
google.maps.event.trigger(input, 'keydown', {
keyCode: 13
});
JSFiddle 演示
对此有任何疑问,请查看此处:https://stackoverflow.com/a/28062160/1238965
相关文章:
- 是否可以将一个函数输入连接到另一个函数调用的文本
- 在输入字段上有两个函数调用,一个在Blur上,一个不在Angular中
- I'我试图在文本区域中进行特定的输入,调用特定的javascript函数,但没有成功;不起作用
- JavaScript:在调用函数的文本输入上按enter键
- 当输入字段为空时,如何在angular中调用方法
- 如何获取javascript输入并在html中调用它
- 如何调用两个函数是一种html输入类型
- 如何在视图中保存用户输入内容,并在离开页面时对控制器进行后期调用
- 提交按钮只能在onchange调用输入文本后第二次点击时工作
- 调用时未输入角度 ng 单击函数
- 如何将JSP文件中的用户输入调用到Java文件中
- 在MobileFirst javascript适配器中使用xml输入调用DB存储过程
- 使用按钮和来自文本框的输入调用 javascript 函数
- 根据用户输入调用 jsp 文件
- 对文本框中的传递输入调用函数
- 为每个表单输入调用jQuery函数
- 在Bootstrap Modal中对输入调用jQuery函数
- 在Safari中,第一次对输入调用.focus()会延迟
- 如何从动态表单输入调用特定元素
- 引导预先输入调用ColdFusion