使用地图地理定位或任何当前位置方法设置纬度和经度自动

Question

我有这个工作代码。我的问题是如何更改基于长纬度位置的当前位置。现在它手动。如何从放入变量或地理位置的表输入中获取？$(document).ready(function() {    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);         }});我需要更改的唯一代码是 long lat。 var mapCenter = new google.maps.LatLng(47.6145, -122.3418); //Google map Coordinates我尝试使用从 div 获取但无法插入长经纬度的变量。地图不显示。var long = $("#a").value();var lat = $("#a").value();var mapCenter = new google.maps.LatLng(a, b);

Answer 1

当我使用发布的代码并修复明显的问题时：

• lat 和 long 都来自 #a

• 您正在创建var long，var lat但使用a和b

我收到了 javascript 错误： Uncaught TypeError: $(...).value is not a function

这导致了这个重复的问题：Uncaught TypeError: $(...).value is not a function when try to send a value via JQuery

（jquery中没有函数命名值。应该是$('#m').val()）

根据上述问题解决这个问题，它有效。

概念证明小提琴

代码片段：

代码片段：

html,

body,

#google_map {

  height: 100%;

  margin: 0;

  padding: 0;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<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>

  $(document).ready(function() {

    var lng = $("#lng").val();

    var lat = $("#lat").val();

    var mapCenter = new google.maps.LatLng(lat, lng);

    //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>