无法使用地理位置加载 Google Maps API

Posted 2023-02-22

【中文标题】无法使用地理位置加载 Google Maps API

【英文标题】：Unable to load Google Maps API with Geolocation

【发布时间】：2018-01-06 06:08:48

【问题描述】：

我按照 Google 本身关于 Map API 和其他来源的文档来尝试找出问题所在，但经过几个小时的尝试仍然无法正常工作。..

谁能指导我解决它？

<div class="generatedMap"></div>
                <div class="generatedMap"></div>
                <script src="//maps.googleapis.com/maps/api/js?v=3&client=gme-KEYFROMGOOGLEAPI" type="text/javascript"></script>
                <script type="text/javascript">
                    function initMap() 
                        /*var latlng = new google.maps.LatLng(latitude, longitude);
                        var mapOptions = 
                            zoom: 5,
                            center: new google.maps.LatLng(latitude, longitude)
                        
                        map = new google.maps.Map(document.getElementById('generatedMap'), mapOptions);*/

                        var latitudeHF = document.getElementById("<%=HF_Latitude.ClientID %>");
                        var longitudeHF = document.getElementById("<%=HF_Longitude.ClientID %>");

                        var latitude = 0.0;
                        var longitude = 0.0;

                        if (latitudeHF)
                        
                            latitude = latitudeHF.value;
                        

                        if (longitudeHF) 
                            longitude = longitudeHF.value;
                        

                        var map = new google.maps.Map(document.getElementById('generatedMap'), 
                            zoom: 8,
                            center: new google.maps.LatLng(latitude, longitude),
                            mapTypeId: google.maps.MapTypeId.SATELLITE
                        );

                        var marker = new google.maps.Marker(
                            position: new google.maps.LatLng(latitude, longitude),
                            map: map,
                            title: "<div style = 'height:60px;width:150px'><b>Consumer's location:</b><br />Latitude: " + latitude + "<br />Longitude: " + longitude
                        );
                    

                    google.maps.event.addDomListener(window, 'load', initMap);
                </script>

我实际上是从我的数据库中检索保存的纬度和经度，然后将其存储到一个 HiddenField 中并从那里检索它..

foreach (DataRow r in ds.Tables[0].Rows)
        
            accountDB = r["AccountStatus"].ToString();
            latitudeDB = Convert.ToDouble(r["Latitude"]);
            longitudeDB = Convert.ToDouble(r["Longitude"]);
            usernameDB = r["Username"].ToString();
            ipDB = r["IPAddressOfCreation"].ToString();
        

HF_Latitude.Value = latitudeDB.ToString();
HF_Longitude.Value = longitudeDB.ToString();

出于说明目的，我删除了 Google Map API 密钥。

我得到了如图所示的纬度和经度，但我似乎无法显示地图..

感谢任何帮助！

【问题讨论】：

根据您的代码，您正在使用创建一个类，然后您像 Id 一样在 javascript 代码中检索。因此，由于这个原因地图未显示，请检查我的答案。

【参考方案1】：

您的代码中的 Div 标签有错误，而不是 class，您需要将 id 定义为属性。

最好只使用这个用于 google map 的脚本 src。

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

使用上述脚本 src 后，请从代码中删除此行。

google.maps.event.addDomListener(window, 'load', initMap);

代替：

<div class="generatedMap"></div>

应该是：

<div id="generatedMap"></div>

Javascript 代码将保持原样。如果您想保持课程不变，请在 javascript 中使用打击代码

代替：

var map = new google.maps.Map(document.getElementById('generatedMap')

应该是：

var map = new google.maps.Map(document.getElementsByClassName('generatedMap')

希望这会有所帮助。

【讨论】：

您好 Emipro，感谢您的指正。我稍后会尝试。此刻正在上课。会回到这里。谢谢！