谷歌地图在地图上预览选定的位置
Posted
技术标签:
【中文标题】谷歌地图在地图上预览选定的位置【英文标题】:Google map preview selected location on map 【发布时间】:2019-10-22 16:14:15 【问题描述】:我想让我的用户选择一个位置以及预览搜索到的位置以选择位置。
问题 我无法集成搜索框来预览搜索到的位置。
我正在使用的代码
<input type="text" id="search">
<div id="map"></div>
var map = document.getElementById('map');
var lp = new locationPicker(map,
setCurrentPosition: true,
lat: -13.9867852,
lng: 33.77027889
,
zoom: 15 // You can set any google map options here, zoom defaults to 15
);
// Listen to button onclick event
confirmBtn.onclick = function ()
var location = lp.getMarkerPosition();
var location = location.lat + ',' + location.lng;
console.log(location);
;
google.maps.event.addListener(lp.map, 'idle', function (event)
var location = lp.getMarkerPosition();
var location = location.lat + ',' + location.lng;
console.log(location);
);
如何启用输入以搜索位置并将其显示在地图上
编辑,已设法在输入上启用搜索,但无法将标记移动到所选位置
google.maps.event.addDomListener(window, 'load', initialize);
function initialize()
var input = document.getElementById('search');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.setComponentRestrictions('country':['mw']);
autocomplete.addListener('place_changed', function ()
var place = autocomplete.getPlace();
/*
console.log(place.geometry['location'].lat());
console.log(place.geometry['location'].lng());
console.log(place.name);
console.log(place.formatted_address);
console.log(place.vicinity);
console.log(place.url);
console.log(place.address_components);*/
if(!place.geometry)
return;
console.log(place);
);
【问题讨论】:
什么标记?我没有看到您在发布的代码中创建任何标记。请提供一个 minimal reproducible example 来证明该问题。 如果用户在字段中输入地址,地址应该会在地图上看到 - 这就是我想要做的 - 请帮助 【参考方案1】:请查看这个带有搜索框和地图的示例fiddle。当用户在自动完成输入中选择一个地点建议时,该示例会调用 getPlace() 方法,然后它会打开一个信息窗口以显示地点详细信息。
您可以创建一个信息窗口来显示一些地点的详细信息:
<input id="search" type="text" placeholder="Enter a location">
<div id="map"></div>
<div id="infowindow-content">
<img src="" id="place-icon">
<span id="place-name" class="title"></span><br>
<span id="place-address"></span>
</div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initialize" async defer></script>
</body>
在 initialize() 函数中,声明您的 infowindow
和 marker
对象,然后在用户选择自动完成地址建议时调用的 place_changed
侦听器中设置标记位置和信息窗口内容。
var map;
function initialize()
map = new google.maps.Map(document.getElementById('map'),
center: lat: -13.9867852, lng: 33.77027889,
zoom: 15
);
var input = document.getElementById('search');
var autocomplete = new google.maps.places.Autocomplete(input);
// Set the data fields to return when the user selects a place.
autocomplete.setFields(
['address_components', 'geometry', 'icon', 'name']);
autocomplete.setComponentRestrictions(
'country': ['mw']
);
var infowindow = new google.maps.InfoWindow();
var infowindowContent = document.getElementById('infowindow-content');
infowindow.setContent(infowindowContent);
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)
// User entered the name of a Place that was not suggested and
// pressed the Enter key, or the Place Details request failed.
window.alert("No details available for input: '" + place.name + "'");
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.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(' ');
infowindowContent.children['place-icon'].src = place.icon;
infowindowContent.children['place-name'].textContent = place.name;
infowindowContent.children['place-address'].textContent = address;
infowindow.open(map, marker);
);
您也可以从公共文档中查看此example。
希望这会有所帮助!
【讨论】:
我通过将 map obj 传递给自动完成来实现了一个,但我必须使用你的,因为它不是很好的实现。 它正在工作,但有两个错误,1 标记没有移动,仅在我输入位置时可用,第二我无法通过单击位置来选择位置,除非我输入位置。 - 点击地图没有给出位置 已添加google.maps.event.addListener(map, 'idle', function (event) );
来监听点击我如何获得 ['address_components', 'geometry', 'icon', 'name'] 和 latlng @Angelica以上是关于谷歌地图在地图上预览选定的位置的主要内容,如果未能解决你的问题,请参考以下文章
如何在没有谷歌地图 API 的情况下在我的应用程序中获取经度和纬度?