谷歌地图使用例子

最新推荐文章于 2018-09-27 10:13:56 发布

mush_me

最新推荐文章于 2018-09-27 10:13:56 发布

阅读量179

点赞数

分类专栏：其它java技术文章标签： javascript xhtml python ViewUI

本文链接：https://blog.csdn.net/mush_me/article/details/83954897

版权

其它java技术专栏收录该内容

80 篇文章 0 订阅

订阅专栏

1.获取客户所选择的坐标


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> 
  <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <title>Google 地图 JavaScript API 示例: 标记拖动事件</title> 
    <script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"
            type="text/javascript"></script> 
    <script type="text/javascript"> 
    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("zan_canvas"));
        var center = new GLatLng(39.917,116.397);
        map.setCenter(center, 14);

        var marker = new GMarker(center, {draggable: true});

        GEvent.addListener(marker, "dragstart", function() {
          map.closeInfoWindow();
        });
        GEvent.addListener(marker, "dragend", function() {
        	var windowHtml="<span style='color:gray'>";
        	windowHtml=windowHtml+"纬度："+marker.getLatLng().lat()+"<br />经度："+marker.getLatLng().lng();
        	windowHtml=windowHtml+"</span>";
          marker.openInfoWindowHtml(windowHtml);
          document.getElementById("lat").value=marker.getLatLng().lat();
          document.getElementById("lng").value=marker.getLatLng().lng();
        });

        map.addOverlay(marker);
        map.addControl(new GSmallMapControl());
        map.disableDragging()//禁用地图拖拽,默认为允许，禁止拖拽后，缩放好像自动会被禁止
        map.disableDoubleClickZoom()//禁用双击缩放，默认为允许
      }
    }
    </script> 
  </head> 
  <body onload="initialize()" onunload="GUnload()"> 
    <div id="zan_canvas" style="width: 500px; height: 300px"></div>
    <div>
    纬度：<input type="text" name="lat" id="lat" />
    经度：<input type="text" name="lng" id="lng" />
    </div>
    <div>
    做客户端程序的时候，加上form，并将input改为hidden即可
    http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/v2/examples/
    </div>
  </body> 
</html>

使用以上代码，即可获得客户选择的位置经纬度，将此数值保存到数据库
2.展示客户选择的位置



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> 
  <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <title>Google 地图 JavaScript API 示例: 信息窗口</title> 
    <script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"
            type="text/javascript"></script> 
    <script type="text/javascript"> 
    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(39.91717540663561, 116.41757011413574), 14);
        map.openInfoWindow(map.getCenter(),
                           document.createTextNode("地铁五号线，灯市口站。"));
      }
    }
    </script> 
  </head> 
  <body onload="initialize()" onunload="GUnload()"> 
    <div id="map_canvas" style="width: 700px; height: 300px"></div> 
 <div>
    <img src="http://ditu.google.cn/maps/api/staticmap?zoom=14&size=300x300&maptype=roadmap&mobile=true&markers=39.91717540663561,116.41757011413574&sensor=false&language=zh_CN" />
  	</div>
  </body> 
</html>

其它用法参考http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/v2/examples/

mush_me

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
谷歌地图使用例子

1.获取客户所选择的坐标[code="java"] Google 地图 JavaScript API 示例: 标记拖动事件 function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(doc...
复制链接

扫一扫