Question

这里我使用谷歌地图API，在页面加载时间地图工作正常，但我的要求是当我点击定位我按钮，时间地图应该显示我尝试了很多，但我无法做，任何一个请更新我的代码。在我正在尝试的病房，但我没有得到我的答案，我是发展领域的新人

 function addressinitialize() {
        var input = document.getElementById('searchTextField');
        var autocomplete = new google.maps.places.Autocomplete(input);
        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            var place = autocomplete.getPlace();
          
            console.log('Place Object',place)
            console.log(place.geometry.location.lat());
            console.log(place.geometry.location.lng());

            $('#latitude').val(place.geometry.location.lat());
            $('#longitude').val(place.geometry.location.lng());
        });
        }
        google.maps.event.addDomListener(window, 'load', addressinitialize);
function initialize() {
        var input = document.getElementById('searchTextField');
        var autocomplete = new google.maps.places.Autocomplete(input);
        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            var place = autocomplete.getPlace();
          
            console.log('Place Object',place)
            console.log(place.geometry.location.lat());
            console.log(place.geometry.location.lng());

            $('#latitude').val(place.geometry.location.lat());
            $('#longitude').val(place.geometry.location.lng());
        });
        }
        google.maps.event.addDomListener(window, 'load', initialize);
            var lat = $('#latitude').val();
            var lng = $('#longitude').val();
            var map;
            var marker;
            var myLatlng = new google.maps.LatLng(lat,lng);
            var geocoder = new google.maps.Geocoder();
            var infowindow = new google.maps.InfoWindow();

            function mapinitialize(){

                var mapOptions = {
                    zoom: 18,
                    center: myLatlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
           
                map = new google.maps.Map(document.getElementById("myMap"), 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]) {
                            $('#address').val(results[0].formatted_address);
                            $('#latitude').val(marker.getPosition().lat());
                            $('#longitude').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]) {
                            $('#address').val(results[0].formatted_address);
                            $('#latitude').val(marker.getPosition().lat());
                            $('#longitude').val(marker.getPosition().lng());
                            infowindow.setContent(results[0].formatted_address);
                            infowindow.open(map, marker);
                        }
                    }
                });
            });
            
            }
            
            google.maps.event.addDomListener(window, 'load', mapinitialize);

            function myFunction() {
                var panPoint = new google.maps.LatLng(document.getElementById("latitude").value, document.getElementById("longitude").value);
                map.panTo(panPoint);
             }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBwuev6Dj8Xvo7fePYs2YJ8KA84xxBCIUo&libraries=places"></script>
<input type="PickupAddress" class="form-control" name="PickupAddress" placeholder="Sublocality" id="searchTextField" autocomplete="on" runat="server" required="" data-msg-required="Please enter Pick up Address" aria-required="true" > &nbsp;&nbsp;&nbsp;&nbsp;<button onclick="myFunction();document.getElementById('map').style.visibility = 'visible'">Locate Me</button>

<div class="col-md-8" style="padding-left: 0px;visibility:hidden" id="map">

<label>Locate your Flat-room-mate on the map:</label>
<br><br><br>


<div id="myMap" style="height:400px;width:100%;"></div>
    <br/>
        <div class="col-md-12" style="padding-left:0px;">
           ADDRESS:  <input id="address" name="address"  type="text" style="width:100%;" class="form-control border" />
            LATITUDE:  <input type="text" name="latitude" id="latitude"> <br>
            LONGITUDE:  <input type="text" name="longitude" id="longitude">
        </div>
    <br>
</div>

Answer 1

visibility:hidden上的map然后点击visible button {/ 1>}

function addressinitialize() {
        var input = document.getElementById('searchTextField');
        var autocomplete = new google.maps.places.Autocomplete(input);
        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            var place = autocomplete.getPlace();
          
            console.log('Place Object',place)
            console.log(place.geometry.location.lat());
            console.log(place.geometry.location.lng());

            $('#latitude').val(place.geometry.location.lat());
            $('#longitude').val(place.geometry.location.lng());
        });
        }
google.maps.event.addDomListener(window, 'load', addressinitialize);
function displayMap() {
  document.getElementById('myMap').style.display = "block";
  initialize();
  mapinitialize();
    var panPoint = new google.maps.LatLng(document.getElementById("latitude").value, document.getElementById("longitude").value);
  map.panTo(panPoint);
}

