如何在谷歌地图的代码中获取并传递纬度和经度细节 [英] how to obtain and pass latitude and longtitude details in code for google maps

问题描述

在下面的代码中，我可以使用localkey的API密钥获取手动插入的纬度和经度的地图。现在，如果我在我的网站中使用该代码，则用户选择的位置将会更改。在这种情况下如何将有关纬度的细节

和longtitude传递给'var myLatlng'。

< html xmlns =   http://www.w3.org/1999/xhtml >  
< head> 
< title>在 asp.net webapplication < /  <中显示或整合Google地图 span class =code-leadattribute> title  >  
< style type =    text / css >  
 html {height：100％; } 
 body {身高：100％;保证金： 0 ;填充： 0 } 
 #map_canvas {height：100％} 
 < /   style  >  
 < script     type   =  text / javascript  
   
   src   =  https://maps.googleapis .com / maps / api / js？key = AIzaSyCN_Tua6KFZaZKJW1VXFaSJfrMT9P9SB0A& sensor = true >  
 < /   script  >  
 < script     type   =  text / javascript >  
函数initialize（）{
 
  var  myLatlng =  new  google.maps.LatLng（ 22 。 00 ， 76 。 96 ）
 
  var  mapOptions = {
 center：myLatlng，
 zoom： 8 ，
 mapTypeId：google.maps.MapTypeId.ROADMAP，
 marker： true  
}; 
  var  map =  new  google.maps.Map（document.getElementById（  map_canvas），mapOptions）; 
} 
 < /   script  >  
 
 < /   head  >  
<bodyönload=   initialize（）  >  
< form id =   form1 runat =   server >  
< div id =   map_canvas style =   width：500px; removed600px; removed400px; height：300px >  < /   div  >  
 < /  表格 >  
 < /   body   >  
 < /   html  >  

解决方案

首先，我建议如果您的位置有限，那么去创建一个可以容纳以下内容的表格。您可以根据需要修改列。

  public   class 位置
 {
  public   int  Id { get ;  set ; } 
  public   double 纬度{ get ;  set ; } 
  public   double 经度{ get ;  set ; } 
  public   string  LocationName { get ;  set ; } 
  public   string  CompleteGeoLocation { get ;  set ; } 
} 

在page_load方法中添加以下代码

 protected void Page_Load（object sender，EventArgs e）
 {
 
 //为纬度和经度创建数据库
 //使用worldatlas.com或任何其他将提供准确的纬度和经度的wensite。 
 
 if（！IsPostBack）
 {
 List< Location> locationCollection = new List< Location> {
新位置{Id = 1，纬度= 18.31，经度= 73.71，LocationName =Pune，CompleteGeoLocation =18.31,73.71}，
新位置{Id = 2，纬度= 51.30，经度= 0.7，LocationName =伦敦，CompleteGeoLocation =51.30,0.7}，
新位置{Id = 3，纬度= 35.41，经度= 139.41，LocationName =东京，CompleteGeoLocation =35.41,139.41 }，
新位置{Id = 4，纬度= 42.36，经度= 83.8，LocationName =Troy，CompleteGeoLocation =42.36,83.8}，
 
}; 
 
 ddlLocation.DataSource = locationCollection; 
 ddlLocation.DataValueField =CompleteGeoLocation; 
 ddlLocation.DataTextField =LocationName; 
 ddlLocation.DataBind（）; 
} 
 
 
} 
 

下面是aspx代码。请添加您自己的apiKey

 <   html  >  
 <   head     id   =  Head1    runat   = 服务器 >  
 <   meta     name   =  viewport    content   =  initial-scale = 1.0，user-scalable = no    /  >  
 <   style     type   =  text / css >  
  html  {  height  ：  100％}  
  body  { height  ：  100％;   margin  ：  0;   padding  ：  0}  
 ＃mapcanvas  { height  ：  50％}  
