From a8b8b06e03e81cf93d11ac0cf85edd2d32c6cf20 Mon Sep 17 00:00:00 2001
From: qiang <guoshengqiang@live.com>
Date: Tue, 28 Sep 2021 15:28:20 +0800
Subject: [PATCH] feat(h5): openLocation add google maps

---
 .../system-routes/open-location/index.vue     | 231 +++++++++++++++---
 src/platforms/h5/helpers/location.js          |   5 +
 2 files changed, 198 insertions(+), 38 deletions(-)

diff --git a/src/platforms/h5/components/system-routes/open-location/index.vue b/src/platforms/h5/components/system-routes/open-location/index.vue
index 4bd8025b2..c595186e1 100644
--- a/src/platforms/h5/components/system-routes/open-location/index.vue
+++ b/src/platforms/h5/components/system-routes/open-location/index.vue
@@ -1,36 +1,65 @@
 <template>
   <div class="uni-system-open-location">
-    <div
-      class="map-content"
-      :class="{ 'fix-position': isPoimarkerSrc }"
+    <v-uni-map
+      :latitude="center.latitude"
+      :longitude="center.longitude"
+      class="map"
+      :markers="[marker, location]"
+      @regionchange="onRegionChange"
     >
-      <iframe
-        ref="map"
-        :src="src"
-        allow="geolocation"
-        sandbox="allow-scripts allow-same-origin allow-forms allow-top-navigation allow-modals allow-popups"
-        frameborder="0"
-        @load="_check"
-      />
-      <!-- 去这里 -->
       <div
-        v-if="isPoimarkerSrc"
-        class="actTonav"
-        @click="_nav"
-      />
+        class="map-move"
+        @click="moveToLocation"
+      >
+        <i>&#xec32;</i>
+      </div>
+    </v-uni-map>
+    <div class="info">
+      <div
+        class="name"
+        @click="setCenter(marker)"
+      >
+        {{ name }}
+      </div>
+      <div
+        class="address"
+        @click="setCenter(marker)"
+      >
+        {{ address }}
+      </div>
+      <div
+        class="nav"
+        @click="nav"
+      >
+        <svg
+          width="26"
+          height="26"
+          viewBox="0 0 1024 1024"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M896 544c-207.807 0-388.391 82.253-480 203.149V173.136l201.555 201.555c12.412 12.412 32.723 12.412 45.136 0 12.412-12.412 12.412-32.723 0-45.136L408.913 75.777a31.93 31.93 0 0 0-2.222-2.468c-6.222-6.222-14.429-9.324-22.631-9.308l-0.059-0.002-0.059 0.002c-8.202-0.016-16.409 3.085-22.631 9.308a31.93 31.93 0 0 0-2.222 2.468l-253.78 253.778c-12.412 12.412-12.412 32.723 0 45.136 12.412 12.412 32.723 12.412 45.136 0L352 173.136V928c0 17.6 14.4 32 32 32s32-14.4 32-32c0-176.731 214.903-320 480-320 17.673 0 32-14.327 32-32 0-17.673-14.327-32-32-32z"
+            fill="#ffffff"
+          />
+        </svg>
+      </div>
     </div>
     <div
       class="nav-btn-back"
-      @click="_back"
+      @click="back"
     >
       <i class="uni-btn-icon">&#xe601;</i>
     </div>
   </div>
 </template>
 <script>
