在 javascript 中的谷歌地图上显示标记答案

【问题标题】：displaying markers on a google map in javascript在 javascript 中的谷歌地图上显示标记
【发布时间】：2015-07-13 10:55:29
【问题描述】：

我是 Javascript 初学者，我正在尝试在谷歌地图上创建标记。因此，首先我从数据库中获取 GPS 坐标，我将其拆分以获取纬度和经度值，然后我将它们添加到 2 个单独的列表框中，分别称为 c# 中的 lstBoxLatGPS 和 lstBoxLongGPS

foreach (string item in GPSLatList)
    {
        lstBoxLatGPS.Items.Add(item);
    }
foreach (string item in GPSLongList)
    {
        lstBoxLongGPS.Items.Add(item);
    }

现在在 Javascript 中，我想获取列表框中的项目并在地图上创建标记我有 2 个功能：

        function GetLatValues() 
        {
            var arrValues= new Array();
            var listBox = document.getElementById("<%=lstBoxLatGPS.ClientID%>");
            for (var i = 0; i < listBox.options.length; i++) 
            {arrValues[i]= listbox.options[i].text }
            return (arrValues);
        }
        function GetLongValues() 
        {
            var arrValues= new Array();
            var listBox = document.getElementById("%=lstBoxLongGPS.ClientID%>");
            for (var i = 0; i < listBox.options.length; i++) 
            {arrValues[i]= listbox.options[i].text }
            return (arrValues);
        }

然后添加数组来制作标记：

        function initialize()
        {
            var mapCanvas = document.getElementById('map-canvas');
            var mapOptions =
            {
                center: new google.maps.LatLng(-28.4792811, 24.6722268),
                zoom: 6,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map(mapCanvas, mapOptions);
            map.set('styles', [
  {
      "featureType": "landscape",
      "stylers": [
        { "color": "#c9d7bb" }
      ]
  }, {
      "featureType": "administrative.province",
      "elementType": "labels.text",
      "stylers": [
        { "visibility": "on" },
        { "color": "#ffc23d" }
      ]
  }, {
      "featureType": "poi.attraction",
      "stylers": [
        { "visibility": "on" },
        { "color": "#9be586" }
      ]
  }, {
      "featureType": "administrative.province",
      "elementType": "geometry",
      "stylers": [
        { "visibility": "on" },
        { "color": "#000000" },
        { "weight": 3.2 }
      ]
  }
            ]);

            var GPSLatArray = new Array();
            var GPSLongArray = new Array();
            GPSLatArray = GetLatValues();
            GPSLongArray = GetLongValues();

            for (var i = 0; i < GPSLatArray.length; i++)
            {
                var marker = new google.maps.Marker({position: GPSLatArray[i],GPSLongArray[i] });
                marker.setMap(map);
            }
        }
        google.maps.event.addDomListener(window, 'load', initialize);

应该显示地图时，它只是空白，根本不显示地图。

【问题讨论】：

标签： javascript c# asp.net-mvc google-maps

【解决方案1】：

你需要在你的aspx页面中添加一个div来显示地图。

<div class="img-thumbnail" id="map-canvas" style="width: 369px; height: 289px;"></div>

【讨论】：

是的，我已经很抱歉了，
在我尝试添加标记之前，它一直在显示地图。

【解决方案2】：

我使用 Artem.Google 包来创建地图，现在它可以工作了。

【讨论】：