將經度和緯度傳遞給javascript函數，並從Google地圖獲取視圖

Question

我正在使用天氣數據來實現一個PHP網站。 我想知道如何通過JavaScript onClick事件從HTML元素傳遞緯度和經度值。 我已使用以下代碼獲取Google地圖：

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
   <style type="text/css">
     html { height: 100% }
     body { height: 100%; margin: 0; padding: 0 }
     #map_canvas { height: 100% }
   </style>
   <script type="text/javascript"  src="http://maps.googleapis.com/maps/api/js?key*****************&sensor=true"></script>
   <script type="text/javascript">
      function initialize() {
         var myOptions = {
         center: new google.maps.LatLng(-34.397, 150.644),
         zoom: 8,
         mapTypeId: google.maps.MapTypeId.ROADMAP
       };
       var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
    }
   </script>
</head>
<body>
   <p onClick="initialize()">Search</p>
   <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

在上面的代碼中，緯度和經度坐標位於JavaScript函數內部。 但是，我想要這樣的HTML段落標記：

<p onClick=".....">6.234235, 34.234345</p>

我想將上述值作為URl傳遞給：

https://www.google.lk/maps/@[lat],[long]

有誰知道如何將這樣的URL傳遞給上面的函數？

Answer 1

一種可能的方法是從<p>節點收集坐標並將其解析為Google Maps Initialize函數。

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
   <style type="text/css">
     html { height: 100% }
     body { height: 100%; margin: 0; padding: 0 }
     #map_canvas { height: 100% }
   </style>
   <script type="text/javascript"  src="http://maps.googleapis.com/maps/api/js?key*****************&sensor=true"></script>
   <script type="text/javascript">
      function initialize() {
         var coords = document.getElementById('coords').innerHTML.split(",");
         var lat = coords[0];
         var lng = coords[1];

         var myOptions = {
         center: new google.maps.LatLng(lat, lng),
         zoom: 8,
         mapTypeId: google.maps.MapTypeId.ROADMAP
       };
       var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

       var myMarkerLatlng = new google.maps.LatLng(lat,lng);
       var marker = new google.maps.Marker({
           position: myMarkerLatlng,
           map: map,
           title: 'Hello World!'
       });
    }
   </script>
</head>
<body>
   <p onClick="initialize()">Search</p>
     <p id="coords" onClick="initialize()">6.234235, 34.234345</p>
   <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

Answer 2

這有點晚了，但是我在尋找自己的答案時偶然發現了這一點。 我根據在這里學到的知識找到了解決方案：

在標記中：

<div id="map" data-lat="<?php echo $locationInfo[0]['lat']; ?>" data-lon="<?php echo $locationInfo[0]['lng']; ?>"></div>

用Javascript：

var themap = document.getElementById('map');

    //console.log('lat: ' +themap.dataset.lat);
    //console.log('lon: ' +themap.dataset.lon);
    var myOptions = {
    center: new google.maps.LatLng(themap.dataset.lat, themap.dataset.lon),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}

我尚未在您的代碼中對其進行測試，但這對我有用。

Answer 3

要從p標記中獲取值以及一個ID，並將其包含在您的initialize（）函數中：

var latLng = document.getElementById('yourId').innerHTML.split[', '];
    var myOptions = {
    center: new google.maps.LatLng(latLng[0], latLng[1]),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}

如果您有多個p標記，用戶可以單擊它們在不同位置的位置，請設置一個事件偵聽器，並在事件對象而不是document.getElementById（）上調用getSource（）。

將經度和緯度傳遞給javascript函數，並從Google地圖獲取視圖

問題描述

3 個解決方案

解決方案1
3 已采納 2014-07-07 13:49:20

解決方案2
1 2015-08-12 13:51:26

解決方案3
0 2014-07-07 13:50:31

將經度和緯度傳遞給javascript函數，並從Google地圖獲取視圖

問題描述

3 個解決方案

解決方案1 3 已采納 2014-07-07 13:49:20

解決方案2 1 2015-08-12 13:51:26

解決方案3 0 2014-07-07 13:50:31

解決方案1
3 已采納 2014-07-07 13:49:20

解決方案2
1 2015-08-12 13:51:26

解決方案3
0 2014-07-07 13:50:31