根据经纬度调用Google地图显示对应位置

最新推荐文章于 2023-09-06 17:35:38 发布

diqi7654

最新推荐文章于 2023-09-06 17:35:38 发布

阅读量233

点赞数

文章标签： xhtml javascript c# ViewUI

原文链接：http://www.cnblogs.com/dean-Wei/archive/2013/04/23/3037403.html

版权

思路：将经纬度值作为参数传递给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">

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>

<div>

</div>

</form>

</body>

</html>

4、latlon.htm页面代码：

<title>经纬编辑器</title>

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

初始化... </div>

</div>

</body>

</html>

5、结果：

解法二：

这是效果图，下面是代码，这个是比较简单的一个功能，希望能对大家有帮助

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

html { height: 100%; }

body { height: 100%; margin: 0px; padding: 0px; }

.search { margin:50px auto; width:50%; }

</style>

//<![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>

请输入经纬度：<input id="latlng" type="text" value="30.87341, 120.12411" /><input type="button" value="搜索" οnclick="codeLatLng()"/>

</div>

</div>

</body>

</html>

转载于:https://www.cnblogs.com/dean-Wei/archive/2013/04/23/3037403.html

diqi7654

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
根据经纬度调用Google地图显示对应位置

思路：将经纬度值作为参数传递给latlon.htm文件里对应的参数值。例子如下：解法一：1、共有两页面（Default.aspx和latlon.htm）2、工程：3、Default页面代码：<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="...
复制链接

扫一扫