<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>编辑折线、多边形、圆
<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=c8c550c7e31dfabfba5b78ecf75f9dee&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.PolyEditor">
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js">
<script src="https://lib.sinaapp.com/js/jquery/2.2.4/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8">
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js">
<style type="text/css" media="screen">
.button-group {position:absolute;top:0px;right:20px;font-size:12px;padding:10px;}
#myPageTop {
position:absolute;
top:5px;
left:0px;
width:50%;
background:#fff none repeat scroll 0 0;
border:1px solid #ccc;
margin:10px auto;
padding:6px;
font-family:"Microsoft Yahei", "���ź�", "Pinghei";
font-size:14px;
}
.button-group .button {
height:28px;
line-height:28px;
background-color:#0D9BF2;
color:#FFF;
border:0;
outline:none;
padding-left:5px;
padding-right:5px;
border-radius:3px;
margin-bottom:4px;
cursor:pointer;
bottom:0;
position:absolute;
right:200%;
}
<div id="container">
<div class="button-group">
<input type="button" class="button" value="地图编辑完成" onClick="closeEditPolygon();"/>
<div id="myPageTop">
<label>请输入关键字：
<input id="tipinput"/>
<div style="position:absolute;bottom:4%;right:45%;" id="clear"><input type="button" class="button" value="清除标记点" onClick="clearMarks();"/>
var editorTool, map =new AMap.Map("container", {
resizeEnable:true,
searchOption: {
city:'银川市',
citylimit:true
},
mapCenterJson:{'银川市':[106.258889,38.472273],'石嘴山市':[106.376173,39.01333],'吴忠市':[106.199409,37.986165],'固原市':[106.285241,36.004561],'中卫市':[105.189568,37.514951]},
mapCenter:[106.258889,38.472273],
zoom:16,
mapStyle:"amap://styles/8b6be8ec497009e17a708205348b899a", //设置地图样式
markers: [],
});
var beginNum =0;
var clickListener ;
var beginPoints;
var beginMarks ;
var polygonEditor;
var resPolygon = [];
var resNum =0;
init();
//输入提示
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); //关键字查询查询
}
function init(){
beginPoints = [];
beginMarks = [];
beginNum =0;
polygonEditor ='';
clickListener = AMap.event.addListener(map, "click", mapOnClick);
}
function mapOnClick(e) {
beginMarks.push(addMarker(e.lnglat));
beginPoints.push(e.lnglat);
beginNum++;
if(beginNum ==3){
AMap.event.removeListener(clickListener);
var polygon =createPolygon(beginPoints);
polygonEditor =createEditor(polygon);
}
};
function createPolygon(arr){
var polygon =new AMap.Polygon({
map:map,
path: arr,
strokeColor:"#0000ff",
strokeOpacity:1,
strokeWeight:3,
fillColor:"#f5deb3",
fillOpacity:0.35
});
return polygon;
}
function createEditor(polygon){
var polygonEditor =new AMap.PolyEditor(map, polygon);
polygonEditor.open();
AMap.event.addListener(polygonEditor,'end',polygonEnd);
return polygonEditor;
}
function closeEditPolygon(){
polygonEditor.close();
window.location.assign('shebeibangding.html');
//window.sj_fh();
}
function sj_fh() {
window.history.back();
}
function polygonEnd(res){
resPolygon.push(res.target);
appendHideHtml(resNum,res.target.getPath());
json2arr(res.target.getPath());
resNum++;
init();
}
function appendHideHtml(index,arr){
var strify =JSON.stringify(arr);
var html ='<input type="hidden" id="index'+index+'" name="paths[]" value="'+strify+'">';
$('body').append(html);
}
function clearMarks(){
window.location.reload();
}
function json2arr(json){
var arr = json;
var res = [];
for (var i =0; i < arr.length; i++) {
var line = [];
var jsstr =qqMapTransBMap(arr[i].lng, arr[i].lat)
res.push(jsstr)
};
// console.log(res)
localStorage.setItem('res',res);
}
// 实例化点标记
function addMarker(lnglat) {
var marker =new AMap.Marker({
icon:"http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
position: lnglat
});
marker.setMap(map);
return marker;
}
function qqMapTransBMap(lng, lat) {
let x_pi =3.14159265358979324 *3000.0 /180.0;
let x = lng;
let y = lat;
let z =Math.sqrt(x * x + y * y) +0.00002 *Math.sin(y * x_pi);
let theta =Math.atan2(y, x) +0.000003 *Math.cos(x * x_pi);
let lngs = z *Math.cos(theta) +0.0065;
let lats = z *Math.sin(theta) +0.006;
return "lng:" + lngs +",lat:"+lats
}
</html>
