将经度和纬度传递给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