根据经纬度调用Google地图显示对应位置
思路：将经纬度值作为参数传递给latlon.htm文件里对应的参数值。例子如下：
解法一：
1、共有两页面（Default.aspx和latlon.htm）
2、工程：
3、Default页面代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="地图编辑._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script language="javascript" type="text/javascript">
function ShowMap() {
var Long = document.getElementById("Long").value;
var Lat = document.getElementById("Lat").value;
var Company = document.getElementById("Company").value;
var zoomlevel = 10;
if (Long=="" || Lat=="") {
Long = 113.2759952545166;
Lat = 23.117055306224895;
Company = "广州";
}
var obj = new Object();
obj.lat = Lat;//纬度
obj.lng = Long;//经度
obj.zoom = zoomlevel; //缩放级别
obj.ent = Company;
obj.sdpno = Company;
obj.addr = "广东";
var retVal = window.showModalDialog(
'latlon.htm?_=' + Math.random()
, obj, 'dialogWidth:800px;dialogHeight:450px;'
);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<label title="企业名称">企业名称:</label>
<input type ="text" id="Company" />
<label title="经度">经度:</label>
<input type ="text" id="Long" />
<label title="纬度">纬度:</label>
<input type ="text" id="Lat" />
<input type="button" value="显示地图" onclick="ShowMap()" />
</div>
</form>
</body>
</html>
4、latlon.htm页面代码：
<html> <head>
<title>经纬编辑器</title>
<script type="text/javascript">
var map;
function SetHMS(f) {
//度
var h = parseInt(f);
//分
var m = parseInt((parseFloat(f) - parseInt(h)) * 60);
//秒
var s = parseInt(((parseFloat(f) - parseInt(h)) * 60 - parseInt(m)) * 60);
if (m.toString().length == 1) {
m = '0' + m.toString();
}
if (s.toString().length == 1) {
s = '0' + s.toString();
}
var hms = h + '度' + m + '分' + s + '秒';
return hms;
}
function initialize() {
var obj = window.dialogArguments;
var lat = obj.lat;
var lng = obj.lng;
var zoom = parseInt(obj.zoom);
var ent = obj.ent;
var sdpno = obj.sdpno;
var addr = obj.addr;
var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
//这里的参数可以为多个参数，具体参考MapOptions对象
zoom: zoom,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
var marker = new google.maps.Marker({
//可以为多个参数，具体参考MarkerOptions对象
map: map,
position: latlng,
draggable: true
});
google.maps.event.addListener(marker, 'click', function (event) {
//这里的infoWindow的参数可以为多个对象，具体可以参考InfoWindowOptions对象
var html = '<div style="line-height:20px;">';
html += '<div><font color="blue">' + ent + '</font></div>';
// html += '<div><font color="Gray" size="1">许可证编号：' + sdpno + '</font></div>';
// html += '<div><font color="Gray" size="1">地址：' + addr + '</font></div>';
html += '<div><font color="Red" size="1">经度：' + SetHMS(event.latLng.lng()) + ' 纬度：' + SetHMS(event.latLng.lat()) + '</font></div>'; html += '</div>';
var infowindow = new google.maps.InfoWindow({ content: html });
infowindow.open(map, marker);
});
document.getElementById("divload").style.display = "none";
document.getElementById("map_canvas").style.display = "";
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
</head>
<body>
<div id="divload" style="position: absolute; top: 190px; left: 360px; font-size: 11px;
color: Gray; font-weight: bold;">
<img src="LoadingMap.gif" alt="load" />
初始化... </div>
<div id="map_canvas" style="width: 100%; height: 100%; display: none;">
</div>
</body>
</html>
5、结果：
解法二：
这是效果图，下面是代码，这个是比较简单的一个功能，希望能对大家有帮助
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>经纬度</title>
<style type="text/css">
html { height: 100%; }
body { height: 100%; margin: 0px; padding: 0px; }
.search { margin:50px auto; width:50%; }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//<![CADTA[
var geocoder; //
var map; //全局Gmap
var infowindow = new google.maps.InfoWindow(); //创建GInfoWindow对象
var marker; //全局Gmarker
//-------------------网页加载时初始化地图----------Start
function initialize()
{
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(39.92, 116.46); //设定初始地图中心所在经纬度,以北京为中心
var myOptions = {
zoom: 5, //设定地图缩放级别
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); //创建Gmap对象
}
//-------------------网页加载时初始化地图----------End
function codeLatLng()
{
var input = document.getElementById("latlng").value; //获取text中的值
var latlngStr = input.split(",", 2);
var lat = parseFloat(latlngStr[0]); //获得经度值
var lng = parseFloat(latlngStr[1]); //获得纬度值
var latlng = new google.maps.LatLng(lat, lng);
// if(marker)
// {
// map.closeInfoWindow();
// map.removeOverlay(marker);
// }
geocoder.geocode({ 'latLng': latlng }, function(results, status) //地址解析
{
if (status == google.maps.GeocoderStatus.OK) //google.maps.GeocoderStatus.OK 表示地图解析成功
{
if (results[0]) //results[0]存储前一查询所返回的地址
{
map.setZoom(15); //设定查询所返回的地图缩放级别
marker = new google.maps.Marker({ //创建marker地标
position: latlng,
map: map
});
//设置信息窗口所含内容
infowindow.setContent("<div style=\"color:red;font-size:14px\">"
+"<br/>"
+ "<strong>地址：</strong> " + results[0].formatted_address +"<br/>"
+ "<hr width:50px>"
+ "<strong>经度：</strong> " + lat +"<br/>"
+ "<hr width:50px>"
+ "<strong>纬度：</strong> " + lng +"<br/>"
+ "<br/>");
infowindow.open(map, marker); //显示信息窗口
}
else
{
alert("没有记录");
}
} else
{
alert("Geocoder failed due to: " + status);
}
});
}
// ]]>
</script>
</head>
<!--加载时调用initialize()函数加载地图-->
<body onload="initialize()">
<div class="search">
请输入经纬度：<input id="latlng" type="text" value="30.87341, 120.12411" /><input type="button" value="搜索" onclick="codeLatLng()"/>
</div>
<!--以下id为map的div元素为google地图的容器，地图显示这这里-->
<div id="map_canvas" style="width:50%; height: 50%; margin: 50px auto;">
</div>
</body>
</html>