优步喜欢拖拽地图

uber like draggable map

本文关键字：地图 喜欢      更新时间：2023-09-26

我正在努力实现像uber一样的地图。它包含拾取位置标记，当我改变标记位置时，它会在我的fromaddress文本框上显示当前地址…但是当我在fromaddress文本框上输入一些地址时我也想改变地图上的标记位置

请谁来帮我做这件事

<script type="text/javascript"> 
var map;
var marker;
var myLatlng = new google.maps.LatLng('<?php echo $static_lat; ?>','<?php echo $static_lng; ?>');
var geocoder = new google.maps.Geocoder();
var infowindow = new google.maps.InfoWindow();
function initialize(){
var mapOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
marker = new google.maps.Marker({
map: map,
position: myLatlng,
draggable: true 
}); 
geocoder.geocode({'latLng': myLatlng }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
$('#fromlat,#fromlong').show();
$('#fromaddress').val(results[0].formatted_address);
$('#fromlat').val(marker.getPosition().lat());
$('#fromlong').val(marker.getPosition().lng());
infowindow.setContent(results[0].formatted_address);
infowindow.open(map, marker);
}
}
});
google.maps.event.addListener(marker, 'dragend', function() {
geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
$('#fromaddress').val(results[0].formatted_address);
$('#fromlat').val(marker.getPosition().lat());
$('#fromlong').val(marker.getPosition().lng());
infowindow.setContent(results[0].formatted_address);
infowindow.open(map, marker);
}
}
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

只需创建viewmap函数并在按下键后调用。

<script type="text/javascript">
  var map;
  var marker;
  var infowindow = new google.maps.InfoWindow();
  var geocoder = new google.maps.Geocoder();
  function initialize() {       
        var location = document.getElementById('PoolLocation');
        var autocomplete = new google.maps.places.Autocomplete(location);        
        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            var place = autocomplete.getPlace();
            //document.getElementById('PoolLocation').value = place.name;
            document.getElementById('PoolLatitude').value = place.geometry.location.lat();
            document.getElementById('PoolLongitude').value = place.geometry.location.lng();
            viewMap(place.geometry.location.lat(),place.geometry.location.lng());           
        }); 
    }
    function viewMap(lat,lng){     
        var myLatlng = new google.maps.LatLng(lat,lng);
        var myOptions = {
           zoom: 14,
           center: myLatlng,
           mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);        
        var marker = new google.maps.Marker({
        draggable: true,
        position: myLatlng, 
        map: map,
        title: "Your location"
        });
        var formatted_address = 'Select Pickup location';
        infowindow.setContent(formatted_address);
        infowindow.open(map, marker);
        google.maps.event.addListener(marker, 'dragend', function (event) {
          geocodePosition(marker.getPosition());
          document.getElementById("PoolLatitude").value = this.getPosition().lat();
          document.getElementById("PoolLongitude").value = this.getPosition().lng();        
      });
      function geocodePosition(pos) {
          var geocoder= new google.maps.Geocoder();
            geocoder.geocode({
              latLng: pos
            }, function(responses) {              
              if (responses && responses.length > 0) {
                  document.getElementById("PoolLocation").value = responses[0].formatted_address;
              }
            });
      }
    }   
    google.maps.event.addDomListener(window, 'load', initialize);
</script>
相关文章：