在 GPS 上启动 Google 地图标记,但可拖动 - 填写表格
Start Google map Marker at GPS, but draggable - fills in form
我正在完成我正在做的一个项目,为了改进用户功能,我想要一个页面,浏览器可以在其中获取用户的当前位置 (geolocation()),并使用纬度和经度。但是,一旦发生这种情况,我希望在用户可以拖动的 google 地图上放置一个标记,当他们拖动它时,它会在表单中更新。我知道必须有办法做到这一点,但我不能完全让它工作。截至目前,我已经拥有了获取用户位置和填写表单字段的完整功能。不过,我有点为 Google API 苦苦挣扎。它没有帮助我不是很精通 Javascript(这些功能几乎是我在整个大型项目中使用的唯一 javascript)。附件是获取位置并填写输入字段的工作代码,然后我对 Google 地图 API 进行了第一次攻击,但失败了:缩放控件和街景拖动器,但它们什么都不做,因为它全是灰色的。
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
var x=document.getElementById("latitude");
var y=document.getElementById("longitude");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position) {
x.value=position.coords.latitude;
y.value=position.coords.longitude;
}
getLocation();
这里是失败的 google api 东西(请记住,这只是一个我认为行不通的黑客组合尝试)。我想知道 x 和 y 值是否没有立即填写,然后以某种方式被调用,因为如果我用纬度和经度而不是 x 和 y 进行硬编码,我会得到一个功能图,虽然,显然因为x 和 y 在那里没有被使用,它不会填回表格:
function initialize() {
var myLatlng = new google.maps.LatLng(x, y);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Finally, here's my two fields of the input form:
<p>
<i>Latitude:</i>
<input type="text" name="latitude" id="latitude" placeholder="latitude"><br>
</p>
<p>
<i>Longitude:</i>
<input type="text" name="longitude" id="longitude" placeholder="longitude"><br>
</p>
我似乎总是在我询问之后解决问题。经过更多挖掘,我发现此页面的最佳解决方案可针对我的项目进行定制。
Google Maps v3: need multiple draggable markers to update HTML input fields
这就是我要做的
<style>
#map-canvas {
height: 400px;
}
</style>
<div id="map-canvas"></div>
<p>
<i>Latitude:</i>
<input type="text" name="latitude" id="latitude" placeholder="latitude"><br>
</p>
<p>
<i>Longitude:</i>
<input type="text" name="longitude" id="longitude" placeholder="longitude"><br>
</p>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var x=document.getElementById("latitude");
var y=document.getElementById("longitude");
// Make sure you have a default. You don't know if geolocation will find the user's location
var defaultLocation = new google.maps.LatLng(50.84498962150941, 4.349988162517548); // Manneken Pis, Brussels
var map;
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
else {
x.innerHTML = "Geolocation is not supported by this browser.";
////maybe you want to set a marker on the map anyway.
// markerOnClientPosition(defaultLocation);
}
}
function showPosition(position) {
x.value = position.coords.latitude;
y.value = position.coords.longitude;
if (map) {
markerOnClientPosition(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
}
}
getLocation();
function initialize() {
//var myLatlng = new google.maps.LatLng(Number(x), Number(y)); //
var mapOptions = {
zoom: 10,
center: defaultLocation, // myLatlng,
mapTypeId: google.maps.MapTypeId.HYBRID
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function markerOnClientPosition(myLatlng) {
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
draggable: true,
title: 'You are here. Drag to exact location'
});
// attach a drag event
google.maps.event.addListener(marker, 'dragend', function() {
x.value = marker.getPosition().lat();
y.value = marker.getPosition().lng();
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
我正在完成我正在做的一个项目,为了改进用户功能,我想要一个页面,浏览器可以在其中获取用户的当前位置 (geolocation()),并使用纬度和经度。但是,一旦发生这种情况,我希望在用户可以拖动的 google 地图上放置一个标记,当他们拖动它时,它会在表单中更新。我知道必须有办法做到这一点,但我不能完全让它工作。截至目前,我已经拥有了获取用户位置和填写表单字段的完整功能。不过,我有点为 Google API 苦苦挣扎。它没有帮助我不是很精通 Javascript(这些功能几乎是我在整个大型项目中使用的唯一 javascript)。附件是获取位置并填写输入字段的工作代码,然后我对 Google 地图 API 进行了第一次攻击,但失败了:缩放控件和街景拖动器,但它们什么都不做,因为它全是灰色的。
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
var x=document.getElementById("latitude");
var y=document.getElementById("longitude");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position) {
x.value=position.coords.latitude;
y.value=position.coords.longitude;
}
getLocation();
这里是失败的 google api 东西(请记住,这只是一个我认为行不通的黑客组合尝试)。我想知道 x 和 y 值是否没有立即填写,然后以某种方式被调用,因为如果我用纬度和经度而不是 x 和 y 进行硬编码,我会得到一个功能图,虽然,显然因为x 和 y 在那里没有被使用,它不会填回表格:
function initialize() {
var myLatlng = new google.maps.LatLng(x, y);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Finally, here's my two fields of the input form:
<p>
<i>Latitude:</i>
<input type="text" name="latitude" id="latitude" placeholder="latitude"><br>
</p>
<p>
<i>Longitude:</i>
<input type="text" name="longitude" id="longitude" placeholder="longitude"><br>
</p>
我似乎总是在我询问之后解决问题。经过更多挖掘,我发现此页面的最佳解决方案可针对我的项目进行定制。
Google Maps v3: need multiple draggable markers to update HTML input fields
这就是我要做的
<style>
#map-canvas {
height: 400px;
}
</style>
<div id="map-canvas"></div>
<p>
<i>Latitude:</i>
<input type="text" name="latitude" id="latitude" placeholder="latitude"><br>
</p>
<p>
<i>Longitude:</i>
<input type="text" name="longitude" id="longitude" placeholder="longitude"><br>
</p>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var x=document.getElementById("latitude");
var y=document.getElementById("longitude");
// Make sure you have a default. You don't know if geolocation will find the user's location
var defaultLocation = new google.maps.LatLng(50.84498962150941, 4.349988162517548); // Manneken Pis, Brussels
var map;
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
else {
x.innerHTML = "Geolocation is not supported by this browser.";
////maybe you want to set a marker on the map anyway.
// markerOnClientPosition(defaultLocation);
}
}
function showPosition(position) {
x.value = position.coords.latitude;
y.value = position.coords.longitude;
if (map) {
markerOnClientPosition(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
}
}
getLocation();
function initialize() {
//var myLatlng = new google.maps.LatLng(Number(x), Number(y)); //
var mapOptions = {
zoom: 10,
center: defaultLocation, // myLatlng,
mapTypeId: google.maps.MapTypeId.HYBRID
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function markerOnClientPosition(myLatlng) {
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
draggable: true,
title: 'You are here. Drag to exact location'
});
// attach a drag event
google.maps.event.addListener(marker, 'dragend', function() {
x.value = marker.getPosition().lat();
y.value = marker.getPosition().lng();
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>