无法使用 google 地图标记，并出现 javascript 全局变量问题

Question

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

最初，我试图通过获取用户的纬度和经度gitude 值在地图上绘制标记。

我的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 地图 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")


                 }

如果这可行，那么我想我可以传递纬度和经度gitude 值，通过添加这样的事件侦听器来绘制标记：

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 的答案，但 none 与我的问题相似。任何帮助都会很棒。提前致谢。

Answer 1

我已将您提供的代码减少到最少，以便在提交 lat/lng 对时绘制标记。

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

这是一个有效的代码片段。我已添加评论，请阅读。

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 地图相关代码都应在此函数中初始化，否则您可能会在完成加载之前调用 Google 地图方法，这将出错。
您应该始终参考 official documentation 的属性和方法。
您应该注意 Javascript 控制台是否有错误。

无法使用 google 地图标记，并出现 javascript 全局变量问题

Unable to use google maps Markers, and issue with javascript Global variables

javascript

google-maps

google-maps-api-3