【小程序开发】地图circle自适应大小(radius适配)

问题

小程序地图组件map可以配置circles,用于标示当前位置的一个范围
circle有一个字段radius来规定圆圈半径
不过,这个值是与地图对应,即地图缩放时,它并不会改变大小

circle的透明度是通过配置fillColor属性的#XXXXXX00最后2位实现的,当不配置(即颜色值只有6位)时等同于opacity=1,当为00时,等同于opacity=0,以此类推。

在这里插入图片描述

官网api:

circles 在地图上显示圆

属性说明类型必填备注
latitude纬度Number浮点数,范围 -90 ~ 90
longitude经度Number浮点数,范围 -180 ~ 180
color描边的颜色String十六进制
fillColor填充颜色String十六进制
radius半径Number
strokeWidth描边的宽度Number

这里的radius就是来表示圆的半径的

解决方案

比例尺

最开始是打算通过地图比例尺,然后就可以计算出来了,结果,官方论坛
在这里插入图片描述
emmmm,算了,另外想方案= =

是时候考验真正的技术了

官方有个接口
MapContext.getRegion(Object object)
基础库 1.4.0 开始支持,低版本需做兼容处理。

获取当前地图的视野范围

参数
Object object

属性类型默认值必填说明
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

object.success 回调函数
参数

Object res

属性类型说明
southwestnumber西南角经纬度
northeastnumber东北角经纬度

通过这个接口可以获取到2个坐标(左下角和右上角)
这样,我们就可以通过这2个坐标计算出2点之间的水平/垂直距离
从而得到radius的值

radius值为number,而且根据观察应该是1代表1m

计算2坐标换算距离我是参考微信小程序中使用地图和定位的一些坑和经验中的计算方法

var EARTH_RADIUS = 6378.137; //地球半径
function rad(d) {
    return d * Math.PI / 180.0;
}
function getDistance(lng1, lat1, lng2, lat2) {
  var radLat1 = rad(lat1);
  var radLat2 = rad(lat2);
  var a = radLat1 - radLat2;
  var b = rad(lng1) - rad(lng2);
  var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2)
    + Math.cos(radLat1) * Math.cos(radLat2)
    * Math.pow(Math.sin(b / 2), 2)));
  s = s * EARTH_RADIUS;
  s = Math.round(s * 10000) / 10000;
  return s;//返回数值单位:公里
}

通过getRegion接口我们得到2个坐标值,通过计算判断,得到短边,然后进行计算短边实际距离

this.wxmap.getRegion({
   success:res=>{
       let lng1 = res.northeast.longitude;
       let lat1 = res.northeast.latitude;
       let lng2 = res.southwest.longitude;
       let lat2 = res.southwest.latitude;

       let longitude = lng1 - lng2;
       let latitude = lat1 - lat2;
       let flag = longitude>latitude?true:false;
       let radius = 0;
       //计算得到短边,然后再通过*1000转变为m,除2得到半径,*0.8优化显示,让圈圈只占界面的80%
       if(flag){
           radius= app.getDistance(lng1,lat1,lng1,lat2)*1000/2*0.8;
       }else{
           radius= app.getDistance(lng1,lat1,lng2,lat1)*1000/2*0.8;
       }
       this.setData({
           "circles[0].radius":radius
       });
   }
});

这样,所需要的效果就达到了。

