地图

public/index.html

@@ -5,9 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <meta name="renderer" content="webkit">
-    <!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=z58ZwNa8oYvzEYI6dD8hAS0GFbfKpttP"></script> -->
-    <script  type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=ZzGBZF6L0sgFDLlDohyvYhCnWy4dwksX" ></script>
-    <script type="text/javascript" src="http://api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js"></script>
+    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=ZzGBZF6L0sgFDLlDohyvYhCnWy4dwksX"></script>
     <script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
     <script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
     <script src="http://mapv.baidu.com/build/mapv.min.js"></script>

src/components/sellDashboard/map/centerMpBaidu.vue

@@ -4,9 +4,9 @@
   justify-content: center;
   align-items: center;
 }
-.BMap_noprint,.anchorBL{
+/* .BMap_noprint,.anchorBL{
   display: none;
-}
+} */
 .centerMpBaidu-box .BMap_Marker img{
   
 }
@@ -17,11 +17,11 @@
   </div>
 </template>
 <script>
-import BMap from 'BMap'
 export default {
   props: ['baiduMapData'],
   data(){
     return {
+      map: {}
     }
   },
   watch: {
@@ -32,124 +32,109 @@ export default {
   },mounted() {
     
   },methods:{
-    markerClick(e){
-      alert(111)
-    },
     creatMap(){
       let _this = this
       let data = this.baiduMapData;
-      const BMap = window.BMap
       //实例化，并设置最大最小缩放层级
-        const map = new BMap.Map("centerMpBaidu", {
-          minZoom: 3,
-          maxZoom: 20,
-        });
-      //清楚覆盖物
-        map.clearOverlays();
+      const map = new BMap.Map("centerMpBaidu", {
+        minZoom: 3,
+        maxZoom: 20,
+      });
       //设置中心点、默认缩放层级
-        if (data.length > 0) {
-          map.centerAndZoom(new BMap.Point(data[0].Lng, data[0].Lat), 10);
-        } else {
-          map.centerAndZoom(new BMap.Point(104.0727017791, 30.6643622306), 10);
-        }
+      if (data.length > 0) {
+        map.centerAndZoom(new BMap.Point(data[0].Lng, data[0].Lat), 10);
+      } else {
+        map.centerAndZoom(new BMap.Point(104.0727017791, 30.6643622306), 10);
+      }
       //可以鼠标缩放
-        map.enableScrollWheelZoom(true);
+      map.enableScrollWheelZoom(true);
 
 
-      //2、 设置 默认主题 和 自定义主题
-        // 默认主题 normal blueSky  light  dark  googlelite  grassgreen  midnight  pink  bluish  grayscale
-        // 还有几个默认主题，但是发现并不好使
-        map.setMapStyle({
-          style: 'midnight'
+      // 主题
+      map.setMapStyle({
+        style: 'midnight'
+      });
+      const points = data
+      const markerClusterers = [[], [], []]
+      points.forEach(item => {
+        //实例化点
+        const point = new BMap.Point(item.Lng, item.Lat)
+        //自定义点的样式
+        // type 0 激活 蓝色五角星 20191119035847676 
+        //      1 未拜访 黄色五角星 20191119035853676
+        //      2 未激活 红色五角星 20191119035858082
+        const icon = new BMap.Icon(
+          item.type === 0 ? 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191119035847676.png' : item.type === 1 ? 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191119035853676.png' : 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191119035858082.png',
+          new BMap.Size(48, 48)
+        );
+        //生成点标注
+        const marker = new BMap.Marker(point, { icon: icon });
+        // const infoWindow = new BMap.InfoWindow('简易的信息窗口')
+        //绑定事件，显示窗口
+        marker.addEventListener("click", function(){
+          _this.markerClick(point, item)
+          // map.openInfoWindow(infoWindow,point);
         });
-        const points = data
-        const markerClusterers = [[], [], []]
-        points.forEach(item => {
-          //实例化点
-          const point = new BMap.Point(item.Lng, item.Lat)
-          //自定义点的样式
-          // type 0 激活 蓝色五角星 20191119035847676 
-          //      1 非正式 黄色五角星 20191119035853676
-          //      2 未激活 红色五角星 20191119035858082
-          const icon = new BMap.Icon(
-            item.type === 0 ? 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191119035847676.png' : item.type === 1 ? 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191119035853676.png' : 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191119035858082.png',
-            new BMap.Size(48, 48)
-          );
-          
-      //生成点标注
-          const marker = new BMap.Marker(point, { icon: icon });
-          //动画
-          // marker.setAnimation(BMAP_ANIMATION_BOUNCE)
-          //文字标签
-          // const label = new BMap.Label(
-          //   '我是文字描述',
-          //   { offset: new BMap.Size( 20, 20 ) }
-          // )
-          // label.setStyle({
-          //   color : "red",
-          //     fontSize : "12px",
-          //     height : "20px",
-          //     lineHeight : "20px",
-          //     fontFamily:"微软雅黑"
-          // });
-          // marker.setLabel(label);
-
-          //绑定事件
-          // if (item.func) marker.addEventListener("click", function () {alert('你好')});
-          marker.addEventListener("click", function(e){ //点击marker显示label
-            _this.markerClick(e)
-          });
-            markerClusterers[item.type || 0].push(marker)
-          //添加点标注即添加覆盖物
-            map.addOverlay(marker);
-          })
-        //清除覆盖物
-        // markerClusterers.forEach((item, index) => {
-        //   if (window[`markerClusterer${index}`]) window[`markerClusterer${index}`].clearMarkers()
-        //   // delete this.markerClusterer
-        //   window[`markerClusterer${index}`] = null
-        // })
-      //2种聚合的实现
-        const size = new BMap.Size( 48, 48 )
-        var markerClusterer1 = new window.BMapLib.MarkerClusterer(map, {
-          markers: markerClusterers[1],
-          styles: [{
-            url:'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191119035853676.png',
-            size: size,
-            textSize: 18,
-            textColor: 'white',
-          }, {
-            url: 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191119035853676.png',
-            size: size,
-            textSize: 18,
-            textColor: 'white',
-          }, {
-            url: 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191119035853676.png',
-            size: size,
-            textSize: 18,
-            textColor: 'white',
-          }]
-        })
-        var markerClusterer2 = new window.BMapLib.MarkerClusterer(map, {
-          markers: markerClusterers[2],
-          styles: [{
-            url:'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191119035858082.png',
-            size: size,
-            textSize: 18,
-            textColor: 'white',
-          }, {
-            url: 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191119035858082.png',
-            size: size,
-            textSize: 18,
-            textColor: 'white',
-          }, {
-            url: 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191119035858082.png',
-            size: size,
-            textSize: 18,
-            textColor: 'white',
-          }]
-        })
-        var markerClusterer4 = new window.BMapLib.MarkerClusterer(map, { markers: markerClusterers[0] })
+        markerClusterers[item.type || 0].push(marker)
+        //添加点标注即添加覆盖物
+        map.addOverlay(marker);
+      })
+      // //2种聚合的实现
+      const size = new BMap.Size( 48, 48 )
+      var markerClusterer1 = new window.BMapLib.MarkerClusterer(map, {
+        markers: markerClusterers[1],
+        styles: [{
+          url:'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191119035853676.png',
+          size: size,
+          textSize: 18,
+          textColor: 'white',
+        }, {
+          url: 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191119035853676.png',
+          size: size,
+          textSize: 18,
+          textColor: 'white',
+        }, {
+          url: 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191119035853676.png',
+          size: size,
+          textSize: 18,
+          textColor: 'white',
+        }]
+      })
+      var markerClusterer2 = new window.BMapLib.MarkerClusterer(map, {
+        markers: markerClusterers[2],
+        styles: [{
+          url:'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191119035858082.png',
+          size: size,
+          textSize: 18,
+          textColor: 'white',
+        }, {
+          url: 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191119035858082.png',
+          size: size,
+          textSize: 18,
+          textColor: 'white',
+        }, {
+          url: 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191119035858082.png',
+          size: size,
+          textSize: 18,
+          textColor: 'white',
+        }]
+      })
+      var markerClusterer4 = new window.BMapLib.MarkerClusterer(map, { markers: markerClusterers[0] })
+      this.map = map
+    },
+    markerClick(point, item){
+      this.apipost('financestatistics_post_GetCustomerInfoForB2BKB', {CustomerId: item.CustomerId}, res=>{
+        if(res.data.resultCode == 1) {
+          const infoWindow = new BMap.InfoWindow(`
+          <p>联系人：${res.data.data.Contact}</p>
+          <p>联系电话：${res.data.data.ContactNumber}</p>
+          <p>门店名称：${res.data.data.CustomerName}</p>
+          <p>门店地址：${res.data.data.Address}</p>
+          `)
+          this.map.openInfoWindow(infoWindow, point);
+        }
+      })
+      
     }
   }
 }

src/components/sellDashboard/map/centerMpBaidu2.vue

@@ -5,7 +5,7 @@
   align-items: center;
 }
 .BMap_noprint,.anchorBL{
-  display: none;
+  /* display: none; */
 }
 </style>
 <template>

src/components/sellDashboard/map/viittoMap.vue

@@ -7,7 +7,6 @@
 import echarts from "echarts";
 //   import '../../node_modules/echarts/map/js/world.js'
 import "../../../../node_modules/echarts/map/js/china.js"; // 引入中国地图数据
-import BMap from 'BMap';
 export default {
   name: "echarts",
   props: ["userJson","dataArea"],

src/components/sellDashboard/map/viittoMap3.vue

@@ -7,7 +7,6 @@
 import echarts from "echarts";
 //   import '../../node_modules/echarts/map/js/world.js'
 import "../../../../node_modules/echarts/map/js/china.js"; // 引入中国地图数据
-import BMap from 'BMap';
 export default {
   name: "echarts",
   props: ["userJson","dataArea", "newArr"],

src/components/viitto/viittoData.vue

@@ -347,9 +347,9 @@ ul li {
           <p class="name">印象之旅数据看板</p>
         </div>
         <el-row>
-          <el-col :span="20" v-if="dataArea.length>0 && newArr.length>0">
+          <el-col :span="20" >
             <div class="map-box" style="position:relative;top:-50px;left:-140px;">
-              <centerMp :dataArea="dataArea" :newArr="newArr"></centerMp>
+              <centerMp v-if="dataArea.length>0 && newArr.length>0" :dataArea="dataArea" :newArr="newArr"></centerMp>
             </div>
           </el-col>
           <el-col :span="4">

src/components/viitto/viittoData2.vue

@@ -335,7 +335,7 @@
           <div class="color-type">
             <div>
               <p>激活 <span class="b"></span></p>
-              <p>非正式 <span class="y"></span></p>
+              <p>未拜访 <span class="y"></span></p>
               <p>未激活 <span></span></p>
             </div>
           </div>