2015-07-13 91 views
0

我是一个Javascript初学者,我试图在谷歌地图上创建标记。所以首先我从我裂开来获得lattitude和longlitude值的数据库获取GPS坐标,那么我他们在C#中增加了2个独立的列表框称为lstBoxLatGPS和lstBoxLongGPS现在在javascript中的谷歌地图上显示标记

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); 

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

回答

0

我用Artem.Google包创建地图,现在它的工作。

1

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

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

是的,我已经对不起,

它显示地图,直到我试图添加标记。 – user5110647