单击表单中的按钮输入时如何更改 google 地图

Question

我有这个工作代码，我的问题是当我点击地理定位按钮时，地图没有根据输入值加载。如何制作成jquery？，当点击按钮时它不刷新页面只改变地图？

   <p>Click the button to get your coordinates.</p>

    <button onclick="getLocation()">Try It</button>

    <input id="lat" value="47.6145" />
    <input id="lng" value="-122.3418" />
    <div id="google_map"></div>


    <!-- Replace the value of the key parameter with your own API key. -->
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
    <script>


    function getLocation() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
      } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
      }
    }

    function showPosition(position) {

         $('#lat').val(position.coords.latitude);
        $('#lng').val(position.coords.longitude);
         //location.reload();

      x.innerHTML = "<p id='babi'>Latitude: " + position.coords.latitude + 
      "</p><br><p id='setan'>Longitude: " + position.coords.longitude +"</p>";
    }

    $(document).ready(function() {
    var lng = $("#lng").val();
    var lat = $("#lat").val();
    var mapCenter = new google.maps.LatLng(lat, lng);
    // var mapCenter = new google.maps.LatLng(47.6145, -122.3418); //Google map Coordinates
        var map;
        map_initialize(); // load map
        function map_initialize(){

            //Google map option
            var googleMapOptions = 
            { 
                center: mapCenter, // map center
                zoom: 17, //zoom level, 0 = earth view to higher value
                panControl: true, //enable pan Control
                zoomControl: true, //enable zoom control
                zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL //zoom control size
            },
                scaleControl: true, // enable scale control
                mapTypeId: google.maps.MapTypeId.ROADMAP // google map type
            };

            map = new google.maps.Map(document.getElementById("google_map"), googleMapOptions);     
        }
    });

    </script>

下面是 link 的工作示例 https://jsfiddle.net/designblog4u/v7ofhem4/4/

点击按钮后下面的代码不会改变:

var lng = $("#lng").val();
var lat = $("#lat").val();
var mapCenter = new google.maps.LatLng(lat, lng);

Answer 1

您正在搜索 map.setCenter(latlng)

function showPosition(position) {    
  $('#lat').val(position.coords.latitude);
  $('#lng').val(position.coords.longitude);

  map.setCenter(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));    
  ...
}

Fiddle

单击表单中的按钮输入时如何更改 google 地图

How to change a google map when click button input from form

jquery

google-maps

google-maps-api-3