|
|
@@ -22,83 +22,52 @@
|
|
|
<body>
|
|
|
<div id="mapF" class="map" tabindex="0"></div>
|
|
|
|
|
|
- <div style="padding: 0 10px;">
|
|
|
- <div style="position: absolute;top: 0;display:inline-block;width: 50%;padding-top: 10px;">
|
|
|
- <select id="selectId" class="select02">
|
|
|
- </select>
|
|
|
- </div>
|
|
|
+ <div id="myPageTop">
|
|
|
+ <input id="tipinput" />
|
|
|
</div>
|
|
|
|
|
|
- <div id="notification" style="display: none;">
|
|
|
- <div class="mask"> </div>
|
|
|
- <div class="content"> </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="input-card" style="width: 120px;bottom: 40px;">
|
|
|
- <button class="btn" onclick="handlePolygon('新增')" style="margin-bottom: 5px">新建</button>
|
|
|
- <button class="btn" onclick="handlePolygon('编辑')" style="margin-bottom: 5px">开始编辑</button>
|
|
|
- <button class="btn" onclick="handlePolygon('保存')" style="margin-bottom: 5px">结束编辑</button>
|
|
|
-
|
|
|
- <button class="btn btn-red" type="button" id="postMessage" onclick="sendMessage()"> postMessage</button>
|
|
|
+ <div style="display:flex; width: 100%; position: absolute; bottom: 50px;justify-content: center;">
|
|
|
+ <button class="btn" onclick="handleButtom('重画')"
|
|
|
+ style="width: 80px;border: 0;background-color: #d9001b; color:#fff;padding: 0.60rem 0.5rem;margin-right: 15px;">重画</button>
|
|
|
+ <button class="btn" onclick="handleButtom('保存')"
|
|
|
+ style="width: 80px;border: 0;background-color: #25A5F7; color:#fff;padding: 0.60rem 0.5rem;margin-left: 15px;">保存</button>
|
|
|
</div>
|
|
|
|
|
|
<script src="https://a.amap.com/jsapi_demos/static/china.js"></script>
|
|
|
- <script type="text/javascript"
|
|
|
- src="https://webapi.amap.com/maps?v=2.0&key=8e266e1ac2ad2383c7773ff504ac248f&plugin=AMap.PolygonEditor"></script>
|
|
|
+ <script type="text/javascript">
|
|
|
+ window._AMapSecurityConfig = {
|
|
|
+ securityJsCode: 'ce0e44758ad6b69607e23bf8e6a6ac11',
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+ <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=14aefebea926bb958032d5daf836fadf">
|
|
|
+ </script>
|
|
|
+
|
|
|
<script type="text/javascript" src="https://webapi.amap.com/ui/1.1/main.js"></script>
|
|
|
<script type="text/javascript" src="./js/jquery-2.2.1.min.js"></script>
|
|
|
- <script src="./js/M_select/M_select.js"></script>
|
|
|
|
|
|
<!-- uni 的 SDK -->
|
|
|
<!-- 需要把 uni.webview.1.5.4.js 下载到自己的服务器 -->
|
|
|
- <script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"></script>
|
|
|
+ <script type="text/javascript" src="./js/uni.webview.1.5.4.js"></script>
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
- var checkedArray = {
|
|
|
- checkedData: 1,
|
|
|
- checkedList: [
|
|
|
- { value: 1, label: "消防站" },
|
|
|
- { value: 2, label: "消防车" },
|
|
|
- { value: 3, label: "监控" },
|
|
|
- { value: 4, label: "重点单位" },
|
|
|
- { value: 5, label: "消火栓/天然水源" },
|
|
|
- ],
|
|
|
- }//类型筛选
|
|
|
-
|
|
|
- $.each(checkedArray.checkedList, function (i, item) {
|
|
|
- $("#selectId").append(`<option value="${item.value}">${item.label}</option>`)
|
|
|
- })
|
|
|
- $(function () {
|
|
|
- $(".select02").M_select({
|
|
|
- // 手动添加下拉款图片（以html页面为起始位置写路径）
|
|
|
- "Img": "./js/M_select/up4.png",
|
|
|
- "Img2": "./js/M_select/down4.png",
|
|
|
- "radius": "15px",
|
|
|
- "Title": "--请选择--",
|
|
|
- "inputName": "selected_value",
|
|
|
- // 默认选中的值（参数值写需要选中的select的value值）
|
|
|
- "selected": "1",
|
|
|
- Succee: function () {
|
|
|
- checkedArray.checkedData = parseInt($(".inputHidden").val())
|
|
|
- mapCluster();
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
|
|
|
- //点击遮罩层关闭
|
|
|
- $('#notification .mask').on('click', function (e) {
|
|
|
- $('#notification').css('display', 'none')
|
|
|
+ var form = {};
|
|
|
+ var typeName = "";
|
|
|
|
|
|
- $('#notification .content #xxxx').remove()
|
|
|
- })
|
|
|
- </script>
|
|
|
+ var map = [];
|
|
|
|
|
|
- <script type="text/javascript">
|
|
|
+ var marker = null;//创建点标记
|
|
|
+ var regeocode = {};//获取解析详细地址数据存储
|
|
|
+ var longitude = "";//点标记经度数据存储
|
|
|
+ var latitude = "";//点标记纬度数据存储
|
|
|
|
|
|
- var map = [];
|
|
|
- var polyEditor = null; //创建画布数据存储
|
|
|
- var polygon1 = null; //选中地图区域数据存储
|
|
|
+ var polyEditor = null; //创建画布
|
|
|
+ var polyEditorArray = [];//画布数据存储
|
|
|
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 初始化
|
|
|
+ */
|
|
|
function initMap() {
|
|
|
map = new AMap.Map("mapF", {
|
|
|
// mapStyle: 'amap://styles/d0ddc09bd7cbd7331a8e8fa691e5b0da', //设置地图的显示样式
|
|
|
@@ -110,50 +79,266 @@
|
|
|
|
|
|
map.setFitView();
|
|
|
|
|
|
- polyEditor = new AMap.PolygonEditor(map);
|
|
|
+ setTimeout(() => {
|
|
|
+ AMap.plugin(["AMap.PolygonEditor,AMap.PolylineEditor"], function () {
|
|
|
+ handleAutoComplete();//调用输入提示功能
|
|
|
+
|
|
|
+ if (typeName === "点") {
|
|
|
+ marker = new AMap.Marker({});//初始化点标记
|
|
|
+ handleMarker();
|
|
|
+ } else if (typeName === "线") {
|
|
|
+ polyEditor = new AMap.PolylineEditor(map);//初始化画布
|
|
|
+ handlePolyline();
|
|
|
+ } else if (typeName === "面") {
|
|
|
+ polyEditor = new AMap.PolygonEditor(map);//初始化画布
|
|
|
+ handlePolygon();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }, 1000);
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
- * 面
|
|
|
+ * 输入提示
|
|
|
*/
|
|
|
- function handlePolygon(clickType) {
|
|
|
- if (clickType === "新增") {
|
|
|
+ function handleAutoComplete() {
|
|
|
+ AMap.plugin(["AMap.PlaceSearch", "AMap.AutoComplete", "AMap.Geocoder"], function () {
|
|
|
+ var autoOptions = {
|
|
|
+ input: "tipinput",
|
|
|
+ };
|
|
|
+ var auto = new AMap.AutoComplete(autoOptions);
|
|
|
+
|
|
|
+ var placeSearch = new AMap.PlaceSearch({
|
|
|
+ city: "全国",
|
|
|
+ map: map,
|
|
|
+ }); //构造地点查询类
|
|
|
+ auto.on("select", select); //注册监听，当选中某条记录时会触发
|
|
|
+ function select(e) {
|
|
|
+ longitude = e.lnglat.getLng()
|
|
|
+ latitude = e.lnglat.getLat()
|
|
|
+
|
|
|
+ placeSearch.setCity(e.poi.adcode);
|
|
|
+ placeSearch.search(e.poi.name); //关键字查询查询
|
|
|
+
|
|
|
+ handleAddress()
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 点
|
|
|
+ */
|
|
|
+ function handleMarker() {
|
|
|
+ //地图点标记回显
|
|
|
+ if (form.longitude && form.latitude) {
|
|
|
+ longitude = form.longitude
|
|
|
+ latitude = form.latitude
|
|
|
+
|
|
|
+ marker = new AMap.Marker({
|
|
|
+ position: new AMap.LngLat(form.longitude, form.latitude), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
|
|
+ });
|
|
|
+
|
|
|
+ handleAddress()
|
|
|
+ }
|
|
|
+
|
|
|
+ //为地图注册click事件获取鼠标点击出的经纬度坐标
|
|
|
+ map.on("click", function (e) {
|
|
|
+ longitude = e.lnglat.getLng()
|
|
|
+ latitude = e.lnglat.getLat()
|
|
|
+
|
|
|
+ map.remove([marker]);
|
|
|
+ marker = new AMap.Marker({
|
|
|
+ position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
|
|
+ });
|
|
|
+
|
|
|
+ handleAddress()
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 线
|
|
|
+ */
|
|
|
+ function handlePolyline() {
|
|
|
+ var polygon = new AMap.Polyline({
|
|
|
+ path: form.gpsAreas
|
|
|
+ })
|
|
|
+
|
|
|
+ if (form.gpsAreas.length > 0) {
|
|
|
+ map.add([polygon]);
|
|
|
+
|
|
|
polyEditor.close();
|
|
|
- polyEditor.setTarget();
|
|
|
+ polyEditor.setTarget(polygon);
|
|
|
polyEditor.open();
|
|
|
- } else if (clickType === "编辑") {
|
|
|
- polyEditor.open();
|
|
|
- } else if (clickType === "保存") {
|
|
|
+
|
|
|
+ polyEditorArray = form.gpsAreas
|
|
|
+ } else {
|
|
|
polyEditor.close();
|
|
|
+ polyEditor.setTarget();
|
|
|
+ polyEditor.open();
|
|
|
}
|
|
|
+
|
|
|
+ polyEditor.on("end", function (event) {
|
|
|
+ //绘制结束后坐标集合
|
|
|
+ polyEditorArray = event.target.$x[0]
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
- initMap();
|
|
|
+ /**
|
|
|
+ * 面
|
|
|
+ */
|
|
|
+ function handlePolygon() {
|
|
|
+ var polygon = new AMap.Polygon({
|
|
|
+ path: form.gpsAreas
|
|
|
+ })
|
|
|
+
|
|
|
+ if (form.gpsAreas.length > 0) {
|
|
|
+ map.add([polygon]);
|
|
|
|
|
|
+ polyEditor.close();
|
|
|
+ polyEditor.setTarget(polygon);
|
|
|
+ polyEditor.open();
|
|
|
|
|
|
- if (window.plus) {
|
|
|
- plusReady();
|
|
|
- }//加上此判断以免再浏览器打开h5页面时报plus is not define
|
|
|
- function plusReady() {
|
|
|
- if (plus.webview.getWebviewById("batch_view")) {
|
|
|
- const appData = plus.webview.getWebviewById("batch_view").data;
|
|
|
- alert(JSON.stringfy(appData))
|
|
|
+ polyEditorArray = form.gpsAreas
|
|
|
+ } else {
|
|
|
+ polyEditor.close();
|
|
|
+ polyEditor.setTarget();
|
|
|
+ polyEditor.open();
|
|
|
}
|
|
|
+
|
|
|
+ polyEditor.on("end", function (event) {
|
|
|
+ //绘制结束后坐标集合
|
|
|
+ polyEditorArray = event.target._opts.path
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
- function sendMessage() {
|
|
|
- uni.postMessage({
|
|
|
- data: 'Hello from web page!'
|
|
|
+ /**
|
|
|
+ * 反解析地址
|
|
|
+ */
|
|
|
+ function handleAddress() {
|
|
|
+ AMap.plugin(["AMap.Geocoder"], function () {
|
|
|
+ let zb = [longitude, latitude];
|
|
|
+ map.add(marker);
|
|
|
+ marker.setPosition(zb);
|
|
|
+ var geocoder = new AMap.Geocoder({
|
|
|
+ city: "", //城市设为北京，默认：“全国”
|
|
|
+ radius: 1000, //范围，默认：500
|
|
|
+ });
|
|
|
+ geocoder.getAddress(zb, function (status, result) {
|
|
|
+ if (status === "complete" && result.regeocode) {
|
|
|
+ regeocode = result.regeocode
|
|
|
+ } else {
|
|
|
+ alert("根据经纬度查询地址失败");
|
|
|
+ }
|
|
|
+ });
|
|
|
});
|
|
|
+ }
|
|
|
|
|
|
+ /**
|
|
|
+ * APP-PLUS
|
|
|
+ * 接收父页面传过来的值
|
|
|
+ */
|
|
|
+ window.receiveData = function (msg) {
|
|
|
+ // console.log("子页面：", msg)
|
|
|
+ // alert(msg.dataType)
|
|
|
+ form = msg.dataArray
|
|
|
+ typeName = msg.dataType
|
|
|
+ initMap();
|
|
|
+ }
|
|
|
|
|
|
- var item = "previewFile";
|
|
|
- if (window.parent) {
|
|
|
- window.parent.postMessage(item, '*');
|
|
|
+ /**
|
|
|
+ * H5
|
|
|
+ * 接收父页面传过来的值
|
|
|
+ */
|
|
|
+ window.addEventListener("message", function (event) {
|
|
|
+ if ("funcName" in event.data) {
|
|
|
+ console.log("子页面：", event);
|
|
|
+ form = JSON.parse(event.data.param)
|
|
|
+ typeName = event.data.typeName
|
|
|
}
|
|
|
- }
|
|
|
+ initMap();
|
|
|
+ });
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 按钮点击事件
|
|
|
+ */
|
|
|
+ function handleButtom(value) {
|
|
|
+ if (value == '重画') {
|
|
|
+ if (typeName === "点") {
|
|
|
+ map.remove([marker]);
|
|
|
+ form.longitude = ""
|
|
|
+ form.latitude = ""
|
|
|
+ form.province = ""
|
|
|
+ form.city = ""
|
|
|
+ form.area = ""
|
|
|
+ form.streetTown = ""
|
|
|
+ form.facilityAddress = ""
|
|
|
+ form.address = ""
|
|
|
+ } else if (typeName === "线" || typeName === "面") {
|
|
|
+ polyEditor.close();
|
|
|
+ polyEditor.setTarget();
|
|
|
+ polyEditor.open();
|
|
|
+ map.clearMap();
|
|
|
+ polyEditorArray = []
|
|
|
+ }
|
|
|
+
|
|
|
+ } else if (value == '保存') {
|
|
|
+
|
|
|
+ if (typeName === "点") {
|
|
|
+ form.longitude = longitude
|
|
|
+ form.latitude = latitude
|
|
|
+
|
|
|
+ form.province = regeocode.addressComponent.province
|
|
|
+ form.city = regeocode.addressComponent.city
|
|
|
+ form.area = regeocode.addressComponent.district
|
|
|
+ form.streetTown = regeocode.addressComponent.township;
|
|
|
+ form.facilityAddress = regeocode.addressComponent.street + regeocode.addressComponent.streetNumber;
|
|
|
+ form.address =
|
|
|
+ form.province + form.city + form.area + form.streetTown + regeocode.addressComponent.street + regeocode.addressComponent.streetNumber;
|
|
|
+ } else if (typeName === "线" || typeName === "面") {
|
|
|
+ polyEditor.close();
|
|
|
+ form.gpsAreas = polyEditorArray
|
|
|
+ }
|
|
|
+
|
|
|
+ //向主页面推送消息
|
|
|
|
|
|
+ //APP-PLUS
|
|
|
+ uni.postMessage({
|
|
|
+ data: JSON.stringify(form)
|
|
|
+ });
|
|
|
+
|
|
|
+ //H5
|
|
|
+ var message = {
|
|
|
+ funcName: "message",
|
|
|
+ param: JSON.stringify(form),
|
|
|
+ };
|
|
|
+ if (window.parent) {
|
|
|
+ window.parent.postMessage(message, '*');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
+ <style>
|
|
|
+ #myPageTop {
|
|
|
+ position: absolute;
|
|
|
+ left: 10px;
|
|
|
+ top: 10px;
|
|
|
+ background: transparent;
|
|
|
+ font-family: "Microsoft Yahei", "微软雅黑", "Pinghei";
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #myPageTop input {
|
|
|
+ width: 18rem;
|
|
|
+ border: 1px solid #ced4da;
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #myPageTop input:focus {
|
|
|
+ outline: none;
|
|
|
+ border-radius: 5px;
|
|
|
+ border: 1px solid #25A5F7;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
</body>
|
|
|
|
|
|
</html>
|
fanghuisheng