<!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" />
<script type="text/javascript" src="js/Area.js"></script>
<script type="text/javascript" src="js/AreaData_min.js"></script>
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script charset="utf-8" src="http://map.qq.com/api/js?v=1"></script>
<title>添加门店</title>
<script type="text/javascript">
$(function (){
initComplexArea('seachprov', 'seachcity', 'seachdistrict', area_array, sub_array, '41', '0', '0');
});
//得到地区码
function getAreaID(){
var area = 0;
if($("#seachdistrict").val() != "0"){
area = $("#seachdistrict").val();
}else if ($("#seachcity").val() != "0"){
area = $("#seachcity").val();
}else{
area = $("#seachprov").val();
}
return area;
}
//根据地区码查询地区名
function getAreaNamebyID(areaID){
var areaName = "";
if(areaID.length == 2){
areaName = area_array[areaID];
$("#province").val(area_array[areaID]);
}else if(areaID.length == 4){
var index1 = areaID.substring(0, 2);
areaName = area_array[index1] + " " + sub_array[index1][areaID];
$("#province").val(area_array[index1]);
$("#city").val(sub_array[index1][areaID]);
}else if(areaID.length == 6){
var index1 = areaID.substring(0, 2);
var index2 = areaID.substring(0, 4);
areaName = area_array[index1] + " " + sub_array[index1][index2] + " " + sub_arr[index2][areaID];
$("#province").val(area_array[index1]);
$("#city").val(sub_array[index1][index2]);
$("#district").val(sub_arr[index2][areaID]);
}
return areaName;
}
var geocoder,map,marker = null;
var init = function() {
var center = new soso.maps.LatLng(34.754504,113.706663);
map = new soso.maps.Map(document.getElementById('container'),{
center: center,
zoomLevel: 15
});
geocoder = new soso.maps.Geocoder();
var label;
map.setCursor("default");
soso.maps.Event.addListener(map,"mousedown",function(){
map.setCursor("default");
});
//绑定点击事件
soso.maps.Event.addListener(map,"click",function(){
$("#longitude").val($("#longitude1").val());
$("#latitude").val($("#latitude1").val());
});
//给map绑定mousemove事件
soso.maps.Event.addListener(map,"mousemove",function(e){
var gl=e.latLng;
if(!label){
label=new soso.maps.Label({
map:map,
position:gl
});
}else{
label.setContent(
gl.getLat().toFixed(6)+","+gl.getLng().toFixed(6)
)
}
setLabelPoi(label,gl);
});
soso.maps.Event.addListener(map,"mouseout",function(e){
label&&label.setMap(null);
});
function setLabelPoi(lab,latlng){
lab.setMap(map);
//根据地理坐标获取相对地图容器的像素坐标。
var point=map.fromLatLngToContainerPixel(latlng);
var pointN=new soso.maps.Point(
point.getX()+15,
point.getY()+30
);
//根据相对地图容器的像素坐标获取地理坐标。
var gl=map.fromContainerPixelToLatLng(pointN);
lab.setPosition(gl);
lab.setContent(
latlng.getLat().toFixed(6)+","+latlng.getLng().toFixed(6)
);
$("#longitude1").val(latlng.getLat().toFixed(6));
$("#latitude1").val(latlng.getLng().toFixed(6));
};
}
function codeAddress() {
var address = getAreaNamebyID(getAreaID())+$("#address").val();
geocoder.geocode({'address': address}, function(results, status) {
if (status == soso.maps.GeocoderStatus.OK) {
map.setCenter(results.location);
if (marker != null) {
marker.setMap(null);
}
marker = new soso.maps.Marker({
map: map,
position:results.location
});
} else {
alert("检索没有结果，原因: " + status);
}
});
}
</script>
<style type="text/css">
.header { height:50px; border-bottom:#999 solid; border-width:1px}
A {text-decoration: NONE; font-weight:bold; color:#03F}
</style>
</head>
<body onload="init()">
<div style="margin-top:20px; width:70%; margin:20px auto">
</div>
<div style="width:60%; margin:0 auto;">
<form method="post" action="" >
<input type="hidden" id="longitude1"/>
<input type="hidden" id="latitude1"/>
<table width="100%" border="0" cellpadding="4" cellspacing="0" bgcolor="#FFFFFF" >
<tr>
<td height="30" align="right" bgcolor="#FFFFFF" style=" border-bottom:1px #CCCCCC dashed">地址：</td>
<td bgcolor="#FFFFFF" style=" border-bottom:1px #CCCCCC dashed">
<select id="seachprov" onChange="changeComplexProvince(this.value, sub_array, 'seachcity', 'seachdistrict');"></select>
<select id="seachcity" onChange="changeCity(this.value,'seachdistrict','seachdistrict');"></select>
<span id="seachdistrict_div">
<select id="seachdistrict"></select>
</span>
<input id="province" type="hidden" name="province">
<input id="city" type="hidden" name="city">
<input id="district" type="hidden" name="district">
</td>
</tr>
<tr>
<td width="100" height="30" align="right" bgcolor="#FFFFFF" style=" border-bottom:1px #CCCCCC dashed">街道地址：</td>
<td bgcolor="#FFFFFF" style=" border-bottom:1px #CCCCCC dashed" class="link_lan">
<input name="address" type="text" id="address" value=""/>
<input type="button" onclick="codeAddress()" value="定位"/>
</td>
</tr>
<tr>
<td height="30" align="right" bgcolor="#FFFFFF" style=" border-bottom:1px #CCCCCC dashed">经度：</td>
<td bgcolor="#FFFFFF" style=" border-bottom:1px #CCCCCC dashed">
<input name="longitude" type="text" id="longitude" value="" readonly="readonly"/><span style=" font-size:0.8em">（点击地图定位经度）</span>
</td>
</tr>
<tr>
<td height="30" align="right" bgcolor="#FFFFFF" style=" border-bottom:1px #CCCCCC dashed">纬度：</td>
<td bgcolor="#FFFFFF" style=" border-bottom:1px #CCCCCC dashed">
<input name="latitude" type="text" id="latitude" value="" readonly="readonly"/><span style=" font-size:0.8em">（点击地图定位纬度）</span>
</td>
</tr>
<tr>
<td height="30" align="right" bgcolor="#FFFFFF" style=" border-bottom:1px #CCCCCC dashed">位置：</td>
<td bgcolor="#FFFFFF" style=" border-bottom:1px #CCCCCC dashed">
<div id="container" style="width:500px; height:400px"></div>
</td>
</tr>
<tr>
<td height="30" align="right" > </td>
<td height="50" >
<input name="submit" type="submit" class="admin_submit" value="提交" onclick ="return valid();"/> </td>
</tr>
</table>
</form>
</div>
</script>
</body>
</html>
省市区三级联动传值名称+省市区腾讯地图定位+经纬度定位
4星 · 超过85%的资源 需积分: 5 21 浏览量
2014-12-02
15:12:40
上传
评论 5
收藏 68KB ZIP 举报 
location.zip （4个子文件） 
location js 
AreaData_min.js 143KB jquery-1.7.min.js 92KB Area.js 3KB
addlocation.html 7KB资源评论
zgp231532015-06-28非常感谢,虽然样式有些问题,但很容易修改- w35040802017-03-07以js 形式给的省市级联.自己转了下 到数据库.
- ruibin5702017-01-16不错，刚好用到
- 成都易瑞2015-06-22腾讯地图感觉没有百度用的多
