将谷歌地图添加到我的网站上,带有搜索框和标记(点击),并获得lat&html输入框中的long
Add Google Maps to my website with a search box and markers (on click) and get lat & long in html input boxes
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>My_Google_Maps</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
.controls {
margin-top: 10px;
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;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 300px;
}
#pac-input:focus {
border-color: #4d90fe;
}
.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;
}
#target {
width: 345px;
}
</style>
</head>
<body>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map"></div>
<script>
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13,
mapTypeId: 'roadmap'
});
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
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)
};
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>
<script src="https://maps.googleapis.com/maps/api/js?key=My_API_Key&libraries=places&callback=initAutocomplete"
async defer></script>
</body>
</html>
我想用搜索框将谷歌地图添加到我的网站上(用标记(气球)显示地图上搜索到的地址),我们也可以点击地图中的任何地方(点击时必须去掉前一个标记,标记将出现在点击的位置(意味着地图上只应出现一个标记)。此外,我想将当前的纬度和经度(当前标记的确切位置)分别输入到两个不同的输入框中。
感谢任何帮助,提前感谢。
你可以试试这个。
var map = new google.maps.Map(document.getElementById('myMap'), {
center: {lat: -34.397, lng: 150.644},
zoom: 12
});
var myLatlng = new google.maps.LatLng(-34.397,150.644);
marker = new google.maps.Marker({
map: map,
position: myLatlng,
draggable: true,
icon: mapIcon
});
var input = (document.getElementById('pac-input'));
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
autocomplete.addListener('place_changed', function () {
marker.setVisible(false);
var place = autocomplete.getPlace();
if (!place.geometry) {
window.alert("Autocomplete's returned place contains no geometry");
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(12); // 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(' ');
}
//infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
infowindow.setContent(address);
infowindow.open(map, marker);
$('#latitude').val(place.geometry.location.lat());
$('#longitude').val(place.geometry.location.lng());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.20&sensor=false"></script>
<div id="myMap"></div>
<input type="text" name="delivery_location" placeholder="" class="form-control" id="pac-input" required>
<input type="hidden" id="latitude" placeholder="Latitude" name="latitude"/>
<input type="hidden" id="longitude" placeholder="Longitude" name="longitude"/>
相关文章:
- JavaScript函数未返回谷歌地图lat/long的值
- Possibile使用Manifest v2下的HTML5地理位置API将lat/long转换为国家/地区
- 如何在文本搜索后返回long/lat
- 获取给定lat-long的javascript中的当前日期和时间
- 使用Lat Long的气泡高地图
- 仅在JS中从LAT-LONG获取大陆
- 在工作灯中的Http适配器中检索Lat和Long
- 通过它查询谷歌地图上已经存在的标记's的lat和long,并以编程方式在其上触发一个单击事件
- 从SQlite中提取Lat-Long并在网络视图中显示
- 如何在谷歌地图上显示我的数据库地址,不带lat和long
- 打开图层3-将Lat Long转换为Point
- 谷歌地图方向URL与针在Lat/Long
- 将lat-long字符串转换为googlemaps API LatLng对象
- 如何使用lat-long作为参数捕捉到道路
- OpenLayers容器从lat/long的位置
- 谷歌地图Lat/Long finder脚本
- GoogleMaps和GeoIP:从IP获取Lat、Long并绘制地图
- 如何使用PHP来抓取这些内容,并且只获取lat/long
- 使用Long/Lat与谷歌地图API的方向准确性
- Openlayers OSM总是设置为(long/lat)(0/0)