如何实现google地图拖拽的时候旁边的文本框中的经纬值也跟着变化

huihuiworf 2012-02-02 03:46:15
如题，先粘上代码吧、


<html> 

<head>

<title></title>

 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAn8dF06B-QpniAeXC-bdCVBSCooeQ7x8_7WnK9Fc_vSUhGs5F4BSMl23EayM7v4EESxLBoX22Z0GQ3Q" type="text/javascript"></script>

 <script type="text/javascript">



     // 矩形是在地图上勾勒经纬边界的简单叠加层，其边界已指定

     // 粗细和颜色，并（可选）可以使用半透明背景颜色.

     function Rectangle(bounds, opt_weight, opt_color) {

         this.bounds_ = bounds;

         this.weight_ = opt_weight || 2;

         this.color_ = opt_color || "#FF0000";

     }

     Rectangle.prototype = new GOverlay();



     // 创建表示此矩形的 DIV.

     Rectangle.prototype.initialize = function (map) {

         // 创建表示我们的矩形的 DIV

         var div = document.createElement("div");

         div.style.border = this.weight_ + "px solid " + this.color_;

         div.style.position = "absolute";



         // 我们的矩形相对于地图是平面，所以将其添加到MAP_PANE 面板，

         // 与地图本身的绘制顺序相同（即在标记阴影下方）

         map.getPane(G_MAP_MAP_PANE).appendChild(div);



         this.map_ = map;

         this.div_ = div;

     }



     // 从地图面板删除 DIV

     Rectangle.prototype.remove = function () {

         this.div_.parentNode.removeChild(this.div_);

     }



     // 将我们的数据复制到新的矩形

     Rectangle.prototype.copy = function () {

         return new Rectangle(this.bounds_, this.weight_, this.color_,

                           this.backgroundColor_, this.opacity_);

     }



     // 基于当前投影和缩放级别重新绘制矩形

     Rectangle.prototype.redraw = function (force) {

         // We only need to redraw if the coordinate system has changed

         if (!force) return;



         // 计算边界两个对角的 DIV 坐标，获取矩形的尺寸和位置

         var c1 = this.map_.fromLatLngToDivPixel(this.bounds_.getSouthWest());

         var c2 = this.map_.fromLatLngToDivPixel(this.bounds_.getNorthEast());



         // 现在基于边界的 DIV 坐标放置 DIV

         this.div_.style.width = Math.abs(c2.x - c1.x) + "px";

         this.div_.style.height = Math.abs(c2.y - c1.y) + "px";

         this.div_.style.left = (Math.min(c2.x, c1.x) - this.weight_) + "px";

         this.div_.style.top = (Math.min(c2.y, c1.y) - this.weight_) + "px";

     }





     function initialize() {

         if (GBrowserIsCompatible()) {

             var map = new GMap2(document.getElementById("map_canvas"));

             map.setCenter(new GLatLng(39.917, 116.397), 14);

             map.addControl(new GSmallMapControl());

             map.addControl(new GMapTypeControl());



             // 在地图中心显示矩形，大小约为主地图的四分之一

             var result = document.getElementById("bound");

             var bounds = map.getBounds();

             result.value = bounds;

             var southWest = bounds.getSouthWest();

             var northEast = bounds.getNorthEast();

             var lngDelta = northEast.lng() - southWest.lng();

             var latDelta = northEast.lat() - southWest.lat();

             var rectBounds = new GLatLngBounds(

            new GLatLng(southWest.lat() + latDelta,

                        southWest.lng() + lngDelta),

            new GLatLng(northEast.lat() - latDelta,

                        northEast.lng() - lngDelta));

             map.addOverlay(new Rectangle(rectBounds));

         }

     }



</script> 

</head>

<body onload="initialize()" onunload="GUnload()">

            <div id="map_canvas" style="width:50%; height:500px;float:left;"></div><br />

            <input type="text" id="bound" name="bound" value=""  />

</body> 

</html>


参考网址：http://gcmd.nasa.gov/KeywordSearch/PageForward.do?ForwardPage=advancedSearch.jsp&KeywordPath=Parameters&Portal=GCMD&MetadataType=0&homepg
...全文
138 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
dyydingding 2012-02-02
  • 打赏
  • 举报
 回复
不客气！！如果还有不明白的 可以登陆code.google.com 这里是google地图API参考手册
huihuiworf 2012-02-02
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 dyydingding 的回复:]
贴上代码看看是否是LZ想要的效果？


HTML code
<html>
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="http://maps.google.com/maps?file=api&amp;v……
[/Quote]

是的，就是这样、 谢谢、
dyydingding 2012-02-02
  • 打赏
  • 举报
 回复
贴上代码看看是否是LZ想要的效果？

<html> 

<head>