<think>好的,用户现在问的是关于移动端手机单机游戏的开发,我需要先回顾之前的对话历史。用户之前问过关于剧情向点击触发式游戏的语言选择,我给出了几种方案,比如Ren'Py、Unity、JavaScript等。现在用户可能想进一步了解如何开发移动端的单机游戏,可能需要考虑不同的因素,比如跨平台支持、性能、开发难度等。 首先,我需要确定用户的需求是什么。他们可能是一个独立开发者或者小团队,想要开发一款不需要联网的单机手游,可能更关注开发成本、工具选择以及如何适配移动端的特点,比如触控操作、不同设备的屏幕分辨率、存储管理等。 接下来,要分析移动端单机游戏的特点,比如不需要服务器支持,但需要考虑资源管理、性能优化、离线保存等。同时,可能需要支持Android和iOS平台,所以跨平台开发工具会比较重要。 然后,回顾之前推荐的引擎和语言,比如Unity适合跨平台,支持C#,适合有3D需求的情况;Ren'Py适合视觉小说类,但可能更适合2D和剧情驱动;Godot引擎也是一个轻量级的选择,适合2D游戏,使用GDScript。另外,React Native可能不是最佳选择,因为主要用于应用开发,游戏可能需要更专业的引擎。 用户可能对之前的回答已经有了解,现在需要更具体到移动端单机游戏的解决方案。需要比较不同引擎在移动端的表现,比如导出到Android和iOS的便利性,社区支持,学习曲线,以及如何处理移动端的输入和性能问题。 还要考虑存储方案,比如使用本地数据库或文件存储来保存游戏进度,这在单机游戏中很重要。另外,广告和IAP虽然是单机,但可能用户想要 monetization,不过用户明确说是单机,可能不需要联网功能,但可能需要考虑如何集成广告或一次性购买。 需要检查之前的回答是否已经覆盖了这些方面,或者在移动端是否有特别的注意事项。例如,Unity的IL2CPP在iOS上的性能,Android的APK大小优化,不同引擎对触控事件的处理等。 此外,是否需要提到无代码或低代码平台,比如Buildbox或GameMaker Studio,这些可能适合没有编程经验的开发者,但可能在灵活性和功能上有限。 最后,总结出适合不同需求的方案,比如新手推荐Unity或Godot,剧情类用Ren'Py,性能敏感用原生开发(Java/Kotlin for Android, Swift for iOS),但跨平台可能更高效。同时,提供决策流程图帮助用户根据团队技能和目标选择合适的工具。 需要确保回答结构清晰,分点说明,并且语言口语化,避免使用专业术语过多,但保持准确性。可能还需要提供示例代码或实现逻辑,比如在Unity中如何处理触控输入,或者Godot中如何保存游戏数据。 总之,需要综合之前的建议,扩展到移动端单机游戏的特殊需求,给出具体的引擎选择、开发语言、优缺点以及适用场景,帮助用户做出决策。</think>为移动端开发单机手机游戏时,技术选型需聚焦 **跨平台兼容性**、**触控优化** 和 **离线运行能力**,以下是分场景解决方案: --- ### 一、通用开发引擎方案(推荐优先选择) #### 1. **Unity (C#)** $$性价比 = \frac{\text{跨平台部署能力}}{\text{学习成本}}$$ - **优势**: - 一键导出APK/IPA文件,适配Android/iOS - 内置移动端触控事件系统(如`Input.touches`) - 资源包动态加载减少安装体积 - **适用类型**: - 3D/2D混合游戏(如《帕斯卡契约》) - 含物理交互的解谜游戏 - **核心代码示例**: ```csharp // 实现物体拖拽 void Update() { if (Input.touchCount > 0) { Touch touch = Input.GetTouch(0); if (touch.phase == TouchPhase.Moved) { transform.position = Camera.main.ScreenToWorldPoint(touch.position); } } } ``` #### 2. **Godot (GDScript)** $$轻量化优势 = 安装包大小 < 50MB$$ - **优势**: - 开源引擎,无版权分成 - 专为2D优化的节点架构(如《吞食鱼》复刻) - 内置AES加密保护本地存档 - **文件存储实现**: ```python # 保存进度到user://savegame.dat var save_data = {"level": 5, "items": ["sword", "potion"]} var file = FileAccess.open("user://savegame.dat", FileAccess.WRITE) file.store_var(save_data) ``` --- ### 二、垂直领域专用工具 #### 1. **RPG Maker MV (JavaScript)** $$开发效率 \propto \text{像素风JRPG模板数量}$$ - **典型应用**:复古RPG(如《去月球》移动版) - **移动端适配**: - 自动将PC版UI转换为触屏按钮 - 通过Cordova封装为混合应用 #### 2. **Ren'Py (Python)** $$文本密度 > 10万字时优选$$ - **移动端特性**: - 自适应屏幕分辨率(支持折叠屏) - 手势识别实现快速回溯(双指滑动) - 内置电池耗电优化模式 --- ### 三、原生开发方案(高性能需求) #### 1. **Android (Java/Kotlin)** ```kotlin // 实现虚拟摇杆(LibGDX框架示例) val stick = Circle(radius=50f) stage.addListener(object : InputListener() { override fun touchDown(event: InputEvent, x: Float, y: Float, pointer: Int, button: Int): Boolean { stick.setPosition(x - stick.radius, y - stick.radius) return true } }) ``` #### 2. **iOS (Swift/SpriteKit)** ```swift // 实现3D Touch压感交互 override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) { if let touch = touches.first { let force = touch.force / touch.maximumPossibleForce character.jumpHeight = CGFloat(force * 200) } } ``` --- ### 四、关键技术考量点 1. **存储方案**: - 轻量数据:`PlayerPrefs`(Unity)/`SharedPreferences`(Android)/`UserDefaults`(iOS) - 复杂存档:SQLite加密数据库 2. **性能优化**: - 使用ETC2/ASTC纹理压缩格式 - 禁用移动端不必要的后处理效果 3. **设备适配**: - 刘海屏安全区划定 - 不同DPI的触控热区调整 --- ### 五、决策流程图 ``` 是否需要3D图形? → Unity │ 否 ↓ 是否做文字冒险类? → Ren'Py │ 否 ↓ 是否开发像素RPG? → RPG Maker │ 否 ↓ 是否追求安装包最小化? → Godot │ 否 ↓ 是否有特定平台需求? → 原生开发 ``` 实际案例:《纪念碑谷》使用Unity实现跨平台,《月圆之夜》采用Cocos2d-x,《人生画廊》通过Godot达成60FPS流畅动画。建议先用Unity制作原型,再根据性能分析工具(如Android Profiler/Xcode Instruments)针对性优化。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值