带有可拖动标记和输入框的谷歌地图搜索框

Google Maps search box with dragable marker and input box

本文关键字：谷歌 地图 图搜索 输入 拖动      更新时间：2023-09-26

我使用谷歌地图api，需要显示一个标记与搜索框，这个标记将使用我在我的数据库上的时间和时间，但会改变，如果拖拽或有人使用搜索框。我设法加载地图并将其放在坐标的中心，但它没有显示标记，在我使用搜索框后所有工作。我尝试在代码的开头添加一个标记，但没有成功，当我使用以下函数时，它创建了一个新的标记:

var mapOptions = {
        zoom: zoom,
        center: LatLng,
        panControl: false,
        zoomControl: false,
        scaleControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }    
    var map = new google.maps.Map(document.getElementById('map'),mapOptions);
    var latitude = ;
    var longitude = ;
    var zoom = "+MapZoom+";
    var LatLng = new google.maps.LatLng(51.501476, ‎-0.140634);
    var marker = new google.maps.Marker({
        position: LatLng,
        map: map,
        title: '"+Latitude+"',
        draggable: true
    });

这是我目前的代码，我相信我只是错过了一些东西，任何帮助将非常感激

function initialize() {
var markers = [];
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var defaultBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(51.501476, ‎-0.140634));
    map.fitBounds(defaultBounds);
var input = (document.getElementById('pacinput')
);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var searchBox = new google.maps.places.SearchBox((input));
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
  return;
}
for (var i = 0, marker; marker = markers[i]; i++) {
  marker.setMap(null);
}
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
  var marker = new google.maps.Marker({
    draggable: true,
    map: map,
    title: place.name,
    position: place.geometry.location
  });
  // drag response
  google.maps.event.addListener(marker, 'dragend', function(e) {
    displayPosition(this.getPosition());
  });
  // click response
  google.maps.event.addListener(marker, 'click', function(e) {
    displayPosition(this.getPosition());
  });
  markers.push(marker);
  bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
});
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
// displays a position on two <input> elements
function displayPosition(pos) {
document.getElementById('Latitude').value = pos.lat();
document.getElementById('Longitude').value = pos.lng();
}
}  
google.maps.event.addDomListener(window, 'load', initialize);
initialize();
</script>"

根据我的理解，你想在页面加载上标记到地图中心的同一位置，尝试使用这个 

var map;
var marker;
$(document).ready(function(){
    initialize();
    drawmarker();
    darggable();
});
function initialize() {
  var mapProp = {
    center:new google.maps.LatLng(51.508742,-0.120850),
    zoom:5,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

}
function drawmarker(){
    marker = new google.maps.Marker({
        position : new google.maps.LatLng(51.508742,-0.120850),
        title:"this s it",
        map : map,
        draggable:true,
    })
}

让你的标记为全局，现在使用方法拖动

function darggable(){
 google.maps.event.addListener(marker, 'dragend', function(e) {
                console.log(e.latLng.lat(),e.latLng.lng())
              });
}

现在你得到了latlng现在用它来显示在文本框

相关文章：