# up geo-tip

src/views/counter/map2.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
       <div id="map-container" tabindex="0"></div>
-      <div id="tip"></div>
+      <div id="geo-tip"></div>
       <div v-show="flag" id="panel"></div>
       <div v-show="mapClick && flag" id='bt-wrapper'>
         <div id='bt'>点击去高德地图</div>
@@ -163,18 +163,18 @@ export default {
     },
     onComplete(data) {
       var str = ['定位成功']
-      str.push('经度：' + data.position.getLng())
-      str.push('纬度：' + data.position.getLat())
       this.geo = [data.position.getLng(), data.position.getLat()]
+      str.push(data.position.getLng())
+      str.push(data.position.getLat())
       console.log(this.geo)
       if (data.accuracy) {
         str.push('精度：' + data.accuracy + ' 米')
       }
       str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'))
-      document.getElementById('tip').innerHTML = str.join('<br>')
+      document.getElementById('geo-tip').innerHTML = str.join('<br>')
     },
     onError() {
-      document.getElementById('tip').innerHTML = '定位失败'
+      document.getElementById('geo-tip').innerHTML = '定位失败'
     },
     getDevicesInitMap(params) {
       fetchDeviceList(params).then(response => {
@@ -320,6 +320,18 @@ export default {
       display: none;
     }
   }
+  #geo-tip {
+    font-size: .8rem;
+    position: absolute;
+    padding: 5px;
+    color: white;
+    background-color:goldenrod;
+    width: 150px;
+    top: 15%;
+    left: 10%;
+    border-radius: 5px;
+    text-align: center;
+  }
   #bt-wrapper {
     position: absolute;
     width: 2rem;