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

Question

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

$(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 获得的变量，但无法插入经纬度。地图不显示。

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

这导致了这个重复的问题：

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

根据上述问题修复该问题，它有效。

proof of concept fiddle

代码片段：

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>

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

Set lat and long auto using map geolocation or any current location method

php

google-maps

google-maps-api-3