前端小江

Appearance

回到顶部
On this page

ios 下 setTimeOut 中不执行 window.open

ios 根据用户的行为来判定操作是不是属于流氓操作,如果是用户自己的动作触发的 window.open 就不会被阻止，比如写在 onclick 事件中，但如果是代码自动触发就会被阻 止的。

解决方案，使用 window.location.href 跳转（在微信上 ios 好像还是有问题，建议增加 弹窗确认跳转），或者为事件添加点击事件

微信 h5 通过百度地图获取城市

直接使用百度地图 api 的 getLocalCity 在手机上获取的城市一直都是全国使用 百度地图 api 获取经纬度 在微信上会直接重定向到百度域名

最终方案：使用原生获取经纬度，再转换成百度地图的坐标（不转换直接使用变量无法解析 ），再解析城市

import BMap from 'BMap'
import { Toast } from 'vant'
// 返回的定位结果
export type LocationResult = {
  cityName: string
  cityCode: string | number
}
// 经纬度，等位置信
interface PositionOptions {
  coords: {
    latitude: number
    longitude: number
  }
}

interface ICITY_LIST {
  code: string
  name: string
}

export function getCity() {
  return new Promise<LocationResult>((resolve, reject) => {
    const geoShowPosition = (position: PositionOptions) => {
      if (position.coords.latitude) {
        const { latitude, longitude } = position?.coords
        // 坐标转换
        const pt = new BMap.Point(latitude, longitude)
        const convertor = new BMap.Convertor()
        const pointArr = []
        pointArr.push(pt)
        convertor.translate(pointArr, 1, 5, translateCallback)
      } else {
        reject()
      }
    }

    function translateCallback(data: { points: { lat: number; lng: number }[] }) {
      if (data.points && data.points.length > 0) {
        const myGeo = new BMap.Geocoder()
        const pt = new BMap.Point(data.points[0].lat, data.points[0].lng)
        // 解析城市
        myGeo.getLocation(pt, (result: { addressComponents: { city: string } }) => {
          const testJson = require('../constant/city.json') as ICITY_LIST[]
          let cityCode = '0'
          testJson.forEach(item => {
            if (item.name === result?.addressComponents?.city) {
              cityCode = item.code
              return
            }
          })
          resolve({
            cityName: result?.addressComponents?.city,
            cityCode
          })
        })
      }
    }

    const geoShowError = (error: { code: number; message: string }) => {
      Toast.fail(`getPosError:${error.code},${navigator.geolocation},${error.message}`)
      reject()
    }

    navigator.geolocation.getCurrentPosition(geoShowPosition, geoShowError)
  })
}