< / style> 
 < script  type =text / javascript> 
 src =https： //   maps.googleapis.com/maps/api/js?key=AIzaSyD -0MJH3LspBYtFwfnWT7icqWzRs3bsds_uE4& sensor = true>  
 < /   script  < span class =code-keyword>>  
 <   script     type   =  text / javascript >  
 
  //  修改后的初始化方法，它将用于下拉索引 
  function  initialize（）{
  if （ document  .getElementById（  ddlLocation）。selectedIndex！= -1）
 {
 
  var  data =  document  .getElementById（  ddlLocation）。value.split（' ，'）; 
  var 纬度=  parseFloat （数据[ 0 ]）; 
  var 经度=  parseFloat （数据[ 1 ]）; 
  var  mapOptions = {
 center： new  google.maps.LatLng（Latitude ，经度），
缩放： 8 ，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}; 
  var  map =  new  google.maps。 Map （ document  .getElementById（  mapcanvas ），
 mapOptions）; 
} 
} 
 google.maps.event.addDomListener（ window ，'  load'，initialize）; 
 <   /   script  >  
 <   / head  >  
 <   body  >  
 <  表单    id   = < span class =code-keyword> form1    style   =  height：750px    runat   =  server >  
 <   div     id   =  mapcanvas     style   =  width：50％    runat   =  server    clientidmode   = 静态    /  >  
  <   div  >  
 <   asp：dropdownlist     id   =  ddlLocation    runat   =  server    width   =  200px    autopostback   =  true    xmlns ：asp   = ＃unknown > ;  
已启用=真> <   / asp：dropdownlist  >  
 <   / div  >  
 <  < span class =code-leadattribute> / form  >  
 <   / body  >  
 <   / html  >  

在第一次加载html后，将从位置下拉中删除第一个位置。

稍后您可以在选择下拉列表位置更改时更改位置。

使用下面的html代码添加你自己的apikey

现在在这个解决方案中你可以输入位置的地址并点击编码这将加载特定的位置。

 <   html  >  
 <   head     id   =  Head1    runat   =  server >  
 <   meta     name   =  viewport    content   =  initial-scale = 1.0，user-scalab le = no    /  >  
 <   style     type   =  text / css >  
  html  { height  ：  100％}  
  body  { height  ：  100％;   margin  ：  0;   padding  ：  0}  
 ＃mapcanvas  { height  ：  50％}  
< / style> 
 < script  type =text / javascript> 
 src =https： //   maps.googleapis.com/maps/api/js?key=AIzaSyD -0MJH3LspBYtFwfnWT7icqddWzRs3b_uE4& sensor = true>  
 < /   script  < span class =code-keyword>>  
 <   script     type   =  text / javascript >  
  var  geocoder; 
  var  map; 
  function  initialize（）{
 geocoder =  new  google.maps.Geocoder（ ）; 
  var  latlng =  new  google.maps.LatLng（-34。 397 ， 150 。 644 ）; 
  var  mapOptions = {
 zoom： 8 ，
 center： latlng，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
} 
 map =  new  google.maps。 Map （ document  .getElementById（  mapcanvas），mapOptions）; 
} 
 
  function  codeAddress（）{
  var  address =  document  .getElementById（  address）值; 
 geocoder.geocode（{'  address'：address}， function （结果，状态）{
  if （status == google.maps.GeocoderStatus.OK）{
 map.setCenter（结果[ 0 ]。geometry。 location ）; 
  var  marker =  new  google.maps.Marker（{
 map：map，
 position：结果[ 0 ]。geometry。 location  
}）; 
}  else  {
 alert（ 地理编码未成功原因如下： + status）; 
} 
}）; 
} 
 
 <   /   script  >  
 <   / head  >  
 <  正文    onload   =  initialize（） >  
 <  表格    id   =  form1   样式  = 身高：750px    runat   =  server >  
 <  < span class =code-leadattribute> div     id   =  mapcanvas    style   =  width：50％    runat   =  server    clientidmode   = 静态    /  >  
 <   div  >  
 <  输入    id   = 地址   类型  =   textbox    value  < span class =code-keyword> = 悉尼，新南威尔士州 >  
 <  输入    type   =  button    value   =  Encode    onclick   =  codeAddress（） >  
 <   / input  >  <   / input  >   <   / div  >  
 
 <   / form  >  
 <   / body  >  
 <   / html  >  

In the following code I am able to get the map for manually inserted latitude and longtitude with an API key for localhost. Now if I use that code in my website, the location selected by the user will change. In such circumstances how to pass the details pertaining to latitude
and longtitude to 'var myLatlng'.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Show or Integrate Google Maps in asp.net webapplication</title>
<style type="text/css">
html { height: 100%; }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"

