使用地图地理定位或任何当前位置方法设置纬度和经度自动[重复]答案

【问题标题】：Set lat and long auto using map geolocation or any current location method [duplicate]使用地图地理定位或任何当前位置方法设置纬度和经度自动[重复]
【发布时间】：2019-12-07 15:55:25
【问题描述】：

我有这个工作代码。我的问题是如何更改基于当前位置的长纬度位置。现在它是手动的。如何从表输入中获取变量或地理位置？

$(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);     
    }
});

我需要更改的唯一代码是长纬度。

 var mapCenter = new google.maps.LatLng(47.6145, -122.3418); //Google map Coordinates

我尝试使用从 div 获得但无法插入到 long lat 的变量。地图不显示。

var long = $("#a").value();
var lat = $("#a").value();
var mapCenter = new google.maps.LatLng(a, b);

【问题讨论】：

标签： php google-maps google-maps-api-3

【解决方案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 trying to send a value via JQuery

(jquery中没有名为value的函数，应该是$('#m').val())

根据上述问题解决该问题，它可以工作。

proof of concept fiddle

代码 sn-p：

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>

【讨论】：