diff --git a/src/App.vue b/src/App.vue
index 68e9f6b..34eb939 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -21,6 +21,24 @@
 .el-message__icon,.el-message__content{
 		font-size: 16px !important;
 }
+.BMap_bubble_pop{
+  color: #fff !important;
+  height:220px !important;
+  padding:0 !important;
+  background-image: url(http://192.168.1.36:8080/img/infowindow_bg.df8cbca1.png) !important;
+  background-color: transparent !important;
+  background-repeat: no-repeat;
+  border: 0 !important;
+  img{
+    display: none !important;
+  }
+}
+.BMap_bubble_buttons{
+  div{
+    color:#fff !important;
+    font-size:0.4rem !important;
+  }
+}
 .BMap_cpyCtrl,.anchorBL{
   opacity: 0 !important;
 }
diff --git a/src/api/data.js b/src/api/data.js
index e9e9ca6..e6bc2f0 100644
--- a/src/api/data.js
+++ b/src/api/data.js
@@ -49,1188 +49,1245 @@ export const styleJson = [{
     "featureType": "land",
     "elementType": "geometry",
     "stylers": {
-      "color": "#242f3eff",
-      "visibility": "on"
+        "visibility": "on",
+        "color": "#0b1838ff"
     }
-  }, {
+}, {
     "featureType": "manmade",
     "elementType": "geometry",
     "stylers": {
-      "color": "#242f3eff",
-      "visibility": "on"
+        "visibility": "on",
+        "color": "#9b9b9bff"
     }
-  }, {
+}, {
     "featureType": "water",
     "elementType": "geometry",
     "stylers": {
-      "color": "#061b93ff"
+        "color": "#061b93ff"
     }
-  }, {
+}, {
     "featureType": "road",
     "elementType": "geometry.fill",
     "stylers": {
-      "color": "#3b90acff"
+        "color": "#3b90acff"
     }
-  }, {
+}, {
     "featureType": "road",
     "elementType": "geometry.stroke",
     "stylers": {
-      "color": "#554631ff"
+        "color": "#554631ff"
     }
-  }, {
+}, {
     "featureType": "districtlabel",
     "elementType": "labels.text.fill",
     "stylers": {
-      "color": "#ffffffff"
+        "color": "#ffffffff"
     }
-  }, {
+}, {
     "featureType": "districtlabel",
     "elementType": "labels.text.stroke",
     "stylers": {
-      "color": "#17263cff",
-      "weight": "3",
-      "opacity": "00"
+        "color": "#17263cff",
+        "opacity": "00",
+        "weight": "3"
     }
-  }, {
+}, {
     "featureType": "poilabel",
     "elementType": "labels.text.fill",
     "stylers": {
-      "color": "#ffffffff"
+        "color": "#ffffffff"
     }
-  }, {
+}, {
     "featureType": "poilabel",
     "elementType": "labels.text.stroke",
     "stylers": {
-      "color": "#17263cff",
-      "weight": "3",
-      "opacity": "00"
+        "color": "#17263cff",
+        "opacity": "00",
+        "weight": "3"
     }
-  }, {
+}, {
     "featureType": "subway",
     "elementType": "geometry",
     "stylers": {
-      "visibility": "off"
+        "visibility": "off"
     }
-  }, {
+}, {
     "featureType": "railway",
     "elementType": "geometry",
     "stylers": {
-      "visibility": "off"
+        "visibility": "off"
     }
-  }, {
+}, {
     "featureType": "poilabel",
     "elementType": "labels.icon",
     "stylers": {
-      "visibility": "off"
+        "visibility": "on"
     }
-  }, {
+}, {
     "featureType": "subwaylabel",
     "elementType": "labels",
     "stylers": {
-      "visibility": "off"
+        "visibility": "off"
     }
-  }, {
+}, {
     "featureType": "subwaylabel",
     "elementType": "labels.icon",
     "stylers": {
-      "visibility": "off"
+        "visibility": "off"
     }
-  }, {
+}, {
     "featureType": "tertiarywaysign",
     "elementType": "labels",
     "stylers": {
-      "visibility": "off"
+        "visibility": "off"
     }
-  }, {
+}, {
     "featureType": "tertiarywaysign",
     "elementType": "labels.icon",
     "stylers": {
-      "visibility": "off"
+        "visibility": "off"
     }
-  }, {
+}, {
     "featureType": "provincialwaysign",
     "elementType": "labels.icon",
     "stylers": {
-      "visibility": "off"
+        "visibility": "off"
     }
-  }, {
+}, {
     "featureType": "provincialwaysign",
     "elementType": "labels",
     "stylers": {
-      "visibility": "off"
+        "visibility": "off"
     }
-  }, {
+}, {
     "featureType": "nationalwaysign",
     "elementType": "labels.icon",
     "stylers": {
-      "visibility": "off"
+        "visibility": "off"
     }
-  }, {
+}, {
     "featureType": "nationalwaysign",
     "elementType": "labels",
     "stylers": {
-      "visibility": "off"
+        "visibility": "off"
     }
-  }, {
+}, {
     "featureType": "highwaysign",
     "elementType": "labels.icon",
     "stylers": {
-      "visibility": "off"
+        "visibility": "off"
     }
-  }, {
+}, {
     "featureType": "highwaysign",
     "elementType": "labels",
     "stylers": {
-      "visibility": "off"
+        "visibility": "off"
     }
-  }, {
+}, {
     "featureType": "green",
     "elementType": "geometry",
     "stylers": {
-      "color": "#263b3eff"
+        "color": "#263b3eff"
     }
-  }, {
+}, {
     "featureType": "nationalwaysign",
     "elementType": "labels.text.fill",
     "stylers": {
-      "color": "#d0021bff"
+        "color": "#d0021bff"
     }
-  }, {
+}, {
     "featureType": "nationalwaysign",
     "elementType": "labels.text.stroke",
     "stylers": {
-      "color": "#ffffffff"
+        "color": "#ffffffff"
     }
-  }, {
+}, {
     "featureType": "city",
     "elementType": "labels",
     "stylers": {
-      "visibility": "on"
+        "visibility": "on"
     }
-  }, {
+}, {
     "featureType": "city",
     "elementType": "labels.icon",
     "stylers": {
-      "visibility": "off"
+        "visibility": "off"
     }
-  }, {
+}, {
     "featureType": "city",
     "elementType": "labels.text.fill",
     "stylers": {
-      "color": "#d69563ff"
+        "color": "#ffffffff"
     }
-  }, {
+}, {
     "featureType": "city",
     "elementType": "labels.text.stroke",
     "stylers": {
-      "color": "#17263cff"
+        "color": "#17263cff",
+        "opacity": "00"
     }
-  }, {
+}, {
     "featureType": "water",
     "elementType": "labels.text.fill",
     "stylers": {
-      "color": "#ffffffff"
+        "color": "#ffffffff"
     }
-  }, {
+}, {
     "featureType": "local",
     "elementType": "geometry.fill",
     "stylers": {
-      "color": "#3b90acff"
+        "color": "#3b90acff"
     }
-  }, {
+}, {
     "featureType": "local",
     "elementType": "geometry.stroke",
     "stylers": {
-      "color": "#ffffff00"
+        "color": "#ffffff00"
     }
-  }, {
+}, {
     "featureType": "fourlevelway",
     "elementType": "geometry.fill",
     "stylers": {
-      "color": "#3b90acff"
+        "color": "#3b90acff"
     }
-  }, {
+}, {
     "featureType": "fourlevelway",
     "elementType": "geometry.stroke",
     "stylers": {
-      "color": "#ffffff00"
+        "color": "#ffffff00"
     }
-  }, {
+}, {
     "featureType": "tertiaryway",
     "elementType": "geometry.fill",
     "stylers": {
-      "color": "#3b90acff"
+        "color": "#3b90acff"
     }
-  }, {
+}, {
     "featureType": "tertiaryway",
     "elementType": "geometry.stroke",
     "stylers": {
-      "color": "#ffffff00"
+        "color": "#ffffff00"
     }
-  }, {
+}, {
     "featureType": "tertiaryway",
     "elementType": "labels.text.fill",
     "stylers": {
-      "color": "#ffffffff"
+        "color": "#ffffffff"
     }
-  }, {
+}, {
     "featureType": "fourlevelway",
     "elementType": "labels.text.fill",
     "stylers": {
-      "color": "#ffffffff"
+        "color": "#ffffffff"
     }
-  }, {
+}, {
     "featureType": "highway",
     "elementType": "labels.text.fill",
     "stylers": {
-      "color": "#ffffffff"
+        "color": "#ffffffff"
     }
-  }, {
+}, {
     "featureType": "highway",
     "elementType": "geometry.fill",
     "stylers": {
-      "color": "#3b90acff"
+        "color": "#3b90acff"
     }
-  }, {
+}, {
     "featureType": "highway",
     "elementType": "geometry.stroke",
     "stylers": {
-      "color": "#554631ff"
+        "color": "#554631ff"
     }
-  }, {
+}, {
     "featureType": "provincialway",
     "elementType": "geometry.fill",
     "stylers": {
-      "color": "#3b90acff"
+        "color": "#3b90acff"
     }
-  }, {
+}, {
     "featureType": "provincialway",
     "elementType": "geometry.stroke",
     "stylers": {
-      "color": "#554631ff"
+        "color": "#554631ff"
     }
-  }, {
+}, {
     "featureType": "tertiaryway",
     "elementType": "labels.text.stroke",
     "stylers": {
-      "color": "#1a2e1cff",
-      "opacity": "00"
+        "color": "#1a2e1cff",
+        "opacity": "00"
     }
-  }, {
+}, {
     "featureType": "fourlevelway",
     "elementType": "labels.text.stroke",
     "stylers": {
-      "color": "#1a2e1cff",
-      "opacity": "00"
+        "color": "#1a2e1cff",
+        "opacity": "00"
     }
-  }, {
+}, {
     "featureType": "highway",
     "elementType": "labels.text.stroke",
     "stylers": {
-      "color": "#1a2e1cff",
-      "opacity": "00"
+        "color": "#1a2e1cff",
+        "opacity": "00"
     }
-  }, {
+}, {
     "featureType": "nationalway",
     "elementType": "labels.text.stroke",
     "stylers": {
-      "color": "#1a2e1cff",
-      "opacity": "00"
+        "color": "#1a2e1cff",
+        "opacity": "00"
     }
-  }, {
+}, {
     "featureType": "nationalway",
     "elementType": "labels.text.fill",
     "stylers": {
-      "color": "#ffffffff"
+        "color": "#ffffffff"
     }
-  }, {
+}, {
     "featureType": "nationalway",
     "elementType": "geometry.fill",
     "stylers": {
-      "color": "#3b90acff"
+        "color": "#3b90acff"
     }
-  }, {
+}, {
     "featureType": "nationalway",
     "elementType": "geometry.stroke",
     "stylers": {
-      "color": "#554631ff"
+        "color": "#554631ff"
     }
-  }, {
+}, {
     "featureType": "cityhighway",
     "elementType": "geometry.fill",
     "stylers": {
-      "color": "#3b90acff"
+        "color": "#3b90acff"
     }
-  }, {
+}, {
     "featureType": "cityhighway",
     "elementType": "geometry.stroke",
     "stylers": {
-      "color": "#554631ff"
+        "color": "#554631ff"
     }
-  }, {
+}, {
     "featureType": "arterial",
     "elementType": "geometry.fill",
     "stylers": {
-      "color": "#3b90acff"
+        "color": "#3b90acff"
     }
-  }, {
+}, {
     "featureType": "arterial",
     "elementType": "geometry.stroke",
     "stylers": {
-      "color": "#554631fa"
+        "color": "#554631fa"
     }
-  }, {
+}, {
     "featureType": "medicallabel",
     "elementType": "labels",
     "stylers": {
-      "visibility": "off"
+        "visibility": "off"
     }
-  }, {
+}, {
     "featureType": "medicallabel",
     "elementType": "labels.icon",
     "stylers": {
-      "visibility": "off"
+        "visibility": "off"
     }
-  }, {
+}, {
     "featureType": "entertainmentlabel",
     "elementType": "labels",
     "stylers": {
-      "visibility": "off"
+        "visibility": "off"
     }
-  }, {
+}, {
     "featureType": "entertainmentlabel",
     "elementType": "labels.icon",
     "stylers": {
-      "visibility": "off"
+        "visibility": "off"
     }
-  }, {
+}, {
     "featureType": "estatelabel",
     "elementType": "labels",
     "stylers": {
-      "visibility": "off"
+        "visibility": "on"
     }
-  }, {
+}, {
     "featureType": "estatelabel",
     "elementType": "labels.icon",
     "stylers": {
-      "visibility": "off"
+        "visibility": "off"
     }
-  }, {
+}, {
     "featureType": "businesstowerlabel",
     "elementType": "labels",
     "stylers": {
-      "visibility": "off"
+        "visibility": "off"
     }
-  }, {
+}, {
     "featureType": "businesstowerlabel",
     "elementType": "labels.icon",
     "stylers": {
-      "visibility": "off"
+        "visibility": "off"
     }
-  }, {
+}, {
     "featureType": "companylabel",
     "elementType": "labels",
     "stylers": {
-      "visibility": "off"
+        "visibility": "off"
     }
-  }, {
+}, {
     "featureType": "companylabel",
     "elementType": "labels.icon",
     "stylers": {
-      "visibility": "off"
+        "visibility": "off"
     }
-  }, {
+}, {
     "featureType": "governmentlabel",
     "elementType": "labels",
     "stylers": {
-      "visibility": "off"
+        "visibility": "on"
     }
-  }, {
+}, {
     "featureType": "governmentlabel",
     "elementType": "labels.icon",
     "stylers": {
-      "visibility": "off"
+        "visibility": "on"
     }
-  }, {
+}, {
     "featureType": "restaurantlabel",
     "elementType": "labels",
     "stylers": {
-      "visibility": "off"
+        "visibility": "off"
     }
-  }, {
+}, {
     "featureType": "restaurantlabel",
     "elementType": "labels.icon",
     "stylers": {
-      "visibility": "off"
+        "visibility": "off"
     }
-  }, {
+}, {
     "featureType": "hotellabel",
     "elementType": "labels",
     "stylers": {
-      "visibility": "off"
+        "visibility": "off"
     }
-  }, {
+}, {
     "featureType": "hotellabel",
     "elementType": "labels.icon",
     "stylers": {
-      "visibility": "off"
+        "visibility": "off"
     }
-  }, {
+}, {
     "featureType": "shoppinglabel",
     "elementType": "labels",
     "stylers": {
-      "visibility": "off"
+        "visibility": "off"
     }
-  }, {
+}, {
     "featureType": "shoppinglabel",
     "elementType": "labels.icon",
     "stylers": {
-      "visibility": "off"
+        "visibility": "off"
     }
-  }, {
+}, {
     "featureType": "lifeservicelabel",
     "elementType": "labels",
     "stylers": {
-      "visibility": "off"
+        "visibility": "off"
     }
-  }, {
+}, {
     "featureType": "lifeservicelabel",
     "elementType": "labels.icon",
     "stylers": {
-      "visibility": "off"
+        "visibility": "off"
     }
-  }, {
+}, {
     "featureType": "carservicelabel",
     "elementType": "labels",
     "stylers": {
-      "visibility": "off"
+        "visibility": "off"
     }
-  }, {
+}, {
     "featureType": "carservicelabel",
     "elementType": "labels.icon",
     "stylers": {
-      "visibility": "off"
+        "visibility": "off"
     }
-  }, {
+}, {
     "featureType": "financelabel",
     "elementType": "labels",
     "stylers": {
-      "visibility": "off"
+        "visibility": "off"
     }
-  }, {
+}, {
     "featureType": "financelabel",
     "elementType": "labels.icon",
     "stylers": {
-      "visibility": "off"
+        "visibility": "off"
     }
-  }, {
+}, {
     "featureType": "otherlabel",
     "elementType": "labels",
     "stylers": {
-      "visibility": "off"
+        "visibility": "off"
     }
-  }, {
+}, {
     "featureType": "otherlabel",
     "elementType": "labels.icon",
     "stylers": {
-      "visibility": "off"
+        "visibility": "off"
     }
-  }, {
+}, {
     "featureType": "airportlabel",
     "elementType": "labels",
     "stylers": {
-      "visibility": "on"
+        "visibility": "on"
     }
-  }, {
+}, {
     "featureType": "airportlabel",
     "elementType": "labels.text.fill",
     "stylers": {
-      "color": "#ffffffff"
+        "color": "#ffffffff"
     }
-  }, {
+}, {
     "featureType": "airportlabel",
     "elementType": "labels.text.stroke",
     "stylers": {
-      "color": "#17263cff",
-      "opacity": "00"
+        "color": "#17263cff",
+        "opacity": "00"
     }
-  }, {
+}, {
     "featureType": "airportlabel",
     "elementType": "labels.icon",
     "stylers": {
-      "visibility": "off"
+        "visibility": "off"
     }
-  }, {
+}, {
     "featureType": "highway",
     "stylers": {
-      "level": "6",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "level": "6",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "highway",
     "stylers": {
-      "level": "7",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "level": "7",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "highway",
     "stylers": {
-      "level": "8",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "level": "8",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "highway",
     "stylers": {
-      "level": "9",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "highway",
     "stylers": {
-      "level": "10",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "level": "10",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "highway",
     "elementType": "geometry",
     "stylers": {
-      "visibility": "off",
-      "level": "6",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "visibility": "off",
+        "level": "6",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "highway",
     "elementType": "geometry",
     "stylers": {
-      "visibility": "off",
-      "level": "7",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "visibility": "off",
+        "level": "7",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "highway",
     "elementType": "geometry",
     "stylers": {
-      "visibility": "off",
-      "level": "8",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "visibility": "off",
+        "level": "8",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "highway",
     "elementType": "geometry",
     "stylers": {
-      "visibility": "off",
-      "level": "9",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "visibility": "off",
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "highway",
     "elementType": "geometry",
     "stylers": {
-      "visibility": "off",
-      "level": "10",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "visibility": "off",
+        "level": "10",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "nationalway",
     "stylers": {
-      "level": "6",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "level": "6",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "nationalway",
     "stylers": {
-      "level": "7",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "level": "7",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "nationalway",
     "stylers": {
-      "level": "8",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "level": "8",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "nationalway",
     "stylers": {
-      "level": "9",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "nationalway",
     "stylers": {
-      "level": "10",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "level": "10",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "nationalway",
     "elementType": "geometry",
     "stylers": {
-      "visibility": "off",
-      "level": "6",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "visibility": "off",
+        "level": "6",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "nationalway",
     "elementType": "geometry",
     "stylers": {
-      "visibility": "off",
-      "level": "7",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "visibility": "off",
+        "level": "7",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "nationalway",
     "elementType": "geometry",
     "stylers": {
-      "visibility": "off",
-      "level": "8",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "visibility": "off",
+        "level": "8",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "nationalway",
     "elementType": "geometry",
     "stylers": {
-      "visibility": "off",
-      "level": "9",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "visibility": "off",
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "nationalway",
     "elementType": "geometry",
     "stylers": {
-      "visibility": "off",
-      "level": "10",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "visibility": "off",
+        "level": "10",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "nationalway",
     "elementType": "labels",
     "stylers": {
-      "visibility": "off",
-      "level": "6",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "visibility": "off",
+        "level": "6",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "nationalway",
     "elementType": "labels",
     "stylers": {
-      "visibility": "off",
-      "level": "7",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "visibility": "off",
+        "level": "7",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "nationalway",
     "elementType": "labels",
     "stylers": {
-      "visibility": "off",
-      "level": "8",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "visibility": "off",
+        "level": "8",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "nationalway",
     "elementType": "labels",
     "stylers": {
-      "visibility": "off",
-      "level": "9",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "visibility": "off",
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "nationalway",
     "elementType": "labels",
     "stylers": {
-      "visibility": "off",
-      "level": "10",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "visibility": "off",
+        "level": "10",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "highway",
     "elementType": "labels",
     "stylers": {
-      "visibility": "off",
-      "level": "6",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "visibility": "off",
+        "level": "6",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "highway",
     "elementType": "labels",
     "stylers": {
-      "visibility": "off",
-      "level": "7",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "visibility": "off",
+        "level": "7",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "highway",
     "elementType": "labels",
     "stylers": {
-      "visibility": "off",
-      "level": "8",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "visibility": "off",
+        "level": "8",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "highway",
     "elementType": "labels",
     "stylers": {
-      "visibility": "off",
-      "level": "9",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "visibility": "off",
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "highway",
     "elementType": "labels",
     "stylers": {
-      "visibility": "off",
-      "level": "10",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "visibility": "off",
+        "level": "10",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "provincialway",
     "stylers": {
-      "level": "8",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "8-9"
+        "level": "8",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "8-9"
     }
-  }, {
+}, {
     "featureType": "provincialway",
     "stylers": {
-      "level": "9",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "8-9"
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "8-9"
     }
-  }, {
+}, {
     "featureType": "provincialway",
     "elementType": "geometry",
     "stylers": {
-      "visibility": "off",
-      "level": "8",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "8-9"
+        "visibility": "off",
+        "level": "8",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "8-9"
     }
-  }, {
+}, {
     "featureType": "provincialway",
     "elementType": "geometry",
     "stylers": {
-      "visibility": "off",
-      "level": "9",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "8-9"
+        "visibility": "off",
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "8-9"
     }
-  }, {
+}, {
     "featureType": "provincialway",
     "elementType": "labels",
     "stylers": {
-      "visibility": "off",
-      "level": "8",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "8-9"
+        "visibility": "off",
+        "level": "8",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "8-9"
     }
-  }, {
+}, {
     "featureType": "provincialway",
     "elementType": "labels",
     "stylers": {
-      "visibility": "off",
-      "level": "9",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "8-9"
+        "visibility": "off",
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "8-9"
     }
-  }, {
+}, {
     "featureType": "cityhighway",
     "stylers": {
-      "level": "6",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "level": "6",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "cityhighway",
     "stylers": {
-      "level": "7",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "level": "7",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "cityhighway",
     "stylers": {
-      "level": "8",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "level": "8",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "cityhighway",
     "stylers": {
-      "level": "9",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "cityhighway",
     "stylers": {
-      "level": "10",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "level": "10",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "cityhighway",
     "elementType": "geometry",
     "stylers": {
-      "visibility": "off",
-      "level": "6",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "visibility": "off",
+        "level": "6",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "cityhighway",
     "elementType": "geometry",
     "stylers": {
-      "visibility": "off",
-      "level": "7",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "visibility": "off",
+        "level": "7",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "cityhighway",
     "elementType": "geometry",
     "stylers": {
-      "visibility": "off",
-      "level": "8",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "visibility": "off",
+        "level": "8",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "cityhighway",
     "elementType": "geometry",
     "stylers": {
-      "visibility": "off",
-      "level": "9",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "visibility": "off",
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "cityhighway",
     "elementType": "geometry",
     "stylers": {
-      "visibility": "off",
-      "level": "10",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "visibility": "off",
+        "level": "10",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "cityhighway",
     "elementType": "labels",
     "stylers": {
-      "visibility": "off",
-      "level": "6",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "visibility": "off",
+        "level": "6",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "cityhighway",
     "elementType": "labels",
     "stylers": {
-      "visibility": "off",
-      "level": "7",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "visibility": "off",
+        "level": "7",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "cityhighway",
     "elementType": "labels",
     "stylers": {
-      "visibility": "off",
-      "level": "8",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "visibility": "off",
+        "level": "8",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "cityhighway",
     "elementType": "labels",
     "stylers": {
-      "visibility": "off",
-      "level": "9",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "visibility": "off",
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "cityhighway",
     "elementType": "labels",
     "stylers": {
-      "visibility": "off",
-      "level": "10",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "6-10"
+        "visibility": "off",
+        "level": "10",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
     }
-  }, {
+}, {
     "featureType": "arterial",
     "stylers": {
-      "level": "9",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "9-10"
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "9-10"
     }
-  }, {
+}, {
     "featureType": "arterial",
     "stylers": {
-      "level": "10",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "9-10"
+        "level": "10",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "9-10"
     }
-  }, {
+}, {
     "featureType": "arterial",
     "elementType": "geometry",
     "stylers": {
-      "visibility": "off",
-      "level": "9",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "9-10"
+        "visibility": "off",
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "9-10"
     }
-  }, {
+}, {
     "featureType": "arterial",
     "elementType": "geometry",
     "stylers": {
-      "visibility": "off",
-      "level": "10",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "9-10"
+        "visibility": "off",
+        "level": "10",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "9-10"
     }
-  }, {
+}, {
     "featureType": "arterial",
     "elementType": "labels",
     "stylers": {
-      "visibility": "off",
-      "level": "9",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "9-10"
+        "visibility": "off",
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "9-10"
     }
-  }, {
+}, {
     "featureType": "arterial",
     "elementType": "labels",
     "stylers": {
-      "visibility": "off",
-      "level": "10",
-      "curZoomRegionId": "0",
-      "curZoomRegion": "9-10"
+        "visibility": "off",
+        "level": "10",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "9-10"
     }
-  }, {
+}, {
     "featureType": "building",
     "elementType": "geometry.topfill",
     "stylers": {
-      "color": "#2a3341ff"
+        "color": "#2a3341ff"
     }
-  }, {
+}, {
     "featureType": "building",
     "elementType": "geometry.sidefill",
     "stylers": {
-      "color": "#313b4cff"
+        "color": "#313b4cff"
     }
-  }, {
+}, {
     "featureType": "building",
     "elementType": "geometry.stroke",
     "stylers": {
-      "color": "#1a212eff"
+        "color": "#1a212eff"
     }
-  }, {
+}, {
     "featureType": "road",
     "elementType": "labels.text.fill",
     "stylers": {
-      "color": "#ffffffff"
+        "color": "#ffffffff"
     }
-  }, {
+}, {
     "featureType": "road",
     "elementType": "labels.text.stroke",
     "stylers": {
-      "color": "#1a2e1cff",
-      "opacity": "00"
+        "color": "#1a2e1cff",
+        "opacity": "00"
     }
-  }, {
+}, {
     "featureType": "provincialway",
     "elementType": "labels.text.fill",
     "stylers": {
-      "color": "#ffffffff"
+        "color": "#ffffffff"
     }
-  }, {
+}, {
     "featureType": "cityhighway",
     "elementType": "labels.text.fill",
     "stylers": {
-      "color": "#ffffffff"
+        "color": "#ffffffff"
     }
-  }, {
+}, {
     "featureType": "arterial",
     "elementType": "labels.text.fill",
     "stylers": {
-      "color": "#ffffffff"
+        "color": "#ffffffff"
     }
-  }, {
+}, {
     "featureType": "provincialway",
     "elementType": "labels.text.stroke",
     "stylers": {
-      "color": "#1a2e1cff",
-      "opacity": "00"
+        "color": "#1a2e1cff",
+        "opacity": "00"
     }
-  }, {
+}, {
     "featureType": "cityhighway",
     "elementType": "labels.text.stroke",
     "stylers": {
-      "color": "#1a2e1cff",
-      "opacity": "00"
+        "color": "#1a2e1cff",
+        "opacity": "00"
     }
-  }, {
+}, {
     "featureType": "arterial",
     "elementType": "labels.text.stroke",
     "stylers": {
-      "color": "#1a2e1cff",
-      "opacity": "00"
+        "color": "#1a2e1cff",
+        "opacity": "00"
     }
-  }, {
+}, {
     "featureType": "local",
     "elementType": "labels",
     "stylers": {
-      "visibility": "off"
+        "visibility": "on"
     }
-  }, {
+}, {
     "featureType": "manmade",
     "elementType": "labels.text.fill",
     "stylers": {
-      "color": "#ffffffff"
+        "color": "#ffffffff"
     }
-  }, {
+}, {
     "featureType": "manmade",
     "elementType": "labels.text.stroke",
     "stylers": {
-      "color": "#17263cff",
-      "opacity": "00"
+        "color": "#17263cff",
+        "opacity": "00"
     }
-  }, {
+}, {
     "featureType": "subwaystation",
     "elementType": "geometry",
     "stylers": {
-      "visibility": "off"
+        "visibility": "off"
     }
-  }, {
+}, {
     "featureType": "transportationlabel",
     "elementType": "labels.icon",
     "stylers": {
-      "visibility": "off"
+        "visibility": "off"
     }
-  }, {
+}, {
     "featureType": "transportationlabel",
     "elementType": "labels",
     "stylers": {
-      "visibility": "off"
+        "visibility": "off"
     }
-  }, {
+}, {
     "featureType": "estate",
     "elementType": "geometry",
     "stylers": {
-      "color": "#2a3341ff"
+        "color": "#4a4a4aff"
     }
-  }, {
+}, {
     "featureType": "background",
     "elementType": "geometry",
     "stylers": {
-      "visibility": "off",
-      "color": "#cc1a98ff"
+        "visibility": "off",
+        "color": "#cc1a98ff"
     }
-  }, {
+}, {
     "featureType": "water",
     "elementType": "labels.text.stroke",
     "stylers": {
-      "opacity": "00"
+        "opacity": "00"
     }
-  }, {
+}, {
     "featureType": "scenicspots",
     "elementType": "geometry",
     "stylers": {
-      "color": "#4a4a4aff"
+        "color": "#4a4a4aff"
     }
-  }, {
+}, {
     "featureType": "scenicspots",
     "elementType": "labels.text.fill",
     "stylers": {
-      "color": "#ffffffff"
+        "color": "#ffffffff"
     }
-  }, {
+}, {
     "featureType": "scenicspots",
     "elementType": "labels.text.stroke",
     "stylers": {
-      "opacity": "00"
+        "opacity": "00"
     }
-  }, {
+}, {
     "featureType": "education",
     "elementType": "geometry",
     "stylers": {
-      "color": "#4a4a4aff"
+        "color": "#4a4a4aff"
     }
-  }, {
+}, {
     "featureType": "education",
     "elementType": "labels.text.fill",
     "stylers": {
-      "color": "#ffffffff"
+        "color": "#ffffffff"
     }
-  }, {
+}, {
     "featureType": "education",
     "elementType": "labels.text.stroke",
     "stylers": {
-      "opacity": "00"
+        "opacity": "00"
     }
-  }, {
+}, {
     "featureType": "scenicspotsway",
     "elementType": "geometry.fill",
     "stylers": {
-      "color": "#3b90acff"
+        "color": "#3b90acff"
     }
-  }, {
+}, {
     "featureType": "scenicspotsway",
     "elementType": "geometry.stroke",
     "stylers": {
-      "opacity": "00"
+        "opacity": "00"
     }
-  }, {
+}, {
     "featureType": "vacationway",
     "elementType": "geometry.fill",
     "stylers": {
-      "color": "#3b90acff"
+        "color": "#3b90acff"
     }
-  }, {
+}, {
     "featureType": "vacationway",
     "elementType": "geometry.stroke",
     "stylers": {
-      "opacity": "00"
+        "opacity": "00"
     }
-  }, {
+}, {
     "featureType": "transportation",
     "elementType": "geometry",
     "stylers": {
-      "visibility": "on"
+        "visibility": "on",
+        "color": "#9b9b9bff"
     }
-  }, {
+}, {
     "featureType": "scenicspotslabel",
     "elementType": "labels",
     "stylers": {
-      "visibility": "on"
+        "visibility": "on"
     }
-  }];
\ No newline at end of file
+}, {
+    "featureType": "medical",
+    "elementType": "geometry",
+    "stylers": {
+        "color": "#4a4a4aff"
+    }
+}, {
+    "featureType": "town",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#4a4a4aff"
+    }
+}, {
+    "featureType": "village",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#4a4a4aff"
+    }
+}, {
+    "featureType": "local",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#ffffffff",
+        "weight": 30
+    }
+}, {
+    "featureType": "local",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "opacity": "00"
+    }
+}, {
+    "featureType": "estatelabel",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#ffffffff"
+    }
+}, {
+    "featureType": "estatelabel",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "opacity": "00"
+    }
+}, {
+    "featureType": "governmentlabel",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#ffffffff"
+    }
+}, {
+    "featureType": "governmentlabel",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "opacity": "00"
+    }
+}];
\ No newline at end of file
diff --git a/src/assets/images/end_point_icon.png b/src/assets/images/end_point_icon.png
new file mode 100644
index 0000000..8155cf5
Binary files /dev/null and b/src/assets/images/end_point_icon.png differ
diff --git a/src/assets/images/infowindow_bg.png b/src/assets/images/infowindow_bg.png
new file mode 100644
index 0000000..220aff0
Binary files /dev/null and b/src/assets/images/infowindow_bg.png differ
diff --git a/src/views/components/pathMap.vue b/src/views/components/pathMap.vue
index 5174819..789d596 100644
--- a/src/views/components/pathMap.vue
+++ b/src/views/components/pathMap.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="container" style="width:100%;height:100%"></div>
+  <div id="container" style="width:100%;height:100%;"></div>
 </template>
 
 <script>
@@ -19,6 +19,7 @@ export default {
       markList: [],//标注点记录
       polyline: null,//昨日轨迹
       viewData: [],//点聚合坐标集合
+      // endPointMarker:null,//轨迹终点标记
     }
   },
   beforeDestroy() {
@@ -41,17 +42,22 @@ export default {
     });
   },
   methods: {
+    //回到原中心点
+    backMap() {
+      var point = new BMapGL.Point(118.880278, 35.649947);
+      this.baiduMap.centerAndZoom(point, 11);
+    },
     initMap() {
       this.baiduMap = new BMapGL.Map('container');
       var point = new BMapGL.Point(118.880278, 35.649947);
       this.baiduMap.centerAndZoom(point, 11);
       this.baiduMap.enableScrollWheelZoom(true);
-      this.baiduMap.setMapStyleV2({
-        styleId: 'ec6ebc8ad35bcfbd56a424a29f325360'//'ef4f05652d24d0f23332710fbacad245'//
-      });
       // this.baiduMap.setMapStyleV2({
-      //   styleJson
-      // })
+      //   styleId: 'ec6ebc8ad35bcfbd56a424a29f325360'//'ef4f05652d24d0f23332710fbacad245'//
+      // });
+      this.baiduMap.setMapStyleV2({
+        styleJson
+      })
       // this.view = new mapvgl.View({
       //   map: this.baiduMap
       // });
@@ -71,6 +77,10 @@ export default {
           //   isPoiMask: true,
           //   isMapMask: true,
           //   showRegion: 'inside',
+          //   topFillColor: '#5679ea',
+          //   topFillOpacity: 0.5,
+          //   sideFillColor: '#5679ea',
+          //   sideFillOpacity: 0.9
           // });
           // this.baiduMap.addOverlay(mapmask);
           var border = new BMapGL.Polyline(ptArr, {
@@ -78,7 +88,7 @@ export default {
             strokeWeight: 3,
             strokeOpacity: 1
           });
-          // this.baiduMap.addOverlay(border);
+          this.baiduMap.addOverlay(border);
           // var ply = new BMapGL.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: "#0e94eb", fillColor: '', fillOpacity: 0, }); //建立多边形覆盖物
           // this.baiduMap.addOverlay(ply);  //添加覆盖物
         }
@@ -140,15 +150,17 @@ export default {
           //   objdata: { carNo: carNo, deviceId: key, resData: res.Data, res2Data: res2.Data }
           // })
           this.markList.push(marker);
-          let sContent = `<div style="padding:0 10px 10px;font-size:14px;line-height:22px;">
-                            <div>车牌号：${carNo}</div>
-                            <div>设备位置：${res2.Data}</div>
-                            <div>最后定位时间：${res.Data.GPSTimeStamp.replace("T", " ")}</div>
-                            <div>状态：${this.locationStatus[res.Data.SbcStatus]}</div>
-                            <div>时速：${res.Data.spd}km/h</div>
-                            <div style="display: inline-block;border: 1px solid #eee;border-radius: 3px;padding: 3px 8px;color: #0e94eb;cursor: pointer;" id="btnPath_${deviceId}">行车轨迹</div>
+          let sContent = `<div style="font-size:14px;line-height:22px;padding:0 0 0 25px;">
+                            <div style="display:flex;align-items:center;margin-bottom:20px;font-style: italic;font-size:20px;font-family: FZSK;">
+                              <div style="color: #ffffff;margin-right:15px;">${carNo}</div>
+                              <div style="display:inline-block;color:${res.Data.SbcStatus==3?"#ffffff":"#062766"};background:${res.Data.SbcStatus==3?"#1dd58e":"#9ab3c6"};width:50px;height:24px;line-height:24px;text-align:center;border-radius:12px;font-size:16px;">${this.locationStatus[res.Data.SbcStatus]}</div>
+                              <div style="margin-left:45px;color: #fff;font-style: italic;font-size:20px;margin-right:15px;">${res.Data.spd}km/h</div>  
+                            </div>
+                            <div style="display:flex;margin-bottom:10px;"><div style="color: #ffffff;width:80px;">设备位置：</div><div style="color: #ffffff;flex:1;">${res2.Data}</div></div>
+                            <div style="display:flex;"><div style="color: #ffffff;width:100px;">最后定位时间：</div><div style="color: #ffffff;flex:1;">${res.Data.GPSTimeStamp.replace("T", " ")}</div></div>
+                            <div style="text-align:center;margin:15px 0 0;"> <div style="display: inline-block;width:88px;height:30px;line-height:30px;border-radius: 15px;text-align:center;color: #1b2f57;font-style: italic;font-family: FZSK;cursor: pointer;background:#facd89;font-size:18px;font-weight:bold;" id="btnPath_${deviceId}">行车轨迹</div></div>
                         </div>`;
-          let infoWindow = new BMapGL.InfoWindow(sContent);
+          let infoWindow = new BMapGL.InfoWindow(sContent,{width:367,height:220});
           // marker添加点击事件
           infoWindow.addEventListener('open', () => {
             document.getElementById('btnPath_' + deviceId).addEventListener('click', () => {
@@ -249,8 +261,19 @@ export default {
           this.baiduMap.removeOverlay(this.polyline);
           this.polyline = null;
         }
-        this.polyline = new BMapGL.Polyline(point, { strokeColor: '#F5533D', strokeWeight: 5, strokeOpacity: 1, })
+        this.polyline = new BMapGL.Polyline(point, { strokeColor: '#ffe954', strokeWeight: 4, strokeOpacity: 1, })
         this.baiduMap.addOverlay(this.polyline);
+        //终点标注maker
+        if(this.endPointMarker){
+          this.baiduMap.removeOverlay(this.endPointMarker);
+          this.endPointMarker = null;
+        }
+        // var myIcon = new BMapGL.Icon(require("@/assets/images/end_point_icon.png"), new BMapGL.Size(37, 44));
+        // this.endPointMarker = new BMapGL.Marker(point[point.length-1], {
+        //     icon: myIcon
+        // });
+        // console.log('最后一个坐标',point[point.length-1])
+        // this.baiduMap.addOverlay(this.endPointMarker);
         this.baiduMap.centerAndZoom(point[0], 15);
         this.baiduMap.closeInfoWindow();
         // this.polyline = new BMapGL.Polyline(point, {