<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>默认浏览器客户端IP定位</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
body, button, input, select, textarea {
font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
p{
width:603px;
padding-top:3px;
overflow:hidden;
}
#container{
min-width:600px;
min-height:767px;
}
#city{
height:30px;
display:none;
}
</style>
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
<script>
var citylocation, geocoder, map, marker = null;
var prov, city, area, address;
var markersArray = [];
// 搜索
function geolocation_add() {
var storeAdd = $("#client_add").val();
geocoder.getLocation(storeAdd);
var lat = $("#lat").val();
var lng = $("#lng").val();
if (lat == null || lat == "" || lng == null || lng == "") {
// 调用城市经纬度查询接口实现经纬查询
geocoder.getAddress(new qq.maps.LatLng(lat, lng));
}
}
// 调用省
function geolocation_localprov(localprov) {
clearOverlays();
prov = localprov;
citylocation.searchCityByName(localprov);
}
// 调用市
function geolocation_localcity(localcity) {
clearOverlays();
city = localcity;
localcity = prov + "," + localcity;
geocoder.getLocation(localcity);
}
// 调用区
function geolocation_localarea(localarea) {
clearOverlays();
area = localarea;
localarea = prov + "," + city + "," + localarea;
geocoder.getLocation(localarea);
}
// 调用详细地址
function getaddressll(localaddress) {
address = localaddress;
clearOverlays();
var storeAdd = prov + "," + city + "," + area + "," + localaddress;
geocoder.getLocation(storeAdd);
}
// 添加标记
function addMarker(location) {
var marker = new qq.maps.Marker({
position : location,
map : map
});
markersArray.push(marker);
}
// 清除覆盖层
function clearOverlays() {
if (markersArray) {
for ( var int = 0; int < markersArray.length; int++) {
markersArray[int].setMap(null);
}
markersArray.length = 0;
}
}
var city = document.getElementById("city");
map = new qq.maps.Map(document.getElementById('container'), {
zoom : 13
});
// 获取城市位置信息查询 接口
citylocation = new qq.maps.CityService({
// 设置地图
map : map,
complete : function(results) {
city.style.display = 'inline';
map.setCenter(results.detail.latLng);
addMarker(results.detail.latLng);// 标记
$("#lat").val(results.detail.latLng.lat);
$("#lng").val(results.detail.latLng.lng);
}
});
// 调用查询ip接口查询信息
citylocation.searchCityByIP(getip);
// 调用地址解析类
geocoder = new qq.maps.Geocoder(
{
complete : function(result) {
clearOverlays();
map.setCenter(result.detail.location);
var marker = new qq.maps.Marker({
map : map,
position : result.detail.location
});
markersArray.push(marker);
addressComponents = result.detail.addressComponents;
if (addressComponents.province == ""
|| addressComponents.province == null
|| addressComponents.province == addressComponents.city) {
// 地址赋值
$("#city_select").citySelect(
{
nodata : "none",
required : false,
prov : (addressComponents.city)
.replace("市", ""),
city : addressComponents.district,
dist : "",
url : citylist
});
} else {
// 地址赋值
$("#city_select").citySelect(
{
nodata : "none",
required : false,
prov : (addressComponents.province)
.replace("省", ""),
city : (addressComponents.city)
.replace("市", ""),
dist : addressComponents.district,
url : citylist
});
}
if (address == "" || address == null) {
$("#SADDRESS").val(addressComponents.street);
} else {
$("#SADDRESS").val(address);
}
$("#lat").val(result.detail.location.lat);
$("#lng").val(result.detail.location.lng);
}
});
// 绑定单击事件添加参数
qq.maps.event.addListener(map, 'click', function(event) {
var marker = new qq.maps.Marker({
position : event.latLng,
map : map
});
markersArray.push(marker);
qq.maps.event.addListener(map, 'click', function(event) {
marker.setMap(null);
clearOverlays();
});
// 调用城市经纬度查询接口实现经纬查询
geocoder.getAddress(event.latLng);
$("#lat").val(event.latLng.lat);
$("#lng").val(event.latLng.lng);
});
};
init();
$("#city_select").citySelect({
nodata : "none",
required : false,
prov : PROVINCE,
city : CITY,
dist : AREA,
url : citylist
});
$("#class_select").citySelect({
nodata : "none",
required : false,
prov : TYPEOFONE,
city : TYPEOFTWO,
url : storetype
});
</head>
<body οnlοad="init()">
<span id="city"></span>
<div id="container"></div>
<p>根据客户端IP定位地图中心位置。</p>
</body>
</html>