1、首先我们创建一个StackView项目,如下图,更多细节查看我们的其他经验吧。我们给出目录结构,基本上是自动创建的结构,不用更改。
2、然后我们主要修改main.qml中的代码。我们要实现的是点击按钮切换不同的城市地图。然后在界面上面显示城市名称。我们添加了几个ItemDelegate组件,然后把界面上的title进行了更换。在Drawer组件的按钮点击事件中我们进行了地图组件的地图中心点的位置更换。
3、接着,我们记得在project文件中添加上location的配置项,如下图。然后就可以编译运行了。
4、最终效果如下图,点击边栏的城市名称,Drawer组件就会隐藏,主界面显示当下城市的地理位置。
5、这里我们说一下如果设置城市的地理位置,我们可以在网上搜索"能显示经纬度的地图"就可以了,找到这种地图网站,就可以输入城市名称,得到经纬度了。如下图所示。
6、这里我们看到Drawer组件,它的宽度是主窗体window的0.66,这里大家可以自己试试,可以更改成其它值,看看有什么效果吧,数值的大小决定了遮罩部分的多少。
7、另外就是ItemDelegate中的设置,我们设置地图的时候,只需要更改Map组件的center属性就可以了,使用QtPosition类实现,将坐标值填写到参数即可,这里参数值最好精确到小数部分,这样就可以更加精确的显示地图地理位置了。这里经纬度的参数是北纬,东经。
8、最后就是地图的放大缩小问题了,如下图,大家看到有个zoomLevel的属性,这个值大家自己调调,我这里设置为8的时候,基本正好可以显示到我们设置的城市,不然,大了,就看不见城市名称,小了,就只能显示到国家了!