在ASP.NET中使用谷歌地图javascript [英] Using google map javascript in ASP.NET

问题描述

大家好，



我在asp.net上制作一个网络应用程序，我必须使用谷歌地图Javascript API V3在我的网站上显示谷歌地图应用。我做了一些研究，并能够在我的应用程序中使用标记显示谷歌地图（连接到SQL Server并获得坐标）。我使用此代码在第一个实例中显示地图，显示折线和标记

函数initialize（）
 {
  var  latlng =  new  google.maps.LatLng（ 21 。 95 ， 78 。 631217 ， 121 。 992188 ）; 
  var  myOptions = {
 zoom： 6 ，
 center： latlng，
 mapTypeId：google.maps.MapTypeId.ROADMAP，
 scaleControl： true ，
 streetViewControl： true  
}; 
  var  map =  new  google.maps.Map（document.getElementById（  map_canvas），myOptions）; 
 
  var  markers = JSON.parse（' <％=的onLoad（）％>'）; 
 
  var  markerOptions = {center： new  google.maps.LatLng（markers [ 0 ]。lat，markers [ 0 ]。lng），zoom： 11 }; 
 
  var  mypath =  new  Array（）; 
 
  var  infoWindow =  new  google.maps.InfoWindow（）; 
 
  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（{
 removed：myLatlng ，
 map：map，
 icon：'  icon122.png'，
 title：data.rmk 
}）; 
 
（函数（标记，数据）{
  //  附加点击事件到当前标记 
 google.maps。 event  .addListener（marker， 点击，函数（e）{
  var  removedString = ' < div id =removedstyle =margin-removed15px; margin-removed3px; overflow：hidden; width：200px; height：100px; >' + 
 ' < div id =bodyContent>< font style =color：darkblue; font：15px tahoma; margin-removed5px;>' + 
 data.rmk + 
 ' < / font>< br>< br>< div style =font：12px verdana; color：darkgreen; margin-removed5px;>' + 
 '  LATITUDE：' + data.lat + ' < br> LONGITUDE：' + data.lng + 
 < span class =code-string>' < / div>< / div>< / div>'; 
 infoWindow .setContent（contentString）; 
 infoWindow.open（map，marker）; 
}）; 
}）（标记，数据）; 
 mypath.push（myLatlng）; 
} 
 
  var  flightPath =  new  google.maps.Polyline（ {
路径：mypath，
 strokeColor：  red，
 strokeOpacity： 0 。 8 ，
 strokeWeight： 6  
}）; 
 flightPath.setMap（map）; 
} 

但是，接下来我要做的是我有文本框和一个按钮，我想要输入一些搜索条件，如gp从SQL Server获取结果并显示标记



现在，他们遇到的一些问题我称之为同样的功能以上在我的搜索功能中只是为了检查它是否正常运行。此函数也在搜索功能中执行，但是，我的地图未显示。我在我的搜索功能中使用了这个代码

功能测试（字段）
 {
  if （field。 value  == ' '）
 {
 alert（ 搜索字符串不能为空.. !!）; 
} 
  else  
 {
称为相同函数  above。 
} 
} 

任何人都可以告诉我我的代码可能有什么问题。？

解决方案

Hello Sam，



搜索框的地图有内置功能。请访问以下链接



地点搜索框 [ ^ ]



自动填写地址和搜索字词 [ ^ ]

Hi everyone,

I am making a web application in asp.net, in which i have to use Google Map Javascript API V3 for showing google maps in my application. I have done some research and was able to display a google map in my application with marker(connecting to SQL Server and getting co-ordinates). I have used this code to show up the map in first instance which displays polylines and markes

function initialize() 
        {
            var latlng = new google.maps.LatLng(21.95, 78.631217, 121.992188);
            var myOptions = {
                zoom: 6,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scaleControl: true,
                streetViewControl: true
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            
            var markers = JSON.parse('<%=onLoad()%>');
            
            var markerOptions = {center: new google.maps.LatLng(markers[0].lat, markers[0].lng), zoom: 11};
            
            var mypath = new Array();
            
            var infoWindow = new google.maps.InfoWindow();
            
            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({
                    removed: myLatlng,
                    map: map,
                    icon: 'icon122.png',
                    title: data.rmk
                });
                
                (function (marker, data) {
                    // Attaching a click event to the current marker
                    google.maps.event.addListener(marker, "click", function (e) {
                    var removedString = '<div id="removed" style="margin-removed15px; margin-removed3px;overflow:hidden; width:200px; height:100px;">' +
                                '<div id="bodyContent"><font style="color:darkblue;font:15px  tahoma;margin-removed5px;">' +
                                data.rmk +
                                '</font><br><br><div style="font:12px verdana;color:darkgreen; margin-removed5px;">' +
                                'LATITUDE : ' + data.lat + '<br>LONGITUDE : ' + data.lng +
                                '</div></div></div>';
                        infoWindow.setContent(contentString);
                        infoWindow.open(map, marker);
                    });
                })(marker, data);
                mypath.push(myLatlng);
            }
            
            var flightPath = new google.maps.Polyline({
                path: mypath,
                strokeColor: "red",
                strokeOpacity: 0.8,
                strokeWeight: 6
            });
            flightPath.setMap(map);
}

But, next thing i want to do is that i have text box and a button in which i want to enter some search criteria like "g.p to fetch results from SQL Server and show markers"

now, their are few problems which i am facing i have called the same function as above in my search function just to check whether it functions properly or not. This function gets execute in search function as well, but, my map is not being displayed. i have used this code in my search function

function test(field)
{
   if (field.value == '') 
   {
      alert("Search string can not be blank..!!");
   }
   else
   {
      called the same function as above.
   }
}

can any one tell me what might be wrong with my code.??

解决方案

Hello Sam,

There is inbuilt functionality of the Map for searchbox. Please visit following link

Places search box[^]

Autocomplete for Addresses and Search Terms[^]

这篇关于在ASP.NET中使用谷歌地图javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！