|  | @@ -1,5 +1,107 @@
 | 
											
												
													
														|  |  <template>
 |  |  <template>
 | 
											
												
													
														|  |    <div>
 |  |    <div>
 | 
											
												
													
														|  |      gps
 |  |      gps
 | 
											
												
													
														|  | 
 |  | +    <!-- <el-amap-search-box class="search-box"
 | 
											
												
													
														|  | 
 |  | +                        value="searchValue"
 | 
											
												
													
														|  | 
 |  | +                        :search-option="searchOption"
 | 
											
												
													
														|  | 
 |  | +                        :on-search-result="onSearchResult"></el-amap-search-box> -->
 | 
											
												
													
														|  | 
 |  | +    <el-amap :zoom="zoom"
 | 
											
												
													
														|  | 
 |  | +             vid="amapDemo"
 | 
											
												
													
														|  | 
 |  | +             :amap-manager="amapManager"
 | 
											
												
													
														|  | 
 |  | +             :plugin="plugin"
 | 
											
												
													
														|  | 
 |  | +             :center="center"
 | 
											
												
													
														|  | 
 |  | +             class="amap-demo">
 | 
											
												
													
														|  | 
 |  | +      <!--  :events="markerEvents()" -->
 | 
											
												
													
														|  | 
 |  | +      <el-amap-marker v-for="(marker, index) in markers"
 | 
											
												
													
														|  | 
 |  | +                      :key="index"
 | 
											
												
													
														|  | 
 |  | +                      :position="marker"></el-amap-marker>
 | 
											
												
													
														|  | 
 |  | +    </el-amap>
 | 
											
												
													
														|  |    </div>
 |  |    </div>
 | 
											
												
													
														|  | -</template>
 |  | 
 | 
											
												
													
														|  | 
 |  | +</template> 
 | 
											
												
													
														|  | 
 |  | +<script>
 | 
											
												
													
														|  | 
 |  | +import VueAMap from 'vue-amap'
 | 
											
												
													
														|  | 
 |  | +// 地图
 | 
											
												
													
														|  | 
 |  | +(function () {
 | 
											
												
													
														|  | 
 |  | +  let func = EventTarget.prototype.addEventListener;
 | 
											
												
													
														|  | 
 |  | +  let supportsPassive = false
 | 
											
												
													
														|  | 
 |  | +  try {
 | 
											
												
													
														|  | 
 |  | +    let opts = Object.defineProperty({}, 'passive', {
 | 
											
												
													
														|  | 
 |  | +      get: function () {
 | 
											
												
													
														|  | 
 |  | +        supportsPassive = true;
 | 
											
												
													
														|  | 
 |  | +      }
 | 
											
												
													
														|  | 
 |  | +    })
 | 
											
												
													
														|  | 
 |  | +    document.addEventListener("testPassive", null, opts);
 | 
											
												
													
														|  | 
 |  | +    document.removeEventListener('testPassive', null, opts);
 | 
											
												
													
														|  | 
 |  | +  } catch (e) { }
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +  EventTarget.prototype.addEventListener = function (type, fn, capture) {
 | 
											
												
													
														|  | 
 |  | +    this.func = func;
 | 
											
												
													
														|  | 
 |  | +    capture = capture instanceof Object ? capture : {};
 | 
											
												
													
														|  | 
 |  | +    capture.passive = supportsPassive;
 | 
											
												
													
														|  | 
 |  | +    this.func(type, fn, capture);
 | 
											
												
													
														|  | 
 |  | +  };
 | 
											
												
													
														|  | 
 |  | +}());
 | 
											
												
													
														|  | 
 |  | +// Vue.use(VueAMap)
 | 
											
												
													
														|  | 
 |  | +VueAMap.initAMapApiLoader({
 | 
											
												
													
														|  | 
 |  | +  key: 'b1e6ac2eb28902ce91a490edf194e000',
 | 
											
												
													
														|  | 
 |  | +  plugin: ['AMap.Geolocation', 'AMap.PlaceSearch', 'AMap.Geocoder'],
 | 
											
												
													
														|  | 
 |  | +  v: '1.4.4'
 | 
											
												
													
														|  | 
 |  | +})
 | 
											
												
													
														|  | 
 |  | +let amapManager = new VueAMap.AMapManager();
 | 
											
												
													
														|  | 
 |  | +export default {
 | 
											
												
													
														|  | 
 |  | +  data () {
 | 
											
												
													
														|  | 
 |  | +    return {
 | 
											
												
													
														|  | 
 |  | +      zoom: 20,
 | 
											
												
													
														|  | 
 |  | +      amapManager,
 | 
											
												
													
														|  | 
 |  | +      center: [114.34371, 30.55939],
 | 
											
												
													
														|  | 
 |  | +      // events: {
 | 
											
												
													
														|  | 
 |  | +      //   init (o) {
 | 
											
												
													
														|  | 
 |  | +      //     let marker = new AMap.Marker({
 | 
											
												
													
														|  | 
 |  | +      //       position: [114.34371, 30.55939]
 | 
											
												
													
														|  | 
 |  | +      //     });
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +      //     marker.setMap(o);
 | 
											
												
													
														|  | 
 |  | +      //   }
 | 
											
												
													
														|  | 
 |  | +      // },
 | 
											
												
													
														|  | 
 |  | +      markers: [
 | 
											
												
													
														|  | 
 |  | +        [114.34361, 30.55949],
 | 
											
												
													
														|  | 
 |  | +        [114.34381, 30.55949],
 | 
											
												
													
														|  | 
 |  | +      ],
 | 
											
												
													
														|  | 
 |  | +      plugin: [],
 | 
											
												
													
														|  | 
 |  | +    }
 | 
											
												
													
														|  | 
 |  | +  },
 | 
											
												
													
														|  | 
 |  | +  mounted () {
 | 
											
												
													
														|  | 
 |  | +    this.getDistance()
 | 
											
												
													
														|  | 
 |  | +  },
 | 
											
												
													
														|  | 
 |  | +  activated () {
 | 
											
												
													
														|  | 
 |  | +    this.getDistance()
 | 
											
												
													
														|  | 
 |  | +  },
 | 
											
												
													
														|  | 
 |  | +  methods: {
 | 
											
												
													
														|  | 
 |  | +    // 地点搜索
 | 
											
												
													
														|  | 
 |  | +    // searchOption () { },
 | 
											
												
													
														|  | 
 |  | +    // 重置
 | 
											
												
													
														|  | 
 |  | +    onSearchResult () { },
 | 
											
												
													
														|  | 
 |  | +    getDistance () {
 | 
											
												
													
														|  | 
 |  | +      let o = amapManager.getMap();
 | 
											
												
													
														|  | 
 |  | +      let marker1 = new AMap.Marker({
 | 
											
												
													
														|  | 
 |  | +        position: [121.59996, 31.177646]
 | 
											
												
													
														|  | 
 |  | +      });
 | 
											
												
													
														|  | 
 |  | +      let marker2 = new AMap.Marker({
 | 
											
												
													
														|  | 
 |  | +        position: [121.59976, 31.177646]
 | 
											
												
													
														|  | 
 |  | +      });
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +      let p1 = marker1.getPosition();
 | 
											
												
													
														|  | 
 |  | +      let p2 = marker2.getPosition();
 | 
											
												
													
														|  | 
 |  | +      var distance = Math.round(p1.distance(p2));
 | 
											
												
													
														|  | 
 |  | +      console.log(distance)
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +    }
 | 
											
												
													
														|  | 
 |  | +  }
 | 
											
												
													
														|  | 
 |  | +}
 | 
											
												
													
														|  | 
 |  | +</script>
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +<style lang="scss" scoped>
 | 
											
												
													
														|  | 
 |  | +.amap-demo {
 | 
											
												
													
														|  | 
 |  | +  height: 300px;
 | 
											
												
													
														|  | 
 |  | +}
 | 
											
												
													
														|  | 
 |  | +</style>
 |