在layui弹窗中内嵌高德地图、实现自在选点坐标、以及设置地图边界（边界外的内容不展现）
效果图：
引入jq、layui，次要应用了layui弹窗组件于左上角开关抉择的组件，当然也能够应用原生或者其余组件，当单选扭转的时候去更新地图参数也是一样的，从新渲染地图，默认以银川区域为例，当右上角开关扭转后就会切换到全国地图。
<link rel="stylesheet" href="../../layui/css/layui.css" media="all" /> <script src="../../layui/layui.js"></script> <script src="../../js/jquery.min.js"></script>css款式和html局部
html, body, #container { width: 100%; height: 100%; } .amap-icon > img { width: 19px; height: 31px; } .switch { z-index: 999; position: absolute; right: 10px; top: 0; } <div id="container"></div> <div id="myPageTop"> <input type="text" id="autoText" name="title" required lay-verify="required" placeholder="请输出关键字进行搜寻" autocomplete="off" class="layui-input" /> <input type="text" id="autoText_all" style="display: none" name="title" required lay-verify="required" placeholder="请输出关键字进行搜寻" autocomplete="off" class="layui-input" /> <div class="layui-form switch"> <input type="checkbox" name="open" checked="" lay-skin="switch" lay-filter="switchTest" lay-text="银川市区|全国" /> </div> </div> <div class="testAddre"> <font id="testAddreInfo"> </font> </div> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的高德key&plugin=AMap.Autocomplete,AMap.DistrictSearch" ></script> <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>找了很久高德地图没有自带点击选点API，选点只能AMap.Marker的形式实现点击自在选点的性能，能够自定义坐标点的图片，而后能够通过调用affrimFormat办法获取到对应坐标
选项切换时都会创立两个不同的地图实例，当为银川选项时会从新创立某区域下的地图实例（通过districtMap办法中进行配置：区域地位、区域边框款式...）。
<script type="text/javascript"> layui.use("form", function () { var form = layui.form; form.on("switch(switchTest)", function (data) { if (this.checked) { $("#autoText").show(); $("#autoText_all").hide(); map = districtMap(); } else { //全国 $("#autoText_all").show(); $("#autoText").hide(); map = new AMap.Map("container", { resizeEnable: true, }); map.on("click", showInfoClick); } }); }); // 选中的地位的坐标 var coordinate = []; // 点标记容器 var marker = ""; //搜寻服务 var placeSearch; var detailAddressList = {}; //初始化地图对象，加载地图 function districtMap() { var opts = { subdistrict: 1, extensions: "all", level: "city", }; var map = new AMap.Map("container", { resizeEnable: true, center: [106.227885, 38.486581], //默认定位到银川坐标 zoom: 11, }); var district = new AMap.DistrictSearch(opts); district.search("银川市", function (status, result) { var outer = [ new AMap.LngLat(-360, 90, true), new AMap.LngLat(-360, -90, true), new AMap.LngLat(360, -90, true), new AMap.LngLat(360, 90, true), ]; var holes = result.districtList[0].boundaries; var pathArray = [outer]; pathArray.push.apply(pathArray, holes); var polygon = new AMap.Polygon({ //多边形填充色彩，应用16进制颜色代码赋值，如：#FFAA00 fillColor: "#fcf9f2", //多边形填充透明度，取值范畴[0,1]，0示意齐全通明，1示意不通明。默认为0.9 fillOpacity: 1, //轮廓线款式，实线:solid，虚线:dashed strokeStyle: "solid", }); polygon.setPath(pathArray); map.add(polygon); }); map.on("click", showInfoClick); return map; } // 搜寻框 --输出提醒插件 var auto = new AMap.Autocomplete({ input: "autoText", city: "银川市", citylimit: true, }); AMap.event.addListener(auto, "select", select); var auto_all = new AMap.Autocomplete({ input: "autoText_all", }); AMap.event.addListener(auto_all, "select", select); map = districtMap(); function select(e) { if (e.poi && e.poi.location) { // 获取具体地址并实例化以后标注点 getPositionByLonLats(e.poi.location.lng, e.poi.location.lat); addMarker(e.poi.location.lng, e.poi.location.lat); map.setZoom(13); map.setCenter(e.poi.location); } } // 实例化点标记 function addMarker(lng, lat) { map.remove(marker); marker = new AMap.Marker({ icon: "mark_r.png", position: new AMap.LngLat(lng, lat), title: "", }); marker.setMap(map); } function showInfoClick(e) { console.log(e); document.getElementById("autoText").value = ""; clearMarker(); getPositionByLonLats(e.lnglat.getLng(), e.lnglat.getLat()); addMarker(e.lnglat.getLng(), e.lnglat.getLat()); coordinate = [e.lnglat.getLng(), e.lnglat.getLat()]; console.log(coordinate); } // 革除 marker function clearMarker() { if (!placeSearch) { return; } if (placeSearch) { placeSearch.render && placeSearch.render.markerList.clear(); } else { placeSearch.clear(); } map.remove(marker); } // 依据经纬度取得具体地址 function getPositionByLonLats(lng, lat) { var lnglatXY = [lng, lat]; // 地图上所标点的坐标 AMap.service("AMap.Geocoder", function () { // 回调函数 geocoder = new AMap.Geocoder({}); geocoder.getAddress(lnglatXY, function (status, result) { if (status === "complete" && result.info === "OK") { var address = result.regeocode.formattedAddress;Label({ marker.set content: "<div class='info'>地址：" + address + "</div>", //设置文本标注内容 direction: "top", //设置文本标注方位 }); clickAddr = address; marker.setIcon("../../images/mark_r.png"); searchNearBy("", lnglatXY, 10000); } else { } }); }); } // 依据经纬度取得肯定范畴内具体地址 function searchNearBy(keyword, LngLat, radius) { AMap.service(["AMap.PlaceSearch"], function () { //结构地点查问类 placeSearch = new AMap.PlaceSearch({ pageSize: 5, // 单页显示后果条数 pageIndex: 1, // 页码 type: "", // 趣味点类别 extensions: "all", fillColor: "0", map: map, // 展示后果的地图实例 panel: "testAddreInfo", // 后果列表将在此容器中进行展现。 autoFitView: true, // 是否主动调整地图视线使绘制的 Marker点都处于视口的可见范畴 }); //关键字查问 }); placeSearch.searchNearBy( keyword, LngLat, radius, function (status, result) { console.log(status, result); detailAddressList = {}; if (result.info == "OK") { result.poiList.pois.forEach(function (val) { detailAddressList[val.address] = val.pname + val.cityname + val.adname + val.name; coordinate = [val.location.lng, val.location.lat]; }); } } ); placeSearch.on("selectChanged", function (e) { clickAddr = ""; map.remove(marker); }); } function affrimFormat() { var val = ""; if (document.querySelector("#testAddreInfo .amap_lib_placeSearch_ul")) { if ( document.querySelector( "#testAddreInfo .amap_lib_placeSearch_ul .poibox.selected .poi-info .poi-addr" ) == null && clickAddr != "" ) { return clickAddr; } val = document .querySelector( "#testAddreInfo .amap_lib_placeSearch_ul .poibox.selected .poi-info .poi-addr" ) .innerText.replace("地址：", ""); var name = document.querySelector( "#testAddreInfo .amap_lib_placeSearch_ul .poibox.selected .poi-title .poi-name" ).innerText; val = detailAddressList[val] + val + name; } else { val = document.querySelector("#testAddreInfo").innerText; } return val; } // 点击事件事件绑定 function search(val) { AMap.service(["AMap.PlaceSearch"], function () { //结构地点查问类 placeSearch = new AMap.PlaceSearch({ pageSize: 5, // 单页显示后果条数 pageIndex: 1, // 页码 extensions: "all", map: map, // 展示后果的地图实例 panel: "testAddreInfo", // 后果列表将在此容器中进行展现。 autoFitView: true, // 是否主动调整地图视线使绘制的 Marker点都处于视口的可见范畴 }); //关键字查问 placeSearch.search(val, function (status, result) { console.log(status, result); detailAddressList = {}; if (result.info == "OK") { result.poiList.pois.forEach(function (val) { detailAddressList[val.address] = val.pname + val.cityname + val.adname; coordinate = [val.location.lng, val.location.lat]; }); } }); }); } </script>