javascript - 单击按钮时出现在谷歌地图中显示自动完成器地址的问题?
问题描述
我在页面上添加了谷歌地图代码。您可以在页面https://artificialgrass.lazylawn.ca/estimate/上查看它 没有显示我在代码中设置的缩放 (20) 中的搜索位置。如果我再次搜索地址,则会显示。我可以在按钮单击时加载地图吗?我正在使用以下谷歌地图代码。
var map, measureTool;
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 initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 43.6916507,
lng: -79.41045
},
mapTypeId: google.maps.MapTypeId.SATELLITE,
zoom: 20,
scaleControl: true
});
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
for (var component in componentForm) {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}
// Get each component of the address from the place details,
// and then fill-in the corresponding field on the form.
for (var i = 0; i < places[0]['address_components'].length; i++) {
var addressType = places[0]['address_components'][i].types[0];
if (componentForm[addressType]) {
var val = places[0]['address_components'][i]
[componentForm[addressType]];
document.getElementById(addressType).value = val;
}
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var 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(25, 25)
};
// Create a marker for each place.
markers.push(new google.maps.Marker({
map: map,
icon: icon,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
measureTool = new MeasureTool(map, {
contextMenu: true,
showSegmentLength: true,
tooltip: true,
unit: MeasureTool.UnitTypeId.IMPERIAL,
// metric, imperial, or nautical
});
// test for setting units
// measureTool.setOption('unit', MeasureTool.UnitTypeId.METRIC);
measureTool.addListener('measure_start', () => {
console.log('started');
// measureTool.removeListener('measure_start')
});
measureTool.addListener('measure_end', (e) => {
console.log('ended', e.result);
// measureTool.removeListener('measure_end');
var area2 = e.result['area'].toFixed(2);
document.getElementById("selected_area").value = area2;
document.getElementById("area_size").value = area2;
});
measureTool.addListener('measure_change', (e) => {
console.log('changed', e.result);
});
}
document.getElementById("get-start").onclick = function() {
document.getElementById("maparea").style.display = 'block';
}
解决方案
得到了解决方案。
<script>
var map, measureTool;
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 initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 43.6916507, lng: -79.41045 },
mapTypeId:google.maps.MapTypeId.SATELLITE,
zoom: 20,
scaleControl: true
});
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
var searchBtn = document.getElementById('get-start');
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
});
searchBtn.onclick = function () {
document.getElementById("maparea").style.display = 'block';
displaySearchResults(map,searchBox,markers);
}
measureTool = new MeasureTool(map, {
contextMenu: true,
showSegmentLength: true,
tooltip: true,
unit: MeasureTool.UnitTypeId.METRIC,
// metric, imperial, or nautical
});
// test for setting units
// measureTool.setOption('unit', MeasureTool.UnitTypeId.METRIC);
measureTool.addListener('measure_start', () => {
console.log('started');
// measureTool.removeListener('measure_start')
});
measureTool.addListener('measure_end', (e) => {
console.log('ended', e.result);
// measureTool.removeListener('measure_end');
var area2 = e.result['area'].toFixed(2);
document.getElementById("selected_area").value= area2;
});
measureTool.addListener('measure_change', (e) => {
console.log('changed', e.result);
});
}
function displaySearchResults(map, searchBox, markers) {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
for (var component in componentForm) {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}
// Get each component of the address from the place details,
// and then fill-in the corresponding field on the form.
for (var i = 0; i < places[0]['address_components'].length; i++) {
var addressType = places[0]['address_components'][i].types[0];
if (componentForm[addressType]) {
var val = places[0]['address_components'][i][componentForm[addressType]];
document.getElementById(addressType).value = val;
}
}
// Clear out the old markers.
markers.forEach(function (marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function (place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var 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(25, 25)
};
// Create a marker for each place.
markers.push(new google.maps.Marker({
map: map,
icon: icon,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
}
</script>
推荐阅读
- php - Monolog 没有写入正确的日志文件
- r - 具有多个条件的行和
- node.js - 如何为使用 nodejs 的 Watson Assistant API 查找 ibm-watson 的 api-key 和密码
- python-3.x - 计算文本中不包括缩进的空格数
- javascript - 当我使用 renderItme 时,react-native-snap-carousel 返回“无法读取未定义的属性‘concat’”
- javascript - 过滤使用 readdirp 读取的文件
- c++ - 将窗口的样式从标准更改为没有标题栏并返回
- sql - 如何获取我的批量更新 SQL Server 的 ID
- javascript - 如何处理给定纸张上的打印发票。20 件/张,如果超过限制,则应转到下一页。最后一页的总金额
- xslt-2.0 - 我们有 XSLT 的代码覆盖工具吗