fix(h5): 避免地图选择器重复注入

NervJS · May 29, 2023 · ce1113b · ce1113b
1 parent 35da2d3
commit ce1113b
Showing 1 changed file with 9 additions and 5 deletions.
diff --git a/packages/taro-h5/src/api/location/chooseLocation.ts b/packages/taro-h5/src/api/location/chooseLocation.ts
@@ -5,6 +5,7 @@ import { stringify } from 'query-string'
 
 import { MethodHandler } from '../../utils/handler'
 
+let container: HTMLDivElement | null = null
 function createLocationChooser (handler, key = LOCATION_APIKEY, mapOpt: Taro.chooseLocation.Option['mapOpts'] = {}) {
   const { latitude, longitude, ...opts } = mapOpt
   const query = {
@@ -14,7 +15,8 @@ function createLocationChooser (handler, key = LOCATION_APIKEY, mapOpt: Taro.cho
     referer: 'myapp',
     ...opts
   }
-  const html = `
+  if (!container) {
+    const html = `
 <div class='taro_choose_location'>
   <div class='taro_choose_location_bar'>
     <div class='taro_choose_location_back'></div>
@@ -24,8 +26,9 @@ function createLocationChooser (handler, key = LOCATION_APIKEY, mapOpt: Taro.cho
   <iframe class='taro_choose_location_frame' frameborder='0' src="https://apis.map.qq.com/tools/locpicker?${stringify(query, { arrayFormat: 'comma', skipNull: true })}" />
 </div>
 `
-  const container = document.createElement('div')
-  container.innerHTML = html
+    container = document.createElement('div')
+    container.innerHTML = html
+  }
   const main: HTMLDivElement = container.querySelector('.taro_choose_location') as HTMLDivElement
 
   function show () {
@@ -49,7 +52,8 @@ function createLocationChooser (handler, key = LOCATION_APIKEY, mapOpt: Taro.cho
   }
 
   function remove () {
-    container.remove()
+    container?.remove()
+    container = null
     window.removeEventListener('popstate', back)
   }
 
@@ -61,7 +65,7 @@ function createLocationChooser (handler, key = LOCATION_APIKEY, mapOpt: Taro.cho
   return {
     show,
     remove,
-    container
+    container,
   }
 }