实际的实现十分简单
<!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>请输入关键字：</label></td>
</tr>
<tr>
<td><input id="tipinput" /></td>
</tr>
<tr>
<td>请选择打卡范围</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
}); //构造地点查询类
AMap.event.addListener(auto, "select", select); //注册监听，当选中某条记录时会触发
function select(e) {
placeSearch.setCity(e.poi.adcode);
placeSearch.search(e.poi.name); //关键字查询查询
}
var coordinate;
AMap.event.addListener(placeSearch, "markerClick", function(e) {
// alert(e.data.location); //当前marker的经纬度信息
coordinate = e.data.location;
});
function draw() {
// map.remove(circleMarker)
// //获取选中的selectchangeevent对象
// 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对象
function CreateXMLHttpRequest() {
if (window.ActiveXObject)
//如果当前浏览器支持Active Xobject，则创建ActiveXObject对象
{
//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)
//如果当前浏览器支持XMLHttp Request，则创建XMLHttpRequest对象
{
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) //发送请求
{
CreateXMLHttpRequest(); //创建对象
//var parm = "act=firstweather" ;//构造URL参数
//antique = escape(antique);
var parm = "organization_code=" + organization_code + "&name=" + name + "¢er=" + center + "&radius=" + radius; //构造URL参数
xmlobj.open("POST", "/product-engine/doLocationSave.do", true);
xmlobj.setRequestHeader("cache-control", "no-cache");
xmlobj.setRequestHeader("contentType", "text/html;charset=uft-8") //指定发送的编码
xmlobj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;"); //设置请求头信息
// xmlobj.onreadystatechange = StatHandler; //判断URL调用的状态值并处理
console.log(parm);
xmlobj.send(parm); //设置为发送给服务器数据
}
</script>
</body>
</html>
打卡.PNG
网友评论