高德地图js实现全国和某区域地图相互切换效果

在layui弹窗中内嵌高德地图、实现自由选点坐标、以及设置地图边界（边界外的内容不展示）

效果图：

引入jq、layui，主要使用了layui弹窗组件于左上角开关选择的组件，当然也可以使用原生或者其他组件，当单选改变的时候去更新地图参数也是一样的，重新渲染地图，默认以银川区域为例，当右上角开关改变后就会切换到全国地图。

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;
      }

找了很久高德地图没有自带点击选点API，选点只能AMap.Marker的方式实现点击自由选点的功能，可以自定义坐标点的图片，然后可以通过调用affrimFormat方法获取到对应坐标

选项切换时都会创建两个不同的地图实例，当为银川选项时会重新创建某区域下的地图实例（通过districtMap方法中进行配置：区域位置、区域边框样式...）。