# C-2.11 周边地图增加卫星图层切换

场景：大和客户提出希望在地图上增加卫星图切换

需求：

1.  图标位置调整和vista返回按钮对齐。
    
2.  在C端（PC、移动双端）google地图，增加图层切换选择，点击切换按钮更换地图图层显示
    
    1.  UI增加图层切换按钮，可以在地形和卫星图之间切换
        
    2.  只显示一个按钮，位置在街景下方
        
        1.  默认态时显示卫星图标
            
        2.  卫星图时显示默认图标
            
        
    3.  增加国际化hover提示2个
        
        1.  默认图标：map.default
            
        2.  卫星图标：map.satellite
            
    4.  按钮分为2个，地形和卫星，按照当前地图样式切换显示  
        参考google地图设计
        
    5.  ![image.png](https://alidocs.oss-cn-zhangjiakou.aliyuncs.com/res/v9kqDejxoQNZXOVx/img/c002c0b6-1d4d-4d4f-b19f-603a0ac4275e.png)
        
    
3.  B端不增加
    
4.  中国大陆境内bing地图不增加
    

 $\color{#0089FF}{@周思瀚}$ 地图需要增加2个按钮设计![image.png](https://alidocs.oss-cn-zhangjiakou.aliyuncs.com/res/v9kqDejxoQNZXOVx/img/45042b47-32cb-4e0d-b57b-103a718610b8.png)

[https://lanhuapp.com/link/#/invite?sid=X0RZGrG](https://lanhuapp.com/link/#/invite?sid=X0RZGrG)

1.  图标：
    
    1.  卫星图、默认图
        
    2.  用的是和谷歌地图完全一致的配图
        
    3.  ![截屏2026-05-13 10.46.23.png](https://alidocs.oss-cn-zhangjiakou.aliyuncs.com/res/v9kqDejxoQNZXOVx/img/2819afcf-a75f-4c79-a1f2-726077e8c0bf.png)
        
    
    [请至钉钉文档查看附件《图标.zip》。](https://alidocs.dingtalk.com/i/nodes/a9E05BDRVQ55MjpaTy9RyvmEV63zgkYA?iframeQuery=anchorId%3DX02mp3glsdtg178sttniu)
    
2.  响应式
    
    1.  PC端：按钮40
        
    2.  移动端：按钮32
        

![截屏2026-05-13 10.46.47.png](https://alidocs.oss-cn-zhangjiakou.aliyuncs.com/res/v9kqDejxoQNZXOVx/img/b5a477ec-60c8-4e79-aba5-7df8fe2ab6dc.png)

1.  地图按钮：
    
    1.  点击切换，不弹弹窗
        
    2.  图标有白色描边，有投影
        
    3.  新增按钮和原来的按钮尺寸相同，投影相同
        
    4.  ![截屏2026-05-13 10.48.07.png](https://alidocs.oss-cn-zhangjiakou.aliyuncs.com/res/v9kqDejxoQNZXOVx/img/1ec0239b-bfdf-4120-8db4-14ed29eaca05.png)![截屏2026-05-13 10.48.20.png](https://alidocs.oss-cn-zhangjiakou.aliyuncs.com/res/v9kqDejxoQNZXOVx/img/9240e86b-0cf0-42ee-bcaf-7c0341554fee.png)
        
2.  hover提示
    
    1.  ![截屏2026-05-13 11.06.50.png](https://alidocs.oss-cn-zhangjiakou.aliyuncs.com/res/v9kqDejxoQNZXOVx/img/f8640ae8-1c4b-4e3e-a98c-500df717b0cd.png)