2013-10-28 2 views
0

У меня есть требование, как у меня более 300 широт и долгот. Все, что мне нужно, это указать эти широты и долготы на карте. Может кто-нибудь там помочь мне исправить это.Как показать несколько широт и долгот на карте на сайте

До сих пор я искал google и SO, но все в php, python и других, но мне это нужно в jquery или C# или xslt. Любая помощь будет заметна.

Пожалуйста, не downvote, я новичок работать в картах ..

ответ

1

Посмотрите jVectorMap или jQuery Mapael. Или, если вы действительно хотите использовать Карты Google, попробуйте этот JSFiddle: http://jsfiddle.net/yV6xv/2987. Код должен выглядеть следующим образом:

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="mystyle.css"> 
     <title="Hello"></title> 
     <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
     <script type="text/javascript"> 
     function initialize() { 

      var locations = [ 
       [1.37265, 103.893658], 
       [1.400617, 103.907833], 
       [1.346002, 103.825436], 
       [1.352051, 103.849125], 
       [1.251226, 103.830757] 
       ]; 

      var map = new google.maps.Map(document.getElementById('map'), { 
       zoom: 11, 
       center: new google.maps.LatLng(1.37265, 103.893658), 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }); 

      var infowindow = new google.maps.InfoWindow(); 

      var marker, i; 

      for (i = 0; i < locations.length; i++) { 
       marker = new google.maps.Marker({ 
        position: new google.maps.LatLng(locations[i][0], locations[i][1]), 
        map: map 
       }); 
      }                
     } 
     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    </head> 
    <body> 
     <!-- CHECK ELEMENT ID also UPDATE CSS --> 
     <div id="map"></div> 
    </body> 
</html> 
+0

Спасибо за ваш быстрый response..I используется приведенный выше код и карта сама не отображается на странице .. – Sasidharan

+0

Вы использовали html и CSS со страницы в JSFiddle? – DotPi

+0

Да, я сделал..Я дал ссылку на api в голове и в CSS. Я скопировал код javascript и вставил на свою веб-страницу. Но карта не отображается. – Sasidharan

1

Попробуйте

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
var markers = [ 
<asp:Repeater ID="rptMarkers" runat="server"> 
<ItemTemplate> 
      { 
      "title": '<%# Eval("Name") %>', 
      "lat": '<%# Eval("Latitude") %>', 
      "lng": '<%# Eval("Longitude") %>', 
      "description": '<%# Eval("Description") %>' 
     } 
</ItemTemplate> 
<SeparatorTemplate> 
    , 
</SeparatorTemplate> 
</asp:Repeater> 
]; 
</script> 
<script type="text/javascript"> 
    window.onload = function() { 
     var mapOptions = { 
      center: new google.maps.LatLng(markers[0].lat, markers[0].lng), 
      zoom: 8, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var infoWindow = new google.maps.InfoWindow(); 
     var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions); 
     for (i = 0; i < markers.length; i++) { 
      var data = markers[i] 
      var myLatlng = new google.maps.LatLng(data.lat, data.lng); 
      var marker = new google.maps.Marker({ 
       position: myLatlng, 
       map: map, 
       title: data.title 
      }); 
      (function (marker, data) { 
       google.maps.event.addListener(marker, "click", function (e) { 
        infoWindow.setContent(data.description); 
        infoWindow.open(map, marker); 
       }); 
      })(marker, data); 
     } 
    } 
</script> 
<div id="dvMap" style="width: 500px; height: 500px"> 
</div> 

См: http://www.aspsnippets.com/Articles/Show-Google-Maps-using-Latitude-and-Longitude-in-ASPNet.aspx

Смежные вопросы