實(shí)際的實(shí)現(xiàn)十分簡(jiǎn)單
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>高德test</title>
<style>
container {
width: 800px;
height: 580px;
}
</style>
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.13&key=你的key&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.CircleMarker"></script>
</head>
<body>
<div id="myPageTop">
<table>
<tr>
<td><label>請(qǐng)輸入關(guān)鍵字：</label></td>
</tr>
<tr>
<td><input id="tipinput" /></td>
</tr>
<tr>
<td>請(qǐng)選擇打卡范圍</td>
</tr>
<tr>
<td><select name="radius" id="radius">
<option value="100">100米</option>
<option value="200">200米</option>
<option value="300">300米</option>
</select></td>
</tr>
<tr>
<td>
<button id="draw" onclick="draw()">查看</button>
<button id="setbar" onclick="setbar()">確定</button>
</td>
</tr>
</table>
</div>
<div id="container"></div>
<script type="text/javascript">
// window.onLoad = function () {
// console.log("!!!!");
// if (window != window.top) {
// window.top.location = location;
// }
//
// }
//地圖加載
var map = new AMap.Map("container", {
resizeEnable : true
});
//輸入提示
var autoOptions = {
input : "tipinput"
};
var auto = new AMap.Autocomplete(autoOptions);
var placeSearch = new AMap.PlaceSearch({
map : map
}); //構(gòu)造地點(diǎn)查詢類
AMap.event.addListener(auto, "select", select); //注冊(cè)監(jiān)聽，當(dāng)選中某條記錄時(shí)會(huì)觸發(fā)
function select(e) {
placeSearch.setCity(e.poi.adcode);
placeSearch.search(e.poi.name); //關(guān)鍵字查詢查詢
}
var coordinate;
AMap.event.addListener(placeSearch, "markerClick", function(e) {
// alert(e.data.location); //當(dāng)前marker的經(jīng)緯度信息
coordinate = e.data.location;
});
function draw() {
// map.remove(circleMarker)
// //獲取選中的selectchangeevent對(duì)象
// var obj = ;
// var poi = obj.data;
// var coordinate = poi.getLatLonPoint();
var coo = coordinate;
//清除原有圓
var a = map.getAllOverlays('circle');
map.remove(a);
var obj = document.getElementById("radius");
var index = obj.selectedIndex;
var rad = obj.options[index].value;
//畫圓
var circleMarker = new AMap.Circle({
center : coo, // 圓心位置
radius : rad, // 圓半徑
fillColor : '#1791fc', // 圓形填充顏色
strokeColor : '#fff', // 描邊顏色
strokeWeight : 1, // 描邊寬度
});
map.add(circleMarker);
}
var xmlobj; //定義XMLHttpRequest對(duì)象
function CreateXMLHttpRequest() {
if (window.ActiveXObject)
//如果當(dāng)前瀏覽器支持Active Xobject，則創(chuàng)建ActiveXObject對(duì)象
{
//xmlobj = new ActiveXObject("Microsoft.XMLHTTP");
try {
xmlobj = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlobj = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlobj = false;
}
}
} else if (window.XMLHttpRequest)
//如果當(dāng)前瀏覽器支持XMLHttp Request，則創(chuàng)建XMLHttpRequest對(duì)象
{
xmlobj = new XMLHttpRequest();
}
}
function setbar() {
var obj = document.getElementById("radius");
var index = obj.selectedIndex;
var rad = obj.options[index].value;
var poiname = document.getElementById("tipinput").value;
var organization_code = "010245";//sessionStorage.getItem("organization_code");
SubmitArticle(organization_code, poiname, coordinate, rad);
}
function SubmitArticle(organization_code, name, center, radius) //發(fā)送請(qǐng)求
{
CreateXMLHttpRequest(); //創(chuàng)建對(duì)象
//var parm = "act=firstweather" ;//構(gòu)造URL參數(shù)
//antique = escape(antique);
var parm = "organization_code=" + organization_code + "&name=" + name + "¢er=" + center + "&radius=" + radius; //構(gòu)造URL參數(shù)
xmlobj.open("POST", "/product-engine/doLocationSave.do", true);
xmlobj.setRequestHeader("cache-control", "no-cache");
xmlobj.setRequestHeader("contentType", "text/html;charset=uft-8") //指定發(fā)送的編碼
xmlobj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;"); //設(shè)置請(qǐng)求頭信息
// xmlobj.onreadystatechange = StatHandler; //判斷URL調(diào)用的狀態(tài)值并處理
console.log(parm);
xmlobj.send(parm); //設(shè)置為發(fā)送給服務(wù)器數(shù)據(jù)
}
</script>
</body>
</html>
