利用JS獲取經緯度,定位html地圖
阿新 • • 發佈：2019-02-14
<!--
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&v=2&key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q"
type="text/javascript"></script>
<script src="http://www.google.com/uds/api?file=uds.js&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&v=2&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"> </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