`
zcw_java
  • 浏览: 303016 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

利用JS获取经纬度,定位html地图

 
阅读更多
<!--
  copyright (c) 2009 Google inc.
  You are free to copy and use this sample.
  License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license
-->
<!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 Maps API Sample</title>
    <style type="text/css">
      @import url("http://www.google.com/uds/css/gsearch.css");
      @import url("http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css");
    </style>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q"
      type="text/javascript"></script>
    <script src="http://www.google.com/uds/api?file=uds.js&amp;v=1.0" type="text/javascript"></script>

    <script src="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js" type="text/javascript"></script>
    function initialize() {
      if (GBrowserIsCompatible()) {
        // Create and Center a Map36.1019825, 103.6055232)
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(36.1019825, 103.6055232), 13);
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
    
        // bind a search control to the map, suppress result list
        map.addControl(new google.maps.LocalSearch(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,20)));
		
      }
    }
    GSearch.setOnLoadCallback(initialize);

    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()" style="font-family: Arial;border: 0 none;">
    <div id="map_canvas" style="width: 500px; height: 300px"></div>
  </body>
</html>


通过地址获取经纬度
<%@ page language="java" errorPage="/error.jsp" pageEncoding="UTF-8" contentType="text/html;charset=utf-8" %>
<%@ include file="/common/taglibs.jsp" %>
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="/styles/ui_common_style.css" rel="stylesheet" type="text/css" />
<script src="http://ditu.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA_zi7L6cpe4J1WluhuKve0BT1V3LlcAyZs_rJnbX4McegqDYCtBT4TtSQRAm_03EocwOwlLLyaxG2zg" type="text/javascript"></script>
<script type="text/javascript" src="/scripts/jquery.js"></script>
<script src="/scripts/validate.js" type="text/javascript"></script>
<script src="/scripts/ssjl_Registered.js" type="text/javascript"></script>
<script src="/scripts/message.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function(){
        var lonNum;
        var latNum;
        $(":input[name=\'submit\']").click(function(){
            if(Detect()){
            var address=document.getElementById('Address').value;
            var geocoder = new GClientGeocoder();
               geocoder.getLatLng(
                address,
                function(point) {
                    var mycars=new Array()
                    mycars = new String(point).split(",");
                    latNum = mycars[0].substring(1);
                    lonNum = mycars[1].substring(1,mycars[1].length-1);
                    var $form = $("#user").serialize();
                        $.ajax({
                            type:"POST",
                            url:"cpRegistered.aa?op=1&lonNum="+lonNum+"&latNum="+latNum,
                            dataType:"text",
                            data:$form,
                            asyns:false,
                            success:function(res){
                                if(res=="emailFail"){
                                    alert("此邮箱已经有人使用,请更换后在试试!");
                                }else if(res=="200"){
                                     open_message("注册成功");
                                     setTimeout(function(){
                                         location.href="cpManagerInit.ca";
                                     },1800)
                                }else{
                                    open_message("注册失败");
                                }
                            }
                        })
                    }
                );
            }
        })
    })    
</script>
</head>
<body style="overflow-x: hidden; overflow-y: auto">
  <div class="frame">
    <!--top part begin-->
    <div class="txt_title">新建商家信息</div>
    <form id="user">
    <div class="tooltab">
	  <div class="nowrap left">
        <input class=" wd_50 btn" type="button" value="提交" name="submit">
	    <input class=" wd_50 btn" type="reset" value="重置" name="reset">
	  </div>

	  <div class="clr">&nbsp;</div>

    </div>
	<!--top part end-->

	<div class="EditorBody">

	  <div style=" width:100%;height:100%;overflow: hidden;">

	    <div class="EditorBlock" style=" width:860px;height:auto;overflow-x: hidden; overflow-y: auto;">



		    <fieldset id="BusinessBasicInformation">

		      <div class="rowOne nowrap">
		        <div class="secrowOne">
		          <label><span class="labelTitle">联系人名称:</span>
                      <input id="Contact" class="text reqd Contact" type="text" title="Enter your Contact"  name="extAttributes.attr4" onblur="Validation(this);" value="联系人*" onfocus="Alt(this);"/>                      
			      </label>
		        </div>

			    <div class="secrowTwo">
		          <label><span class="labelTitle">联系人电话:</span>
                      <input id="ContactPhone" class="text reqd ContactPhone" type="text" title="Enter your Contact Phone" name="phoneNumber" onblur="Validation(this);"  value="联系人电话*" onfocus="Alt(this);"/>			        
			      </label>
		        </div>

			    <div class="clr"></div>

		      </div>


		      <div class="rowTwo nowrap">

			    <div class="secrowOne">
		          <label><span class="labelTitle">联系人邮箱:</span>
			       <input id="ContactE-mail" class="text reqd ContactE-mail" type="text" title="Enter your Contact E-mail" name="email" onblur="Validation(this);" value="联系人邮箱*" onfocus="Alt(this);"/>
			      </label>
		        </div>

			    <div class="secrowTwo nowrap">
		          <label><span class="labelTitle">商家名称:</span>
		            <input id="BusinessName" class="text reqd BusinessName" type="text" title="Enter your Business Name"  name="displayName" onblur="Validation(this);" value="商家名称*" onfocus="Alt(this);"/>
			      </label>
		        </div>

			    <div class="clr"></div>

		      </div>

		    </fieldset>

		    <fieldset id="BusinessBasicInformation_2">

		      <div class="rowThree nowrap">

			    <div class="secrowOne">
		          <label><span class="labelTitle">商家介绍:</span>
                    <textarea id="BusinessIntroduction" class="text reqd BusinessIntroduction" type="text" rows="3"  name="extAttributes.attr5" onblur="Validation(this);" value="商家介绍*" onfocus="Alt(this);"></textarea>
			      </label>
		        </div>

			    <div class="clr"></div>

		      </div>

		      <div class="rowFour nowrap">

			    <div class="secrowOne">
		          <label><span class="labelTitle">商家类型:</span>
			        <select id="BusinessType"  class="text reqd BusinessType" name="extAttributes.attr2" style="display: block;>
                        <option value="0" class="text">请选择类型</option>
                        <c:forEach items="${requestScope.serviceType}" var="types">
                             <option value="${types.name}" class="text">${types.name}</option>
                        </c:forEach>
                    </select>
			      </label>
		        </div>

			    <div class="clr"></div>

		      </div>

		    </fieldset>

		    <fieldset id="BusinessAddress">

		      <div class="rowFive nowrap">

		        <div class="secrowOne">
		          <label><span class="labelTitle">所在国家名称:</span>
			        <input id="CountryName" type="text" disabled="true"  class="text reqd CountryName" value="中国" />
			      </label>
		        </div>

			    <div class="secrowTwo">
		          <label><span class="labelTitle">所在省份名称:</span>
			        <select id="ProvinceName"  class="text reqd ProvinceName" name="store_province" title="Enter your Province Name" onchange="Validation(this);">
                    </select>
			      </label>
		        </div>

                <div class="secrowThree">
		          <label><span class="labelTitle">所在城市名称:</span>
			        <select id="CityName"  class="text reqd CityName" name="store_city" title="Enter your CityName" onchange="Validation(this);">
                        <option value="东城">东城</option>
                  </select>
			      </label>
		        </div>
			    <div class="clr"></div>

		      </div>


		      <div class="rowSix nowrap">

			    <div class="secrowOne">
		          <label><span class="labelTitle">商家地址:</span>
			        <input id="Address" class="text reqd Address" type="text" title="Enter your Address" name="store_address" onblur="Validation(this);" value="商家地址*" onfocus="Alt(this);"/>
			      </label>
		        </div>

			    <div class="secrowTwo">
		          <label><span class="labelTitle">邮政编码:</span>
		            <input id="ZipCode" class="text reqd ZipCode" type="text" title="Enter your Zip Code"  name="store_postalCode" onblur="Validation(this);" value="邮政编码*" onfocus="Alt(this);"/>
			      </label>
		        </div>

			    <div class="clr"></div>

		      </div>
			</fieldset>



	    </div>

	    <div class="tooltab tooltab_bottom">
        <input class=" wd_50 btn" type="button" value="提交" name="submit">
	    <input class=" wd_50 btn" type="reset" value="重置" name="reset">
	    </div>
	  </div>
        </div>
	</form>
    </div>
  </div>
</body>
</html>

http://www.cnblogs.com/liongis/archive/2011/03/01/1967593.html
http://code.google.com/intl/zh-CN/apis/maps/faq.html#keysystem
分享到:
评论
1 楼 yahier 2014-05-05  
没帮助。。。。。。

相关推荐

    天地图搜索及获取经纬度工具

    "天地图搜索及获取经纬度工具"是一款专为天地图设计的应用程序,它结合了地图搜索和坐标获取的功能,使得用户能够方便地在地图上定位并标记特定的地理位置。这款工具对于需要精确地理信息的场景非常实用,比如测绘、...

    天地图搜索及获取经纬度工具 (含大量注释对于初学很有帮助)

    "天地图搜索及获取经纬度工具"是一款专为初学者设计的应用程序,它结合了天地图服务,使得用户能够方便地进行地理位置搜索,并且能够获取到相应的经纬度坐标。这个工具对于那些正在学习地理信息系统(GIS)、Web开发...

    根据点击的地图获取经纬度

    在Web端实现点击地图获取经纬度,通常我们会使用地图API,如Google Maps API、高德地图API或百度地图API等。这里以Google Maps API为例进行讲解。首先,在HTML文件中引入Google Maps API的JavaScript库,并创建一个...

    调用百度地图接口单击获取地图的经纬度和定位特效

    在IT行业中,地图接口的使用是常见的需求,特别...总之,调用百度地图接口能够轻松地在网页上实现地图交互,包括获取经纬度和添加各种视觉效果。通过不断探索和实践,开发者可以利用这些功能构建出富有创意的GIS应用。

    C#调用百度地图获取经纬度

    标题"**C#调用百度地图获取经纬度**"指出了主要的任务:在C#程序中通过调用JavaScript来获取百度地图上的经纬度信息。这通常涉及到以下步骤: 1. **引入百度地图API**:在C#程序中,我们需要加载包含百度地图API的...

    百度地图根据地址获取经纬度

    本文将深入探讨如何利用百度地图API来根据用户输入的地址获取经纬度,并在地图上进行展示。 首先,我们要了解的是“地址解析”这一概念。地址解析是将人类可读的地址转化为地理坐标(经纬度)的过程。在百度地图API...

    输入经纬度在百度地图上实现定位

    本教程将详细讲解如何利用百度地图API,输入经纬度实现地图上的定位。百度地图API是百度提供的免费服务,它允许开发者在网页或移动端集成地图功能,包括定位、路径规划等。 首先,我们需要了解经纬度。经纬度是一种...

    QT5使用百度地图实现经典经纬度查询

    3. **网络通信**:在实现经纬度查询时,需要通过网络发送请求到百度地图API,获取查询结果。这涉及到HTTP请求和响应的处理,通常使用QT的QNetworkAccessManager和QNetworkReply类来完成。开发者需要构造合适的URL,...

    html中使用canvas实现对在线获取的瓦片地图源数据的的重新拼凑、放大缩小、经纬度定位

    本话题将深入探讨如何使用Canvas与JavaScript技术来处理在线获取的瓦片地图源数据,实现地图的重新拼凑、放大缩小以及经纬度定位功能。 首先,我们需要了解瓦片地图的工作原理。瓦片地图是一种将地球表面分成多个...

    C#通过经纬度进行定位(百度地图)

    以上是使用C#结合百度地图API进行经纬度定位的一些核心概念和步骤。在实际开发过程中,你可能还需要根据具体需求调整和扩展功能,例如添加路线规划、搜索周边地点等功能。记得在开发过程中遵守百度地图的使用条款,...

    用C#开发的百度地图根据经纬度标记地图上的位置

    然后,我们将涉及如何集成百度地图API,并利用经纬度数据来定位地图上的点。 一、C#基础知识 C#是一种面向对象的编程语言,由微软公司开发,广泛用于构建Windows桌面应用、Web应用和服务。在C#中,我们通过定义类和...

    百度地图经纬度获取工具

    综上所述,"百度地图经纬度获取工具"结合了前端开发技术、地图服务API、地理坐标系统知识以及用户体验设计等多个方面,为用户提供了一个简洁且实用的获取经纬度的平台。在实际应用中,这样的工具对于需要地理位置...

    百度地图 获取经纬度的html页面.7z

    总的来说,通过学习这个示例,我们可以掌握在HTML页面中集成百度地图API以获取经纬度的基本方法,这对于开发定位相关的Web应用非常有用。记住,始终要遵循合法和合规的数据使用原则,尊重用户隐私。

    js腾讯地图api获取坐标定位地理位置_soso地图api获取坐标

    在IT行业中,JavaScript(简称js...在JavaScript中使用腾讯地图API获取坐标定位地理位置,首先需要在HTML中引入腾讯地图的JavaScript库。这通常通过在标签内添加一个标签完成,指定腾讯地图的CDN链接。例如: ```html ...

    js 获取经纬度的实现方法

    根据以上知识点的解析,可以了解到,使用JavaScript获取经纬度并不仅仅是直接获取用户地理位置,还可以是创建一个地图实例并展示特定位置。本例主要演示了后者,通过Google Maps API创建地图并设置一个中心点。实际...

    根据经纬度画路线百度地图

    5. **交互操作**:可以通过监听地图的事件,如`click`,来实现点击地图获取经纬度坐标的功能。还可以通过API提供的方法进行缩放、平移等操作。 6. **离线使用**:虽然百度地图API主要是在线服务,但通过`BMap.Local...

    全国省地图坐标经纬度js文件

    《全国省地图坐标经纬度js文件》 在前端开发中,尤其是在构建地图应用时,获取准确的地理位置信息是至关重要的。本资源提供了一个名为`china.js`的JavaScript文件,它包含了中国所有省份以及主要城市的经纬度坐标...

    silverlight for arcgis 服务调用,经纬度定位

    本文将深入探讨如何利用Silverlight for ArcGIS调用服务器服务,实现经纬度定位,并通过闪烁提示用户的功能。 首先,我们需要了解Silverlight的基本概念。Silverlight是Microsoft推出的一种富互联网应用程序(RIA)...

    通过调用百度地图直接在自己的页面中选取经纬度

    以上步骤基本涵盖了将百度地图集成到网页并获取经纬度的整个流程。用户可以选择点击地图上的任意位置,或者使用定位功能,网页都能获取到相应的经纬度坐标。这些坐标可以用于各种用途,比如在地图上标记位置、计算两...

    基于js实现百度地图api定位当前位置和获取经度和纬度

    通过以上步骤,你就可以在网页中利用JavaScript和百度地图API实现定位当前位置并获取详细的经纬度信息。对于压缩包中的其他文件,如`pagination.rar`、`获取位置信息.rar`、`js百度地图api坐标地址标注功能.rar`和`...

Global site tag (gtag.js) - Google Analytics