react-google-maps icon indicating copy to clipboard operation
react-google-maps copied to clipboard

[Bug]地图使用MapControl在iphone12 系统14.2.1上会报错

Open w3cpress opened this issue 1 year ago • 4 comments

Description

521726279207_ pic

Steps to Reproduce

import React, { useCallback, useMemo } from 'react'
import { useState, useEffect, FC, useRef, createRef, useContext, useReducer } from 'react'

import { APIProvider, useMap, Map, ControlPosition, RenderingType, MapControl, MapProps } from '@vis.gl/react-google-maps';
import './index.scss'
// import { getConfig } from '../../../../utils/google';
// const googleMapKey = getConfig.google.apiKey;
// const mapId = getConfig.google.mapId;

const googleMapKey = "testMapKey";
const mapId = "testId";

const Index: FC = () => {

    const mapProps: MapProps = {
        defaultCenter: {
            lat: 24.7136,
            lng: 46.6753,
        },
        disableDoubleClickZoom: false,
        mapId: mapId,
        mapTypeControl: false,
        minZoom: 5,
        maxZoom: 17,
        zoom: 10,
        style: {
            position: 'absolute',
            minHeight: "100vh",
            width: "100%"
        },
        renderingType: RenderingType.UNINITIALIZED,
    };
    return (
        <div className='index'>
            <APIProvider apiKey={googleMapKey}>
            <Map {...mapProps}>
                <MapControl position={ControlPosition.CENTER}>
                    <div style={{
                        background: 'red'
                    }}>
                        .. any component here will be added to the control-containers of the
                        google map instance ..
                    </div>
                </MapControl>
            </Map>
        </APIProvider>
        </div>
    )
}

export default Index

It's just the normal official demo code, without any additional rendering, and then the above error is reported. Systems equal to or higher than iOS 15 will not have this error.

(original text) 就是正常的官方demo代码,没有其他渲染,然后就报上面的错误了。大于等于ios 15的系统都不会有这个报错。

Environment

  • Library version: 最新
  • Google maps version: weekly
  • Browser and Version: 跟随ios 系统14.2.1的
  • OS: 14.2.1

Logs

No response

w3cpress avatar Sep 14 '24 02:09 w3cpress

Maybe because the iOS version (14.2.1) seems a bit too old. Google Maps API officially supported two major versions: iOS 16 and 17 so probably the latest library is not well tested on iOS 14.

Browser Support  |  Maps JavaScript API  |  Google for Developers - https://developers.google.com/maps/documentation/javascript/browsersupport

The latest version of iOS 14 is 14.8.1. I'm not sure if this can fix the issue but how about updating to the latest version of iOS 14. I don't recommend using iOS 14 though since it won't receive the security patch anymore.

iOS version history - Wikipedia - https://en.wikipedia.org/wiki/IOS_version_history

shuuji3 avatar Sep 14 '24 08:09 shuuji3

I think @shuuji3 is right: The stacktrace in your screenshot doesn't contain any stack frames from our library. I can only guess what that .close() method that causes the exception actually is, but it's probably part of a web-standard that isn't supported by older iOS versions. So there's probably nothing we could do about this.

usefulthink avatar Sep 17 '24 07:09 usefulthink

Another note: Please invest the time to translate a bug report into English, this will make it easier for us to understand and fix, and it will help others searching for similar issues find this.

usefulthink avatar Sep 17 '24 07:09 usefulthink

@usefulthink @shuuji3 Thanks to everyone, I have replaced the functional part I need without using mapControl.

w3cpress avatar Sep 18 '24 04:09 w3cpress