共计 6151 个字符，预计需要花费 16 分钟才能阅读完成。
在 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>
正文完
