温馨提示:本文翻译自stackoverflow.com,查看原文请点击:其他 - Unable to use google maps Markers, and issue with javascript Global variables
google-maps javascript google-maps-api-3

其他 - 无法使用Google Maps标记,并且出现javascript全局变量

发布于 2020-03-29 21:46:08

我想制作一个页面,让用户不断输入纬度和经度值,并将这些位置绘制在 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的答案,但是没有一个类似于我的问题。任何帮助将是巨大的。提前致谢。

查看更多

提问者
Chaitra D
被浏览
51
MrUpsidown 2020-01-31 18:44

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

不过,您应该进行进一步检查。如果您不提供纬度和/或经度并点击提交,则代码将原样失败。

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

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=initMapinitMap在API脚本完成加载后将执行该功能的函数。所有与Google Maps相关的代码都应在此函数中初始化,否则您可能会在加载完成之前调用Google Maps方法,这会出错。

  • 您应该始终参考官方文档中的属性和方法。

  • 您应该注意Javascript控制台中的错误。