如何使用谷歌地图javascript答案

【问题标题】：how to make use of google map javascript如何使用谷歌地图javascript
【发布时间】：2016-04-13 02:09:11
【问题描述】：

我需要有关如何在页面上显示谷歌地图的帮助。我使用了开发人员谷歌控制台的示例代码，我从他们那里获得了一个密钥，但是当我加载 html 文件时没有显示任何内容。

javascript代码如下

// Reference to the Firebase database.
var firebase = new Firebase("http://firebaseio.com");

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 0, lng: 0},
    zoom: 3
  });

  // Add marker on user click
  map.addListener('click', function(e) {
    firebase.push({lat: e.latLng.lat(), lng: e.latLng.lng()});
  });

  // Create a heatmap.
  var heatmap = new google.maps.visualization.HeatmapLayer({
    data: [],
    map: map,
    radius: 8
  });

  firebase.on("child_added", function(snapshot, prevChildKey) {
    // Get latitude and longitude from Firebase.
    var newPosition = snapshot.val();

    // Create a google.maps.LatLng object for the position of the marker.
    // A LatLng object literal (as above) could be used, but the heatmap
    // in the next step requires a google.maps.LatLng object.
    var latLng = new google.maps.LatLng(newPosition.lat, newPosition.lng);
    
    heatmap.getData().push(latLng);
  });
}

html代码如下

<!DOCTYPE html>
<html>

  <head>

    <style type="text/css">
      html, body { height: 100%; margin: 0; padding: 0; }
      #map { height: 100%; }
    </style>

<script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script>

</head>

<body>
    <div id="map"></div>

    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC7Zr0DZ906x5OH2ODTJZ-O2CxO00khPnI&libraries=visualization&callback=initMap">

    </script>
    <script src="map.js"> </script>
  </body>
</html>

【问题讨论】：

我刚刚用记事本保存了 html 和 javascript 代码，我在本地而不是远程运行。
谷歌地图在本地服务器上不起作用，如果你连接到互联网然后工作正常..

标签： javascript java php android jakarta-ee

【解决方案1】：

使用以下代码在您的网页上显示谷歌地图。

<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>

<script>
function initialize() {
  var mapProp = {
    center:new google.maps.LatLng(51.508742,-0.120850),
    zoom:5,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>

</body>
</html>

用LatLng()替换经纬度；

【讨论】：

这个答案帮助我显示了地图，我并没有真正理解第二个答案。谢谢，但请，这是最后一年的项目，我需要点击数据库，并显示一些文本和文本字段，这可能吗？

【解决方案2】：

这里我举了一个我开发的例子，用于从地图中保存 lng 和 lat 并在从视图页面中选择用户时显示相同的内容。

首先，使用脚手架创建一个项目，然后在您的 _form 文件和显示文件中添加以下内容，确保您使用 div id 来调用 java/script：

    <script src="//maps.google.com/maps/api/js?v=3.18&sensor=false&client=&key=&libraries=geometry&language=&hl=&region="></script> 
    <script src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js"></script>

这里是存储lng和lat的java脚本：

    <script type="text/javascript">

    var map;
        function initialize() {
            var myLatlng = new google.maps.LatLng(24.18061975930,79.36565089010);
            var myOptions = {
                zoom:7,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            map = new google.maps.Map(document.getElementById("map"), myOptions);
            // marker refers to a global variable
            marker = new google.maps.Marker({
                position: myLatlng,
                map: map
            });

            google.maps.event.addListener(map, "click", function(event) {
                // get lat/lon of click
                var clickLat = event.latLng.lat();
                var clickLon = event.latLng.lng();

                // show in input box
                document.getElementById("lat").value = clickLat.toFixed(5);
                document.getElementById("lon").value = clickLon.toFixed(5);

                  var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(clickLat,clickLon),
                        map: map
                     });
            });
    }   

        window.onload = function () { initialize() };

    </script>

在显示页面中添加以下内容：

    <script type="text/javascript">

    var map;
        function initialize() {
            var myLatlng = new google.maps.LatLng("<%= @person.latitude %>","<%= @person.longitude %>");
            var myOptions = {
                zoom:7,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            map = new google.maps.Map(document.getElementById("map"), myOptions);
            // marker refers to a global variable
            marker = new google.maps.Marker({
                position: myLatlng,
                map: map
            });
    }   

        window.onload = function () { initialize() };

    </script>

最后在您的索引页面上添加以下内容：

<script>
    markers = handler.addMarkers(<%=raw @hash.to_json %>);
</script>

【讨论】：

拜托，似乎第二个答案是关于 json 什么的，我只能尝试 java，想在地图页面上显示一些文本和表单。在 j2ee 1.4 上帮助我。我怎样才能通过标记跟踪位置来使地图响应
您可以使用以下链接，其中有一些使地图响应的示例ostraining.com/blog/coding/responsive-google-maps
同样在上面的答案中很抱歉我不能给你清晰的视图。这个例子的工作就像当你点击地图时，它会在文本字段中显示 lng 和 lat，然后存储在数据库中。 java/script 可以使用任何语言，数据库是 postgres