【问题标题】:Google maps API. Adding Markers谷歌地图 API。添加标记
【发布时间】:2020-10-12 19:52:25
【问题描述】:

我已经更新了我的代码,所以现在当我添加脚本来放置标记时,地图仍然完好无损。不幸的是,添加标记指令不起作用。包含坐标的数据从 SQL 中提取并使用 C# 转换为 JSON 并存储为隐藏字段。这本身就可以正常工作,但我似乎无法让我的脚本读取数据并将信息传递给地图并放下标记。这是我现在的代码。

<body>
<form id="form1" runat="server">
    <asp:HiddenField runat="server" ID="locationData" />                  H<%--IDDEN FIELD CONTAINING DATA--%>
</form>
<div class="header">
</div>
<div id="map"></div>
<script type="text/javascript">  

    function initMap() {
        var options = {                                                     //MAP LOAD OPTIONS
            zoom: 5.8,
            center: { lat: 54.251186, lng: -4.463196 }
        }
        var map = new
            google.maps.Map(document.getElementById('map'), options);       //LOOADS MAP
        // Add Markers

        var markers;
        var arr = document.getElementById("LocationData");                  //CALLS HIDDEN FIELD AND SETS RULES FOR ADDING MARKERS TO THE MAP
        if (arr == "") {
            markers = {};
        }
        else {
            markers = $.parseJSON(arr.Latitude, arr.Longitude);
        };
        for (i = 0; i < markers.length; i++) {                                    //LOOPS THROUGH THE DATA AND ADDS MARKER AS PER LAT AND LONG
            var data = markers[0];
            var myLatlng = new google.maps.LatLng(data.Latitude, data.Longitude);   
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: data.building
            });
        }
    }
</script>

迈克

【问题讨论】:

  • 我已经更新了我的代码,我的地图现在保持完好。根据隐藏文件中的fata添加标记的代码仍然不起作用。这是我的代码。它缺少什么?

标签: javascript c# html arrays json


【解决方案1】:

我假设您正在 Web 浏览器 (Google Chrome) 上查看来自 asp 的上述 html 响应,因此我可以帮助您调试问题。在右上角的谷歌浏览器上点击“3点”(菜单),然后点击“更多工具”,然后点击“开发者工具”,默认情况下会打开“控制台”选项卡窗口,您可以找到您的 html 代码中的“红色”颜色文本中的错误。尝试分析错误,您也可以在 JavaScript 代码中添加更多的 çonsole.log() 或 console.log(''),它们可以为您提供更多信息并帮助您解决问题。

【讨论】:

    猜你喜欢
    • 2018-04-02
    • 1970-01-01
    • 1970-01-01
    • 2013-02-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-04-01
    • 1970-01-01
    相关资源
    最近更新 更多