APIcolud 模块googleMap 实现谷歌地图

APIcolud 模块googleMap 实现谷歌地图

技术杂谈小彩虹2021-07-19 11:47:45100A+A-

读一本好书,就是在和高尚的人谈话。 ——歌德

问题

怎么使用模块googleMap 实现谷歌地图,以下是遇到的问题,咋们把他解决就完事

  • 一、打开地图
  • 二、获取当前位置信息
  • 三、根据当前位置信息设置地图中心点
  • 四、在地图上添加标注信息 (添加点)
  • 五、监听地图上标注信息 (添加点)
  • 补充:移动地图实时显示地理位置

解决方法

补充

  • 一、自己要申请谷歌key值
  • 二、手机能访问谷歌,要能访问国外网站
  • 三、配置 config 文件
  • 重点:这些都自己看官方文档,讲的比我清楚

一、打开地图

function map_open(callback) {
    aMap = api.require('googleMap');
    aMap.open({
        rect: {
            x: 0, //(可选项)数字类型;地图左上角的 x 坐标(相对于所属的 Window 或 Frame);默认:0
            y: 0, //(可选项)数字类型;地图左上角的 y 坐标(相对于所属的 Window 或 Frame);默认:0
            w: api.winWidth, //(可选项)数字类型;地图的宽度;默认:'auto'
            h: api.frameHeight, //(可选项)数字类型;地图的高度;默认:'auto'   65为顶部高度
        },
        showUserLocation: true, //是否在地图上显示用户位置
        zoomLevel: 1, //  14zoomLevel 设置谷歌地图缩放等级,取值范围:1-21级(Android)、getZoomExtremity接口获取(iOS)
        fixedOn: api.frameName,//表示在当前页面打开地图
        fixed: true
    }, function(ret) {
        if (ret.status) {
        callback()
    }
});

}

二、获取当前位置信息+ 根据当前位置信息设置地图中心点+在地图上添加标注信息 (添加点)+ 监听地图上标注信息 (添加点)

  • 记住我都在在回调里面写的
//打开地图的回调里面
map_open(function() {
    //获取当前位置信息
    aMap.getLocation({
        autoStop: true,
        locationType: "gps"
    }, function(ret) {
        if (ret.status) {
            //根据当前位置信息设置地图中心点
            aMap.setCenter({
                coords: {
                    lon: ret.lon,
                    lat: ret.lat
                },
                animation: true
            });
        //在地图上添加标注信息 
        aMap.addAnnotations({
                annotations: this.mapList, //表示很多点(经纬度)
                icons: 'widget://res/zb.png', 
                icon: 'widget://res/zb.png',
                draggable: true, 
                timeInterval: 2.0
            })
         //监听地图上标注信息 
        aMap.addAnnotationListener(function(ret) {
            if (ret.eventType == "click") {
                console.log(ret.id)
                // 打开设备信息
                t_data.openDeviceFrame(ret.id);
            }
        })
    }
});

})

================================

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们