|
@@ -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>
|