Question

我刚刚开始尝试开发一个网站，如果可以的话，我想保持html和javascript分开。我试图在地图上放置一个标记，将坐标放在文本框中作为表单的一部分，并在用户提交表单时将它们发送到数据库。代码在html文档中都有效，但是当我尝试将它分开时，它不起作用。嗯，地图仍然显示，我可以在上面设置一个标记，但它不能捕获坐标。

在html的头部

<script type="text/javascript" src="mapSubmitSighting.js"></script>
<body onload="initMap()">

在div中我希望js执行

<div id="map">
 <div class="map" onclick="initMap();"> 
<script defer
    src="https://maps.googleapis.com/maps/api/js?key==initMap"></script>  
    </div>

js文件

 !function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,
          center: {lat: 54.621277, lng: -6.692649 }
        });
    google.maps.event.trigger(map, "resize");
        map.addListener('click', function(e) {
          placeMarkerAndPanTo(e.latLng, map);

        });
      }

      !function placeMarkerAndPanTo(latLng, map) {
        var marker = new google.maps.Marker({
          position: latLng,
          map: map

        });
        map.panTo(latLng);
        document.getElementById("lat").value = latLng.lat();
        document.getElementById("lng").value = latLng.lng();

      }

我知道这有很多错误，但如果我能弄清楚如何让javascript工作，那就是一个开始。谢谢！

Answer 1

您可能没有正确链接文件。

您可以打开开发人员工具（Chrome中的F12，或者只需右键单击页面的某些部分并选择“检查元素”），然后查看控制台中的错误。

最有可能出现404错误。查看文件的URL，它是否与应该的位置匹配？你错过了一个文件夹吗？你忘记上传了吗？请告诉我们，以便我们进一步协助！

Answer 2

你也不需要！在你的js函数的开头。这会阻止您的html读取js文件。应该看起来像 - ＆gt;

function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,`enter code here`

Answer 3

您的代码的大部分内容确实有效。虽然做了一些修改。添加了初始标记位置，因为我注意到您打算在示例代码上执行此操作。此外，重构您的代码，以便可重用的例程。

请查看以下内容。

<强> HTML

<!DOCTYPE html>
<html>
  <head>
    <style>
       #map {
        height: 400px;
        width: 50%;
       }
    </style>
    <script src="mapSubmitSighting.js"></script>
  </head>
  <body>    
    <div id="map"></div>    
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD72DV80rL8PBw2BTTWOwHV3NPSQdx24D8&callback=initMap"></script>

    <br/>
    <div>
      Latitude: <input type="text" id="lat"/><br/><br/>
      Longitude: <input type="text" id="lng"/>
    </div>
  </body>
</html>

<强> JS

function initMap() {
  var initialLocation = {lat: 54.621277, lng: -6.692649 };

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: initialLocation
  });

  var marker = setMarker(initialLocation, map);
  setTextCoordinates(initialLocation.lat, initialLocation.lng);

  google.maps.event.trigger(map, "resize");
  map.addListener('click', function(e) {
    placeMarkerAndPanTo(e.latLng, map);
  });
}

function placeMarkerAndPanTo(latLng, map) {
  var marker = setMarker(latLng, map);

  map.panTo(latLng);

  setTextCoordinates(latLng.lat(), latLng.lng());
}

function setMarker(latLng, map){
  var marker = new google.maps.Marker({
    position: latLng,
    map: map
  });

  return marker;
}

function setTextCoordinates(lat, lng){
  document.getElementById("lat").value = lat;
  document.getElementById("lng").value = lng;
}

<强>输出

希望这有帮助！

无法在html

3 个答案: