- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
据我所知,Google 的地址自动完成不会将街道号码和路线(街道名称)合并到一个字段中。我想以我的形式这样做,但我的结果是 NaN。这是我的代码:
<head>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
<script src="js/ass5.js"></script>
<link type="text/css" href="css/ass5.css" rel="stylesheet">
</head>
<body onload="initialize()">
<div id="locationField">
<input id="autocomplete" placeholder="Enter your address"
onFocus="geolocate()" type="text"></input>
</div>
<table id="address">
<tr>
<td>Address</td>
<td colspan="3"><input class="field" id="address" disabled="true"></input></td>
</tr>
<tr>
<td class="label">Street address</td>
<td class="slimField"><input class="field" id="street_number"
disabled="true"></input></td>
<td class="wideField" colspan="2"><input class="field" id="route"
disabled="true"></input></td>
</tr>
<tr>
<td class="label">City</td>
<td class="wideField" colspan="3"><input class="field" id="locality"
disabled="true"></input></td>
</tr>
<tr>
<td class="label">State</td>
<td class="slimField"><input class="field"
id="administrative_area_level_1" disabled="true"></input></td>
<td class="label">Zip code</td>
<td class="wideField"><input class="field" id="postal_code"
disabled="true"></input></td>
</tr>
<tr>
<td class="label">Country</td>
<td class="wideField" colspan="3"><input class="field"
id="country" disabled="true"></input></td>
</tr>
</table>
</body>
和javascript:
var placeSearch, autocomplete;
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name',
postal_code: 'short_name'
};
function initialize() {
// Create the autocomplete object, restricting the search
// to geographical location types.
autocomplete = new google.maps.places.Autocomplete(
/** @type {HTMLInputElement} */(document.getElementById('autocomplete')),
{ types: ['geocode'] });
// When the user selects an address from the dropdown,
// populate the address fields in the form.
google.maps.event.addListener(autocomplete, 'place_changed', function() {
fillInAddress();
});
}
// [START region_fillform]
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
for (var component in componentForm) {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}
// combine street_number and route to become address
var newAddress = place.address_components.street_number + place.address_components.route;
var el = document.getElementById('address');
el.textContent = newAddress;
// Get each component of the address from the place details
// and fill the corresponding field on the form.
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
}
}
}
// [END region_fillform]
// [START region_geolocation]
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = new google.maps.LatLng(
position.coords.latitude, position.coords.longitude);
var circle = new google.maps.Circle({
center: geolocation,
radius: position.coords.accuracy
});
autocomplete.setBounds(circle.getBounds());
});
}
}
// [END region_geolocation]
最佳答案
html
<head>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
<script src="js/finalproject.js"></script>
<link type="text/css" href="css/ass5.css" rel="stylesheet">
</head>
<body onLoad="initialize()">
<div id="locationField">
<input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text"></input>
</div>
<input type="hidden" class="field" id="street_number" disabled="true"></input>
<input type="hidden" class="field" id="route" disabled="true"></input>
<input type="hidden" class="field" id="country" disabled="true"></input>
<table id="address">
<tr>
<td class="label">Street address</td>
<td class="wideField" colspan="2"><input class="field" id="address1" disabled="true"></input></td>
</tr>
<tr>
<td class="label">City</td>
<td class="wideField" colspan="3"><input class="field" id="locality" disabled="true"></input></td>
</tr>
<tr>
<td class="label">State</td>
<td class="slimField"><input class="field" id="administrative_area_level_1" disabled="true"></input></td>
<td class="label">Zip code</td>
<td class="wideField"><input class="field" id="postal_code" disabled="true"></input></td>
<tr>
<td class="label">Phone Number</td>
<td class="wideField"><input class="field" id="phone"></input></td>
</tr>
</tr>
</table>
</body>
Javascript
var placeSearch, autocomplete;
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name',
postal_code: 'short_name'
};
function initialize() {
// Create the autocomplete object, restricting the search
// to geographical location types.
autocomplete = new google.maps.places.Autocomplete(
/** @type {HTMLInputElement} */(document.getElementById('autocomplete')),
{ types: ['geocode'] });
// When the user selects an address from the dropdown,
// populate the address fields in the form.
google.maps.event.addListener(autocomplete, 'place_changed', function() {
fillInAddress();
});
}
// [START region_fillform]
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
for (var component in componentForm) {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}
// combine street_number and route to become address
/*
var newAddress = place.address_components.street_number + place.address_components.route;
var el = document.getElementById('address');
el.textContent = newAddress;
*/
// Get each component of the address from the place details
// and fill the corresponding field on the form.
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
}
}
document.getElementById('address1').value =
place.address_components[0]['long_name'] + ' ' +
place.address_components[1]['long_name'];
}
// [END region_fillform]
// [START region_geolocation]
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = new google.maps.LatLng(
position.coords.latitude, position.coords.longitude);
var circle = new google.maps.Circle({
center: geolocation,
radius: position.coords.accuracy
});
autocomplete.setBounds(circle.getBounds());
});
}
}
// [END region_geolocation]
关于javascript - 在地址自动完成 api 中结合街道号码和路线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31364880/
我正在尝试使用 html5 创建一个世界,或者更确切地说以第一人称视角创建一条街道,而不使用 WebGL。 不幸的是,我找不到任何可以使用的引擎。有谁知道可以做到这一点的引擎,还是我必须自己编写引擎?
在我的 Android 应用程序中,我包含了谷歌地图。现在我想获取有关您周围地区的信息。例如,你是在公园/森林/海滩……所以我基本上想要一个用“水”回答输入坐标 53°33'40.9"N 10°00'
在 9535 上发出的 HERE 自动完成 API 请求返回 5 个结果,这些结果都与结果类型 street 匹配,而不是像 Google 那样匹配 postalCode默认情况下的 map 。例如
我正在考虑一个项目,我需要标题中描述的信息。 Google Maps API 是否提供此类信息,或者有人知道如何获取这些信息吗? 项目将使用 PHP、HTML 和 Javascript 完成。 最佳答
如果地址可以由子元素组成:Street、City、State、PostalCode...您如何允许此 XML: Somestreet zip
有没有办法使用 Google Maps API V3 突出显示指定的道路或街道? 这是我想要获取的示例(来自在谷歌中搜索某个地方的图像):example 样式化 map 不能满足我的要求,因为它适用于
我想创建一个应用程序来跟踪安装我的应用程序的用户,因此我有以下用于跟踪的代码,该代码运行良好,但它只会返回城市名称。但我需要完整的详细信息,例如街道名称、城市,等等。 public class
我正在创建一项服务,用户可以在其中访问世界任何地方的地址。首先,我认为 Google Places API 会很高兴,但看看这张图片(下图),问题是如何以正确的顺序过滤掉国家、城镇、街道地址。首先,我
如何将 ESRI 街道 map ( https://leaflet-extras.github.io/leaflet-providers/preview/#filter=Esri.WorldStree
一个简短的问题,希望有人能解答: 如何使用 Here Android SDK Premium 导航通过 DIR_NO_CARS、NO_THROUGH_TRAFFIC、DIR_NO_TRUCKS 属性的
我正在开发 Google 地点自动完成服务,我需要过滤特定于国家/地区的地点! 引用网站:-- https://www.grubhub.com (特定国家/地区、城邦-邮政编码) 我找到了一个例子:-
我有两个 PCollections:一个从 Pub/Sub 中提取信息,另一个从 CSV 文件中提取数据。在每个管道中进行一些不同的转换之后,我想将两者合并到它们共享的公共(public) key “
DSMOD 似乎没有能力更新用户的这部分 AD 属性(街道、邮政信箱、城市、州、邮政编码)。有没有我可以从 powershell 或 cmd 运行的命令行替代方案? 动机:我正在尝试用特定的用户信息填
DSMOD 似乎没有能力更新用户的这部分 AD 属性(街道、邮政信箱、城市、州、邮政编码)。有没有我可以从 powershell 或 cmd 运行的命令行替代方案? 动机:我正在尝试用特定的用户信息填
我想在 OSM 中的两点之间画一条线,但我找不到任何可以帮助我的东西。像 googlemap 中的 Polyline 之类的东西。 public class MainActivity extends
我正在使用 PKPaymentAuthorizationViewController 及其委托(delegate)方法集成 Apple Pay。当用户更改地址时,将触发以下委托(delegate)方法
我需要使用 Xamarin Forms/Android 的 Intent 以编程方式打开 Android 联系人应用程序。当“添加新联系人” Activity/屏幕出现时,我想用以下字段预先填充它:
我是一名优秀的程序员,十分优秀!