javascript - 无法使用谷歌地图标记，以及 javascript 全局变量的问题

Question

我想制作一个页面，用户不断输入纬度和经度值，并将这些地点绘制在 map 上，并获得这些地点之间的路线。

最初，我尝试通过从用户处获取纬度和经度值在 map 上绘制标记。

我的html是这样的:

    <div>
            <label for = "lat">Enter Latitude</label>
            <input id="lat" type="text" name="lat">
            <label for = "lat">Enter Longitude</label>
            <input id="lng" type="text" name="lng">
            <button id ="submit">Submit</button>
        </div>
        <div id="map"></div>

我的CSS是这样的:

<style>
    /*Set the height explicitly.*/
    #map {
        height: 400px;
        width: 100%
    }
</style>

我正在使用这样的 Google map javascript。

<script src="https://maps.googleapis.com/maps/api/js?key=myAPIKey&callback=initMap" async defer></script>

我的脚本是这样的:

        <script>        
            var map=0;
            function initMap(){
                    var pesCollege = {lat:12.9345, lng:77.5345};
                    map = new google.maps.Map(document.getElementById('map'), {
                        center:pesCollege,
                        zoom: 10
                    });
                    console.log("Inside initMap");
                    console.log(map);    //this is printing map properties
                    return map;
                    // var marker = new google.maps.Marker({position: pesCollege, map : map});
                   //This marker works if uncommented!
               }

                plot();                    

                function plot(){
                    console.log("inside plot function")
                    console.log(map);    //this is printing 0, i.e. global variable map is not 
                                         //loaded with map inside initMap
                    // var latlng = new google.maps.LatLng(latitude, longitude);
                    var pesCollege = {lat:12.9345, lng:77.5345};
                    var marker = new google.maps.Marker({position: pesCollege, map :map});  
                  //I want this marker to work.

                    // var marker = new google.maps.Marker({position: latlng,setMap: map}); 
                    console.log("Marker set")


                 }

如果这有效，那么我想我可以通过添加事件监听器来传递纬度和经度值来绘制标记，如下所示:

var button = document.getElementById('submit')  
        button.addEventListener("click", function(){
            var dict = {};
            var latitude = document.getElementById('lat').value;
            var longitude = document.getElementById('lng').value;
            x = parseInt(latitude);
            y = parseInt(longitude);
            dict['lat']=latitude;
            dict['lng']=longitude;
            var cdns = JSON.stringify(dict);
            // alert("hi");
            alert(cdns);    
            console.log(dict);
            console.log(cdns);
            plotPoint(x,y); //this is a similar funtion to plot() but i send l&l values, not sure if i can pass them like this.
            plot();     
        });

我的plotPoint(x,y)是这样的

function plotPoint(latitude,longitude){
    var latlng = new google.maps.LatLng(latitude, longitude);
    var marker = new google.maps.Marker({position: latlng,map: map}); 
    console.log("Marker set")
}

我已经阅读了很多 git 答案，但没有一个与我的问题相似。任何帮助都会很棒。提前致谢。

Answer 1

我已将您提供的代码减少到最少，以便在提交纬度/经度对时绘制一个标记。

不过，您应该做进一步的检查。如果您不提供纬度和/或经度并点击提交，代码将失败。

这是一个工作代码片段。我已添加评论，请阅读。

var map;

function initMap() {

  // Default map location
  var pesCollege = {
    lat: 12.9345,
    lng: 77.5345
  };

  // Create the map and center on deault location
  map = new google.maps.Map(document.getElementById('map'), {
    center: pesCollege,
    zoom: 10
  });
  
  // Create a Marker at the default location
  var marker = new google.maps.Marker({
    position: pesCollege,
    map: map
  });

  var button = document.getElementById('submit');

  button.addEventListener("click", function() {

    // Get latitude and longitude values from inputs
    var latitude = document.getElementById('lat').value;
    var longitude = document.getElementById('lng').value;

    // Are you sure about that?
    // This will return an integer, ie. 12.3452 will become 12
    latitude = parseInt(latitude);
    longitude = parseInt(longitude);

    // Send the values
    plotPoint(latitude, longitude);
  });
}

function plotPoint(lat, lng) {

  // Create a LatLng with the given coordinates
  var pos = new google.maps.LatLng(lat, lng);

  // Create a Marker at the given coordinates
  var marker = new google.maps.Marker({
    position: pos,
    map: map
  });

  // Pan the map to see your added Marker
  map.panTo(pos);
}

#map {
  height: 400px;
  width: 100%
}

<div>
  <label for="lat">Enter Latitude</label>
  <input id="lat" type="text" name="lat">
  <label for="lat">Enter Longitude</label>
  <input id="lng" type="text" name="lng">
  <button id="submit">Submit</button>
</div>

<div id="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&callback=initMap" async defer></script>

添加更多信息:

• 在 API 调用中，您添加了 callback=initMap，它将在 API 脚本加载完成后执行 initMap 函数。所有与 Google map 相关的代码都应在此函数中初始化，否则您可能会在加载完成之前调用 Google map 方法，从而出现错误。

• 您应该始终引用official documentation用于属性和方法。

• 您应该注意 Javascript 控制台是否有错误。