|
|
@@ -0,0 +1,267 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>智能选址</title>
|
|
|
+ <link rel="stylesheet" href="css/mapcon.css">
|
|
|
+ <!-- 引入 Vue -->
|
|
|
+ <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
|
|
|
+ <!-- 引入样式 -->
|
|
|
+ <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
|
|
+ <!-- 引入组件库 -->
|
|
|
+ <script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
|
|
+ <script type="text/javascript"
|
|
|
+ src="https://api.map.baidu.com/api?v=2.0&ak=7XivTux4H2e1ifKLjvEhxfuayDYxAluq"></script>
|
|
|
+ <!-- jquery-->
|
|
|
+ <script src="js/jquery-3.5.1.min.js"></script>
|
|
|
+ <script src="js/urljson.js"></script>
|
|
|
+ <style>
|
|
|
+ .contentleft {
|
|
|
+ width: 50%;
|
|
|
+ min-width: 841px;
|
|
|
+ background-color: #EDF5FF;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #333;
|
|
|
+ padding: 15px 30px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .choseButton {
|
|
|
+ width: 223px;
|
|
|
+ height: 69px;
|
|
|
+ background: #4B98F6;
|
|
|
+ border-radius: 10px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 69px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ width: 100%;
|
|
|
+ margin: auto;
|
|
|
+ background: #FFFFFF;
|
|
|
+ padding: 10px 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-top: 25px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .contentleft>.content {
|
|
|
+ width: 100%;
|
|
|
+ height: 1000px;
|
|
|
+ overflow-y: scroll;
|
|
|
+ }
|
|
|
+
|
|
|
+ .contentleft>.content::-webkit-scrollbar {
|
|
|
+ width: 0px;
|
|
|
+ height: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #znxz>.top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1px solid #B7C7DC;
|
|
|
+ background: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .typetitle {
|
|
|
+ margin: 10px auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fwhy {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fwhy .list {
|
|
|
+ width: 199px;
|
|
|
+ height: 52px;
|
|
|
+ line-height: 52px;
|
|
|
+ text-align: center;
|
|
|
+ background: #DEEDFF;
|
|
|
+ border-radius: 10px;
|
|
|
+ border: 1px solid #4B98F6;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #4B98F6;
|
|
|
+ margin-left: 10px;
|
|
|
+ margin-bottom: 19px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .fwhy .list.active{
|
|
|
+ background: #4B98F6;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div id="znxz">
|
|
|
+ <div class="top">
|
|
|
+ <div class="toplogo">
|
|
|
+ <img src="images/gyylogo.png" alt="">
|
|
|
+ <span>智能选址</span>
|
|
|
+ </div>
|
|
|
+ <div class="backbutton" @click="window.history.go(-1)">
|
|
|
+ <img src="images/back1.png" alt="">
|
|
|
+ <span>返回</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;">
|
|
|
+ <div class="contentleft" id="">
|
|
|
+ <div style="color: #4B98F6;">我们将根据您的条件为您推荐最合适的企业选址</div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="typetitle">1.请选择您的服务行业</div>
|
|
|
+ <div class="fwhy">
|
|
|
+ <div class="list" :class="{ active: currentfwhy == item.id }" :key="index" v-for="(item,index) in fwhyList"
|
|
|
+ @click="handleParkChange(item)">{{item.name}}</div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;margin-top: 100px;">
|
|
|
+ <div class="choseButton" style="color: #4B98F6;background: #FFFFFF;border: 2px solid #4B98F6;">
|
|
|
+ 重新选择</div>
|
|
|
+ <div class="choseButton" style="
|
|
|
+ box-shadow: 0px 13px 9px 0px rgba(24,111,240,0.31);">下一步</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="contentright" id="mapcontainer"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</body>
|
|
|
+<script>
|
|
|
+ new Vue({
|
|
|
+ el: '#znxz',
|
|
|
+ data: function () {
|
|
|
+ return {
|
|
|
+ reqPtah: '',
|
|
|
+ currentfwhy: 1,
|
|
|
+ fwhyList: [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ name: "软信服务业"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ name: "工业用地"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ name: "制造业"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ name: "商业"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
+ name: "商贸流通业"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 6,
|
|
|
+ name: "医药流通"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 7,
|
|
|
+ name: "电子信息"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 8,
|
|
|
+ name: "医疗器械"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ backIndex() {
|
|
|
+ window.history.go(-1)
|
|
|
+ },
|
|
|
+ handleParkChange(data) {
|
|
|
+ this.currentfwhy = data.id;
|
|
|
+ },
|
|
|
+ getParkData(id) {
|
|
|
+ let that = this;
|
|
|
+ $.ajax({
|
|
|
+ url: conpath + "/selectionAddr/listAll/" + id,
|
|
|
+ type: "get",
|
|
|
+ dataType: "json",
|
|
|
+ success: function (data) {
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getParkDetail(id) {
|
|
|
+ let that = this;
|
|
|
+ $.ajax({
|
|
|
+ url: conpath + "/parkData/" + id,
|
|
|
+ type: "get",
|
|
|
+ dataType: "json",
|
|
|
+ success: function (data) {
|
|
|
+ that.loadMap(data.addr);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ loadMap(points) {
|
|
|
+ let that = this;
|
|
|
+ that.parkMap = new BMap.Map("mapcontainer");
|
|
|
+ that.parkMap.enableScrollWheelZoom();// 启用滚轮缩放
|
|
|
+ that.parkMap.enableDragging(); // 启用拖拽功能
|
|
|
+ const addr = new URL(window.location.href);
|
|
|
+ const id = addr.searchParams.get('id');
|
|
|
+ // 设定中心点和地图级别
|
|
|
+ if (id == 1) {
|
|
|
+ that.parkMap.centerAndZoom(new BMap.Point(106.651444, 29.45682), 14);
|
|
|
+ } else if (id == 2) {
|
|
|
+ that.parkMap.centerAndZoom(new BMap.Point(106.76723874457288, 29.573276880811712), 14);
|
|
|
+ } else if (id == 3) {
|
|
|
+ that.parkMap.centerAndZoom(new BMap.Point(106.69517131217539, 29.51577313312822), 15);
|
|
|
+ } else if (id == 4) {
|
|
|
+ that.parkMap.centerAndZoom(new BMap.Point(106.559829995157, 29.501581648208534), 15);
|
|
|
+ } else if (id == 5) {
|
|
|
+ that.parkMap.centerAndZoom(new BMap.Point(106.72194027111843, 29.513690776940248), 16);
|
|
|
+ } else if (id == 6) {
|
|
|
+ that.parkMap.centerAndZoom(new BMap.Point(106.70580793222035, 29.514020426917684), 16);
|
|
|
+ } else {
|
|
|
+ that.parkMap.centerAndZoom(new BMap.Point(106.651444, 29.48682), 14);
|
|
|
+ }
|
|
|
+ that.parkMap.setMapType(BMAP_SATELLITE_MAP);
|
|
|
+ if (!points) return;
|
|
|
+ let pointList = points.split('@');
|
|
|
+ let result = [];
|
|
|
+ pointList.forEach(function (point) {
|
|
|
+ let arr = point.split(',');
|
|
|
+ result.push(new BMap.Point(arr[0], arr[1]));
|
|
|
+ });
|
|
|
+ // 创建多边形
|
|
|
+ let polygon = new BMap.Polygon(result, {
|
|
|
+ strokeColor: "blue",
|
|
|
+ strokeWeight: 4,
|
|
|
+ strokeOpacity: 0.5,
|
|
|
+ strokeStyle: "solid",
|
|
|
+ fillColor: "#4B98F6",
|
|
|
+ fillOpacity: 0.3
|
|
|
+ });
|
|
|
+ // 将多边形添加到地图中
|
|
|
+ that.parkMap.addOverlay(polygon);
|
|
|
+ // pointList.forEach(function (point) {
|
|
|
+ // let arr = point.split(',');
|
|
|
+ // let p = new BMap.Point(arr[0], arr[1]);
|
|
|
+ // let marker = new BMap.Marker(p);
|
|
|
+ // that.parkMap.addOverlay(marker);
|
|
|
+ // });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ const url = new URL(window.location.href);
|
|
|
+ const id = url.searchParams.get('id');
|
|
|
+ this.getParkData(id);
|
|
|
+ this.getParkDetail(id);
|
|
|
+ }
|
|
|
+ })
|
|
|
+</script>
|
|
|
+<script type="text/javascript" src="js/rightmap.js"></script>
|
|
|
+
|
|
|
+</html>
|
MS-FUUVYHVOEAYJ\Administrator