<title></title>

 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAn8dF06B-QpniAeXC-bdCVBSCooeQ7x8_7WnK9Fc_vSUhGs5F4BSMl23EayM7v4EESxLBoX22Z0GQ3Q" type="text/javascript"></script>

 <script type="text/javascript">



     // 矩形是在地图上勾勒经纬边界的简单叠加层，其边界已指定

     // 粗细和颜色，并（可选）可以使用半透明背景颜色.

     function Rectangle(bounds, opt_weight, opt_color) {

         this.bounds_ = bounds;

         this.weight_ = opt_weight || 2;

         this.color_ = opt_color || "#FF0000";

     }

     Rectangle.prototype = new GOverlay();



     // 创建表示此矩形的 DIV.

     Rectangle.prototype.initialize = function (map) {

         // 创建表示我们的矩形的 DIV

         var div = document.createElement("div");

         div.style.border = this.weight_ + "px solid " + this.color_;

         div.style.position = "absolute";



         // 我们的矩形相对于地图是平面，所以将其添加到MAP_PANE 面板，

         // 与地图本身的绘制顺序相同（即在标记阴影下方）

         map.getPane(G_MAP_MAP_PANE).appendChild(div);



         this.map_ = map;

         this.div_ = div;

     }



     // 从地图面板删除 DIV

     Rectangle.prototype.remove = function () {

         this.div_.parentNode.removeChild(this.div_);

     }



     // 将我们的数据复制到新的矩形

     Rectangle.prototype.copy = function () {

         return new Rectangle(this.bounds_, this.weight_, this.color_,

                           this.backgroundColor_, this.opacity_);

     }



     // 基于当前投影和缩放级别重新绘制矩形

     Rectangle.prototype.redraw = function (force) {

         // We only need to redraw if the coordinate system has changed

         if (!force) return;



         // 计算边界两个对角的 DIV 坐标，获取矩形的尺寸和位置

         var c1 = this.map_.fromLatLngToDivPixel(this.bounds_.getSouthWest());

         var c2 = this.map_.fromLatLngToDivPixel(this.bounds_.getNorthEast());



         // 现在基于边界的 DIV 坐标放置 DIV

         this.div_.style.width = Math.abs(c2.x - c1.x) + "px";

         this.div_.style.height = Math.abs(c2.y - c1.y) + "px";

         this.div_.style.left = (Math.min(c2.x, c1.x) - this.weight_) + "px";

         this.div_.style.top = (Math.min(c2.y, c1.y) - this.weight_) + "px";

     }





     function initialize() {

         if (GBrowserIsCompatible()) {

             var map = new GMap2(document.getElementById("map_canvas"));

             map.setCenter(new GLatLng(39.917, 116.397), 14);

             map.addControl(new GSmallMapControl());

             map.addControl(new GMapTypeControl());



             // 在地图中心显示矩形，大小约为主地图的四分之一

             var result = document.getElementById("bound");

             var bounds = map.getBounds();

             result.value = bounds;

             var southWest = bounds.getSouthWest();

             var northEast = bounds.getNorthEast();

             var lngDelta = northEast.lng() - southWest.lng();

             var latDelta = northEast.lat() - southWest.lat();

             var rectBounds = new GLatLngBounds(

            new GLatLng(southWest.lat() + latDelta,

                        southWest.lng() + lngDelta),

            new GLatLng(northEast.lat() - latDelta,

                        northEast.lng() - lngDelta));

             map.addOverlay(new Rectangle(rectBounds));



			 GEvent.addListener(map,"move", function() {     

				var bounds = map.getBounds();

				result.value = bounds;

			});

         }

     }



</script> 

</head>

<body onload="initialize()" onunload="GUnload()">

            <div id="map_canvas" style="width:50%; height:500px;float:left;"></div><br />

            <input type="text" id="bound" name="bound" value="" size="100"  />

</body> 

</html>
huihuiworf 2012-02-02
  • 打赏
  • 举报
 回复
新年新帖，祝大家新年快乐。 坐等高人现身啊、
vb 实现文件拖拽显示文件路径
VB，实现拖拽到文本框，并在文本框显示文件路径
原生js实现表单拖拽功能
原生js实现表单拖拽功能,具有单行文本框，多行文本框，日期，单选框，多选框，下拉框，文件上传
【web前端】bootstrap自适应定制，拖拽布局，一键生成页面
这里将介绍整个guiplan开发工具的使用以及前端布局的基础教程。常用的基本操作，如div操作，文字操作，图片操作，组件操作，生成html网页，保存html，css代码。通过拖拽，点击，快捷键等方式轻松绘制想要的静态页面。利用bootstrap框架进行自适应的定制，以及常用弹性盒子布局方式。零基础即可学会网页绘制。软件自动生成的代码也可以手动修改，方便进一步学习与了解前端知识。生成的代码符合w3c规范，也可进行二次开发。这节课讲解的是基本布局教程，不涉及到vue交互。设计师与产品经理也可以用此软件开始制作原型。
Android 可拖拽的GridView效果实现, 长按可拖拽和item实时交换
Android 可拖拽的GridView效果实现, 长按可拖拽和item实时交换，项目详情http://blog.csdn.net/xiaanming/article/details/17718579
jQuery实现可拖拽删除小图标回收站 源码程序
利用jQuery内部封装的拖拽接口即可简单实现在网页上拖拽任意元素，需要拖动应用图标至垃圾箱即可删除这个图标。主要包括HTML代码、CSS3代码以及jQuery代码。HTML代码主要定义了一个回收站文件夹的容器，以及各个小图标的图片。
JavaScript

87,907

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章