在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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。