function initialize() {
  var input = document.getElementById('searchTextField');
  var autocomplete = new google.maps.places.Autocomplete(input);
  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    var place = autocomplete.getPlace();

    console.log('Place Object', place)
    console.log(place.geometry.location.lat());
    console.log(place.geometry.location.lng());

    $('#latitude').val(place.geometry.location.lat());
    $('#longitude').val(place.geometry.location.lng());
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

var lat = "12.9536392";
var lng = "77.69512600000007";
var map;
var marker;
var myLatlng = new google.maps.LatLng(lat, lng);
var geocoder = new google.maps.Geocoder();
var infowindow = new google.maps.InfoWindow();

function mapinitialize() {

  var mapOptions = {
    zoom: 18,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("myMap"), 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]) {
        $('#address').val(results[0].formatted_address);
        $('#latitude').val(marker.getPosition().lat());
        $('#longitude').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]) {
          $('#address').val(results[0].formatted_address);
          $('#latitude').val(marker.getPosition().lat());
          $('#longitude').val(marker.getPosition().lng());
          infowindow.setContent(results[0].formatted_address);
          infowindow.open(map, marker);
        }
      }
    });
  });

}

#myMap {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBwuev6Dj8Xvo7fePYs2YJ8KA84xxBCIUo&libraries=places"></script>

<input type="PickupAddress" class="form-control" name="PickupAddress" placeholder="Sublocality" id="searchTextField" autocomplete="on" runat="server" required="" data-msg-required="Please enter Pick up Address" aria-required="true"> &nbsp;&nbsp;&nbsp;&nbsp;
<button onclick="displayMap();">Locate Me</button>

<div class="col-md-8" style="padding-left: 0px;" id="map">

  <label>Locate your Flat-room-mate on the map:</label>
  <br><br><br>


  <div id="myMap" style="height:400px;width:100%;"></div>
  <br/>
  <div class="col-md-12" style="padding-left:0px;">
    ADDRESS: <input id="address" name="address" type="text" style="width:100%;" class="form-control border" /> LATITUDE: <input type="text" name="latitude" id="latitude"> <br> LONGITUDE: <input type="text" name="longitude" id="longitude">
  </div>
  <br>
</div>

Answer 2

简化解决方案：

＆＃13;

$(document).ready(function() {
  var input = document.getElementById('searchTextField');
  var autocomplete = new google.maps.places.Autocomplete(input);
  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    var place = autocomplete.getPlace();
    $('#latitude').val(place.geometry.location.lat());
    $('#longitude').val(place.geometry.location.lng());
  });
  createMap();
});

function createMap() {
  var lat = $('#latitude').val();
  var lng = $('#longitude').val();
  var map;
  var marker;
  var myLatlng = new google.maps.LatLng(lat, lng);
  var geocoder = new google.maps.Geocoder();
  var infowindow = new google.maps.InfoWindow();

  var mapOptions = {
    zoom: 18,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("myMap"), 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]) {
        $('#address').val(results[0].formatted_address);
        $('#latitude').val(marker.getPosition().lat());
        $('#longitude').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]) {
          $('#address').val(results[0].formatted_address);
          $('#latitude').val(marker.getPosition().lat());
          $('#longitude').val(marker.getPosition().lng());
          infowindow.setContent(results[0].formatted_address);
          infowindow.open(map, marker);
        }
      }
    });
  });
}

＆＃13;

html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}

.mr10 {
  margin-right: 10px;
}

.search-panel {
  direction: ltr;
  overflow: hidden;
  text-align: center;
  position: relative;
  color: rgb(86, 86, 86);
  font-family: Roboto, Arial, sans-serif;
  user-select: none;
  font-size: 11px;
  background-color: rgb(255, 255, 255);
  padding: 8px;
  border-bottom-right-radius: 2px;
  border-top-right-radius: 2px;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
  min-width: 40px;
  border-left: 0px;
}

.details-div .col-md-12 {
  text-align: center;
}

#panel {
  position: absolute;
  top: 5px;
  right: 1%;
  margin-left: -180px;
  z-index: 5;
  background-color: #ffb052;
  border: 1px solid #999;
  color: #444;
  font-family: Arial;
}

.hidden {
  display: none
}

.w100 {
  width: 100%;
}

.mt10 {
  margin-top: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBwuev6Dj8Xvo7fePYs2YJ8KA84xxBCIUo&libraries=places"></script>

<div id="panel">
  <div class="search-panel">
    <input type="PickupAddress" class="form-control mr10" name="PickupAddress" placeholder="Sublocality" id="searchTextField" autocomplete="on" runat="server" required="" data-msg-required="Please enter Pick up Address" aria-required="true"><button onclick="createMap();$('.details-div').removeClass('hidden')">Locate Me</button>
    <div class="details-div mt10 hidden">
      <div class="col-md-12">
        <div> ADDRESS: <input id="address" name="address" type="text" class="form-control border" /></div>
        <div class="mt10"> LATITUDE: <input type="text" name="latitude" id="latitude"></div>
        <div class="mt10"> LONGITUDE: <input type="text" name="longitude" id="longitude"></div>
      </div>
      <br>
    </div>
  </div>
</div>

<div id="myMap" style="height:100%;width:100%;"></div>

＆＃13;

如何显示谷歌地图点击按钮

2 个答案: