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

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 都来自&nbsp;#a您正在创建var long，var lat但使用a和b我收到了 javascript 错误：&nbsp;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 {&nbsp; height: 100%;&nbsp; margin: 0;&nbsp; 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>&nbsp; $(document).ready(function() {&nbsp; &nbsp; var lng = $("#lng").val();&nbsp; &nbsp; var lat = $("#lat").val();&nbsp; &nbsp; var mapCenter = new google.maps.LatLng(lat, lng);&nbsp; &nbsp; //Google map Coordinates&nbsp; &nbsp; var map;&nbsp; &nbsp; map_initialize(); // load map&nbsp; &nbsp; function map_initialize() {&nbsp; &nbsp; &nbsp; //Google map option&nbsp; &nbsp; &nbsp; var googleMapOptions = {&nbsp; &nbsp; &nbsp; &nbsp; center: mapCenter, // map center&nbsp; &nbsp; &nbsp; &nbsp; zoom: 17, //zoom level, 0 = earth view to higher value&nbsp; &nbsp; &nbsp; &nbsp; panControl: true, //enable pan Control&nbsp; &nbsp; &nbsp; &nbsp; zoomControl: true, //enable zoom control&nbsp; &nbsp; &nbsp; &nbsp; zoomControlOptions: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style: google.maps.ZoomControlStyle.SMALL //zoom control size&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; scaleControl: true, // enable scale control&nbsp; &nbsp; &nbsp; &nbsp; mapTypeId: google.maps.MapTypeId.ROADMAP // google map type&nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; map = new google.maps.Map(document.getElementById("google_map"), googleMapOptions);&nbsp; &nbsp; }&nbsp; });</script>