src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCN_Tua6KFZaZKJW1VXFaSJfrMT9P9SB0A&sensor=true">
</script>
<script type="text/javascript">
function initialize() {

var myLatlng= new google.maps.LatLng(22.00, 76.96)

var mapOptions = {
center: myLatlng,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
marker:true
};
var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
}
</script>

</head>
<body  önload="initialize()">
<form id="form1"  runat="server">
<div id="map_canvas" style="width: 500px;  removed600px; removed400px; height: 300px"></div>
</form>
</body>
</html>

解决方案

Hi ,

Firstly i suggest if you have limited locations then go and create table which will hold following things. you can modify columns depending on your need.

public class Location
      {
          public int Id { get; set; }
          public double Latitude { get; set; }
          public double Longitude { get; set; }
          public string LocationName { get; set; }
          public string CompleteGeoLocation { get; set; }
      }

Add below code in page_load method

protected void Page_Load(object sender, EventArgs e)
       {

           // Create database for location with Latitude and Longitude
           // Using worldatlas.com or any other wensite which will provide accurate Latitude and Longitude.

           if (!IsPostBack)
           {
               List<Location> locationCollection = new List<Location> {
               new Location {Id=1,Latitude=18.31,Longitude=73.71,LocationName="Pune",CompleteGeoLocation="18.31,73.71"},
               new Location {Id=2,Latitude=51.30,Longitude=0.7,LocationName="London",CompleteGeoLocation="51.30,0.7"},
               new Location {Id=3,Latitude=35.41,Longitude=139.41,LocationName="Tokyo",CompleteGeoLocation="35.41,139.41"},
               new Location {Id=4,Latitude=42.36,Longitude=83.8,LocationName="Troy",CompleteGeoLocation="42.36,83.8"},

               };

               ddlLocation.DataSource = locationCollection;
               ddlLocation.DataValueField = "CompleteGeoLocation";
               ddlLocation.DataTextField = "LocationName";
               ddlLocation.DataBind();
           }


       }

Below is the aspx code. Please add your own apiKey

<html>
  <head id="Head1" runat="server">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #mapcanvas { height: 50% }
    </style>
    <script type="text/javascript">
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD-0MJH3LspBYtFwfnWT7icqWzRs3bsds_uE4&sensor=true">
    </script>
    <script type="text/javascript">

    //modified initialization method which will work on dropdown index
        function initialize() {
            if (document.getElementById("ddlLocation").selectedIndex != -1) 
            {

                var data = document.getElementById("ddlLocation").value.split(',');
                var Latitude = parseFloat(data[0]);
                var Longitude = parseFloat(data[1]);
                var mapOptions = {
                    center: new google.maps.LatLng(Latitude, Longitude),
                    zoom: 8,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("mapcanvas"),
            mapOptions);
            }
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
   <form id="form1" style="height:750px" runat="server">
   <div id="mapcanvas" style="width:50%" runat="server" clientidmode="Static" />
     <div>
     <asp:dropdownlist id="ddlLocation" runat="server" width="200px" autopostback="true" xmlns:asp="#unknown">
        Enabled="True" ></asp:dropdownlist>
   </div>
    </form>
  </body>
</html>

after this on first load html will dislpay first location from location drop down.
later you can change location on selection dropdown location change.

Use below html code add your own apikey
Now in this solution you can type address of location and click on encode this will load specific location.

<html>
  <head id="Head1" runat="server">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #mapcanvas { height: 50% }
    </style>
    <script type="text/javascript">
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD-0MJH3LspBYtFwfnWT7icqddWzRs3b_uE4&sensor=true">
    </script>
    <script type="text/javascript">
    var geocoder;
  var map;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var mapOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("mapcanvas"), mapOptions);
  }

  function codeAddress() {
    var address = document.getElementById("address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }

    </script>
  </head>
  <body onload="initialize()">
   <form id="form1" style="height:750px" runat="server">
   <div id="mapcanvas" style="width:50%" runat="server" clientidmode="Static" />
   <div>
    <input id="address" type="textbox" value="Sydney, NSW">
    <input type="button" value="Encode" onclick="codeAddress()">
  </input></input></div>
     
    </form>
  </body>
</html>

这篇关于如何在谷歌地图的代码中获取并传递纬度和经度细节的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！