-const key = __uniConfig.qqMapKey
-const referer = 'uniapp'
-const poimarkerSrc = 'https://apis.map.qq.com/tools/poimarker'
+import {
+  ICON_PATH_ORIGIN,
+  ICON_PATH_TARGET,
+  MapType,
+  getMapInfo
+} from '../../../helpers/location'
 
 export default {
   name: 'SystemOpenLocation',
@@ -48,30 +77,78 @@ export default {
       scale,
       name,
       address,
-      src: latitude && longitude ? `${poimarkerSrc}?type=0&marker=coord:${latitude},${longitude};title:${name};addr:${address};&key=${key}&referer=${referer}` : '',
-      isPoimarkerSrc: true
+      center: {
+        latitude,
+        longitude
+      },
+      marker: {
+        id: 1,
+        latitude,
+        longitude,
+        iconPath: ICON_PATH_TARGET,
+        width: 32,
+        height: 52
+      },
+      location: {
+        id: 2,
+        latitude: 0,
+        longitude: 0,
+        iconPath: ICON_PATH_ORIGIN,
+        width: 44,
+        height: 44
+      }
     }
   },
   methods: {
-    _back () {
-      if (this.$refs.map.src.indexOf(poimarkerSrc) !== 0) {
-        this.$refs.map.src = this.src
-      } else {
-        getApp().$router.back()
+    onRegionChange (event) {
+      const centerLocation = event.detail.centerLocation
+      if (centerLocation) {
+        this.center.latitude = centerLocation.latitude
+        this.center.longitude = centerLocation.longitude
       }
-      this._check()
     },
-    _check () {
-      if (this.$refs.map.src.indexOf(poimarkerSrc) === 0) {
-        this.isPoimarkerSrc = true
-      } else {
-        this.isPoimarkerSrc = false
-      }
+    setCenter ({ latitude, longitude }) {
+      this.center.latitude = latitude
+      this.center.longitude = longitude
+    },
+    moveToLocation () {
+      uni.getLocation({
+        type: 'gcj02',
+        success: this.move.bind(this),
+        fail: () => {
+          // move({
+          //   latitude: 0,
+          //   longitude: 0
+          // })
+        }
+      })
     },
-    _nav () {
-      var url =
-        `https://map.qq.com/nav/drive#routes/page?transport=2&epointy=${this.latitude}&epointx=${this.longitude}&eword=${encodeURIComponent(this.name || '目的地')}&referer=${referer}`
-      this.$refs.map.src = url
+    move ({ latitude, longitude }) {
+      this.location.latitude = latitude
+      this.location.longitude = longitude
+      this.setCenter({ latitude, longitude })
+    },
+    back () {
+      getApp().$router.back()
+    },
+    nav () {
+      const mapInfo = getMapInfo()
+      let url = ''
+      if (mapInfo.type === MapType.GOOGLE) {
+        const origin = this.location.latitude
+          ? `&origin=${this.location.latitude}%2C${this.location.longitude}`
+          : ''
+        url = `https://www.google.com/maps/dir/?api=1${origin}&destination=${this.latitude}%2C${this.longitude}`
+      } else if (mapInfo.type === MapType.QQ) {
+        const fromcoord = this.location.latitude
+          ? `&fromcoord=${this.location.latitude}%2C${this.location.longitude}`
+          : ''
+        url = `https://apis.map.qq.com/uri/v1/routeplan?type=drive${fromcoord}&tocoord=${this.latitude
+          }%2C${this.longitude}&from=${encodeURIComponent(
+            '我的位置'
+          )}&to=${encodeURIComponent(this.name || '目的地')}&ref=${mapInfo.key}`
+      }
+      window.open(url)
     }
   }
 }
@@ -85,6 +162,84 @@ export default {
   width: 100%;
   height: 100%;
   background: #f8f8f8;
+  z-index: 999;
+}
+
+.uni-system-open-location .map {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  bottom: 80px;
+  height: auto;
+}
+
+.uni-system-open-location .info {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 80px;
+  background-color: white;
+  padding: 15px;
+  box-sizing: border-box;
+  line-height: 1.5;
+}
+
+.uni-system-open-location .info > .name {
+  font-size: 17px;
+  color: #111111;
+}
+
+.uni-system-open-location .info > .address {
+  font-size: 14px;
+  color: #666666;
+}
+
+.uni-system-open-location .info > .nav {
+  position: absolute;
+  top: 50%;
+  right: 15px;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  margin-top: -25px;
+  background-color: #007aff;
+}
+
+.uni-system-open-location .info > .nav > svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+.uni-system-open-location .map-move {
+  position: absolute;
+  bottom: 50px;
+  right: 10px;
+  width: 40px;
+  height: 40px;
+  box-sizing: border-box;
+  line-height: 40px;
+  background-color: white;
+  border-radius: 50%;
+  pointer-events: auto;
+  cursor: pointer;
+  box-shadow: 0px 0 5px 1px rgba(0, 0, 0, 0.3);
+}
+
+.uni-system-open-location .map-move > i {
+  display: block;
+  width: 100%;
+  height: 100%;
+  font: normal normal normal 14px/1 "unimapbtn";
+  line-height: inherit;
+  text-align: center;
+  font-size: 24px;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
 }
 
 .uni-system-open-location .nav-btn-back {
diff --git a/src/platforms/h5/helpers/location.js b/src/platforms/h5/helpers/location.js
index 827e89c4a..ab61ef7dd 100644
--- a/src/platforms/h5/helpers/location.js
+++ b/src/platforms/h5/helpers/location.js
@@ -1,3 +1,8 @@
+export const ICON_PATH_ORIGIN =
+  'data:image/png;base64,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'
+export const ICON_PATH_TARGET =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAACcCAMAAAC3Fl5oAAAB3VBMVEVMaXH/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/EhL/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/Dw//AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/GRn/NTX/Dw//Fhb/AAD/AAD/AAD/GRn/GRn/Y2P/AAD/AAD/ExP/Ghr/AAD/AAD/MzP/GRn/AAD/Hh7/AAD/RUX/AAD/AAD/AAD/AAD/AAD/AAD/Dg7/AAD/HR3/Dw//FRX/SUn/AAD/////kJD/DQ3/Zmb/+/v/wMD/mJj/6en/vb3/1NT//Pz/ODj/+fn/3Nz/nJz/j4//9/f/7e3/9vb/7Oz/2Nj/x8f/Ozv/+Pj/3d3/nZ3/2dn//f3/6Oj/2tr/v7//09P/vr7/mZn/l5cdSvP3AAAAe3RSTlMAAhLiZgTb/vztB/JMRhlp6lQW86g8mQ4KFPs3UCH5U8huwlesWtTYGI7RsdVeJGfTW5rxnutLsvXWF8vQNdo6qQbuz7D4hgVIx2xtw8GC1TtZaIw0i84P98tU0/fsj7PKaAgiZZxeVfo8Z52eg1P0nESrENnjXVPUgw/uuSmDAAADsUlEQVR42u3aZ3cTRxgF4GtbYleSLdnGcsENG2ODjbExEHrvhAQCIb1Bem+QdkeuuFMNBBJIfmuOckzZI8/srHYmH3Lm+QNXK632LTvQ03Tu/IWeU/tTGTKT2n+q58L5c00wpXJd47DHEt5w47pKxLbhdLdPKb/7dBYxVLxw1GcI/2h1BcpzKNFHLX2JQ4gumaiitqpEEhEdOMJI9h5AFC3feYzI+7IF2tpSLEOqDXpObPRYFm/jCWho/4Ble7MdoT7fzhhq9yHEz28wltU1UPrJZ0wd66HwicfYvEFIfePTAP8tSLTupBHvtGJFH9bSkNrNWEHzERrT34xSH9Ogr1CijkbVAUH1KRqVqkdQAw07iIAaGlcTqI+/0LjeJJ5J0IIEnkpXMdzs4sTtW9dnZq7fuj2xOMtwVWk88RHDjBYejYvnjD8qjOpfQsUqhvj7oSjxcJIhVj3pyKqpNjYvVjQ/RrXq5YABKi3MCYm5BSrtWO5v11DlmlC4RpU1WRS9SJU7QukOVbpQ9JLu549+Dd0AUOlTbkGEuk85vxLAK5QbuytC3R2j3HoAjZSbFxrmKTcCoJdSk0LLJKV6gSaPMqNTQsvUKGW8JrxKqUWhaZFSeWyh1LTQNE2pHF6mzOy40DQ+S5mLimJcENoKlOnBWsr8KbRNUGYt5LXgd6HtD3lNQIoyN4S2G5RJIUOZm0LbTcqsBqVmhLYZSlkPsP4VWf+Rrd+m1v9o9h8Vv5p42C1R5qL1x7WRglOgVN52yfwNOBu76P+lLPoYidu23KPciIHGa07ZeIW1jvcNtI7q5vexCPGYCmf+m/Y9a3sAwQ5bI9T7ukPgPcn9GToEao+xk1OixJT+GIsvNAbx6eAgPq0xiF+KtkpYKhRXCQ8eFFcJhSWGu3rZ8jJkCM8kz9K4TUnrC6mAgzTsB9tLwQ2W15qfosQ2GrQNpZr7aczbzVjBZsvLcaC1g0bsbIVEnU8DOr6H1KDH2LwtUBi0/JII6Dxm9zUXkH+XMWzfh1Dte1i2Pe3QkC77Zel7aehpO8wyHG6Dtt0NjKxhN6I4uSli/TqJiJJDUQ4NDCURXTrXRy1XcumyD24M+AzhD1RXIIZsl/LoyZmurJHDM7s8lvB2FQ/PmPJ6PseAXP5HGMYAAC7ABbgAF+ACXIALcAEuwAW4ABfgAlyAC3ABLsAFuID/d8Cx4NEt8/byOf0wLnis8zjMq9/Kp7bWw4JOj8u8TlhRl+G/Mp2wpOX48GffvvZ1CyL4B53LAS6zb08EAAAAAElFTkSuQmCC'
+
 export const MapType = {
   QQ: 'qq',
   GOOGLE: 'google',
-- 
GitLab