qq.maps.Geocoder 類(lèi)
地址解析類(lèi)。用于在地址和經(jīng)緯度之間進(jìn)行轉(zhuǎn)換的服務(wù)。
構(gòu)造函數(shù)
| 構(gòu)造函數(shù) |
|---|
Geocoder(opts?:GeocoderOptions) |
方法
| 方法 | 返回值 | 說(shuō)明 |
|---|---|---|
getAddress(latlng:LatLng) | none | 根據(jù)指定的坐標(biāo)進(jìn)行解析。 |
getLocation(address:String) | none | 根據(jù)指定的地址進(jìn)行解析。 |
setComplete(callback:Function) | none | 設(shè)置檢索成功后的回調(diào)函數(shù)，參數(shù)對(duì)象：{type:ServiceResultType.GEO_INFO,detail:Object. <GeoInfo>} |
setError(callback:Function) | none | 設(shè)置檢索失敗后的回調(diào)函數(shù)。 |
實(shí)例
例子 1：
本示例中，設(shè)置地址解析服務(wù)屬性
JavaScript
var geocoder, map, marker = null;
var init = function() {
var center = new qq.maps.LatLng(39.916527, 116.397128);
map = new qq.maps.Map(document.getElementById('container'), {
center: center,
zoom: 15,
});
//地址和經(jīng)緯度之間進(jìn)行轉(zhuǎn)換服務(wù)
geocoder = new qq.maps.Geocoder();
//設(shè)置服務(wù)請(qǐng)求成功的回調(diào)函數(shù)
geocoder.setComplete(function(result) {
map.setCenter(result.detail.location);
var marker = new qq.maps.Marker({
map: map,
position: result.detail.location
});
//點(diǎn)擊Marker會(huì)彈出反查結(jié)果
qq.maps.event.addListener(marker, 'click', function() {
alert("坐標(biāo)地址為： " + result.detail.location);
});
});
//若服務(wù)請(qǐng)求失敗，則運(yùn)行以下函數(shù)
geocoder.setError(function() {
alert("出錯(cuò)了，請(qǐng)輸入正確的地址?。?！");
});
}
function codeAddress() {
var address = document.getElementById("address").value;
//對(duì)指定地址進(jìn)行解析
geocoder.getLocation(address);
}JavaScript+HTML
<!DOCTYPE html>
<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>地址解析</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;
margin-top: 10px;
overflow: hidden;
}
input#address {
width: 300px;
}
</style>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
</head>
<body onload="init()">
<script>
var geocoder, map, marker = null;
var init = function() {
var center = new qq.maps.LatLng(39.916527, 116.397128);
map = new qq.maps.Map(document.getElementById('container'), {
center: center,
zoom: 15,
});
//地址和經(jīng)緯度之間進(jìn)行轉(zhuǎn)換服務(wù)
geocoder = new qq.maps.Geocoder();
//設(shè)置服務(wù)請(qǐng)求成功的回調(diào)函數(shù)
geocoder.setComplete(function(result) {
map.setCenter(result.detail.location);
var marker = new qq.maps.Marker({
map: map,
position: result.detail.location
});
//點(diǎn)擊Marker會(huì)彈出反查結(jié)果
qq.maps.event.addListener(marker, 'click', function() {
alert("坐標(biāo)地址為： " + result.detail.location);
});
});
//若服務(wù)請(qǐng)求失敗，則運(yùn)行以下函數(shù)
geocoder.setError(function() {
alert("出錯(cuò)了，請(qǐng)輸入正確的地址?。?！");
});
}
function codeAddress() {
var address = document.getElementById("address").value;
//對(duì)指定地址進(jìn)行解析
geocoder.getLocation(address);
}
</script>
<div>
<input id="address" type="textbox" value="中國(guó),北京,海淀區(qū),海淀大街38號(hào)">
<button onclick="codeAddress()">search</button>
</div>
<div style="width:603px;height:300px" id="container"></div>
<p>輸入地址，點(diǎn)擊search進(jìn)行地址解釋,點(diǎn)擊Marker會(huì)彈出反查結(jié)果。</p>
</body>
</html>例子 2：
本示例中，設(shè)置反地址解析服務(wù)屬性
JavaScript
var geocoder, map, marker = null;
var init = function() {
var center = new qq.maps.LatLng(39.916527, 116.397128);
map = new qq.maps.Map(document.getElementById('container'), {
center: center,
zoom: 13
});
//地址和經(jīng)緯度之間進(jìn)行轉(zhuǎn)換服務(wù)
geocoder = new qq.maps.Geocoder();
//設(shè)置服務(wù)請(qǐng)求成功的回調(diào)函數(shù)
geocoder.setComplete(function(result) {
map.setCenter(result.detail.location);
var marker = new qq.maps.Marker({
map: map,
position: result.detail.location
});
//點(diǎn)擊Marker會(huì)彈出反查結(jié)果
var info = new qq.maps.InfoWindow({
map: map
});
qq.maps.event.addListener(marker, 'click', function() {
info.open();
info.setContent('<div style="width:280px;height:100px;">' +
result.detail.address + '</div>');
info.setPosition(result.detail.location);
});
});
//若服務(wù)請(qǐng)求失敗，則運(yùn)行以下函數(shù)
geocoder.setError(function() {
alert("出錯(cuò)了，請(qǐng)輸入正確的經(jīng)緯度?。?！");
});
}
function codeLatLng() {
//獲取輸入框的經(jīng)緯度
var input = document.getElementById("latLng").value;
var latlngStr = input.split(",", 2);
var lat = parseFloat(latlngStr[0]);
var lng = parseFloat(latlngStr[1]);
var latLng = new qq.maps.LatLng(lat, lng);
//對(duì)指定經(jīng)緯度進(jìn)行解析
geocoder.getAddress(latLng);
}JavaScript+HTML
<!DOCTYPE html>
<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>反地址解析</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;
margin-top: 10px;
overflow: hidden;
}
</style>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
</head>
<body onload="init()">
<script>
var geocoder, map, marker = null;
var init = function() {
var center = new qq.maps.LatLng(39.916527, 116.397128);
map = new qq.maps.Map(document.getElementById('container'), {
center: center,
zoom: 13
});
//地址和經(jīng)緯度之間進(jìn)行轉(zhuǎn)換服務(wù)
geocoder = new qq.maps.Geocoder();
//設(shè)置服務(wù)請(qǐng)求成功的回調(diào)函數(shù)
geocoder.setComplete(function(result) {
map.setCenter(result.detail.location);
var marker = new qq.maps.Marker({
map: map,
position: result.detail.location
});
//點(diǎn)擊Marker會(huì)彈出反查結(jié)果
var info = new qq.maps.InfoWindow({
map: map
});
qq.maps.event.addListener(marker, 'click', function() {
info.open();
info.setContent('<div style="width:280px;height:100px;">' +
result.detail.address + '</div>');
info.setPosition(result.detail.location);
});
});
//若服務(wù)請(qǐng)求失敗，則運(yùn)行以下函數(shù)
geocoder.setError(function() {
alert("出錯(cuò)了，請(qǐng)輸入正確的經(jīng)緯度?。。?);
});
}
function codeLatLng() {
//獲取輸入框的經(jīng)緯度
var input = document.getElementById("latLng").value;
var latlngStr = input.split(",", 2);
var lat = parseFloat(latlngStr[0]);
var lng = parseFloat(latlngStr[1]);
var latLng = new qq.maps.LatLng(lat, lng);
//對(duì)指定經(jīng)緯度進(jìn)行解析
geocoder.getAddress(latLng);
}
</script>
<div>
<input id="latLng" type="textbox" value="39.98174,116.30631">
<input type="button" value="search" onclick="codeLatLng()">
</div>
<div style="width:603px;height:300px" id="container"></div>
<p>輸入坐標(biāo)，點(diǎn)擊search進(jìn)行反地址解釋?zhuān)c(diǎn)擊marker會(huì)彈出反查結(jié)果。</p>
</body>
</html>
