关于地图开发的那些坑儿

最新推荐文章于 2023-08-18 14:01:27 发布

时光乱了谁的心lmq

最新推荐文章于 2023-08-18 14:01:27 发布

阅读量866

点赞数

分类专栏：微信小程序文章标签：微信小程序开发地图开发微信小程序中嵌入自定义地图在地图上添加覆盖物在地图上获取当定位点

本文链接：https://blog.csdn.net/weixin_39946352/article/details/86348871

版权

微信小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近在开发微信小程序涉及到地图开发方面，效果虽然不理想，但还是想记录下开发中遇到的一些坑，梳理一下自己的解决思路，总结一下知识点。文中如有错误，欢迎大家评论留言。

一、需求：

在微信小程序添加一个景区导航，即在地图上面添加一层覆盖物，还要能实时定位。具体效果类似于微信小程序（腾讯智慧景区），上边覆盖着一个很炫的手绘地图还能够实时定位。如下图所示

需求类似效果图

二、开发过程遇到的问题：

1、问题：刚开始做的时候就是想先把覆盖物实现出来，看了微信小程序腾讯智慧景区能实现，自己就想尝试根据微信小程序开发文档进行实现，可是翻遍整个微信小程序开发文档以及网上的资料只有找到微信小程序JavaScript SDK、API>位置、API>媒体>地图、组件>地图等，这些支持微信小程序但都没有看到支持覆盖物的API。

解决：微信小程序新建页面嵌入H5，在H5页面上引入腾讯地图，并使用腾讯地图web开发>JavaScript API>覆盖物>GroundOverlay即可将覆盖物添加到地图上，然后H5页面上传到服务器后还需将该页面域名添加到微信小程序后台的合法业务域名中（开发过程中也可以在开发工具中勾选上‘不校验域名’，开发过程可以打开），最后在微信小程序增加一个点击事件触发新建页面。相关API文档。

关键代码：

新建页面map.wxml中代码片段，使用web-view标签可将H5页面嵌入到新建页面中

<view class="container">
	<web-view src="https://ssl.sunnyday365.cn/address/address.html"></web-view>
</view>

H5页面address.html中代码片段，引入腾讯地图，并使用GroundOverlay将覆盖物叠加到地图之上

<head>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=ZG6BZ-UGZW5-UG2I6-QZ4O3-HS2Z3-I7BQA"></script>
</head>

<body onload="init()">
    <script>
    	var map;	
        var init = function() {
            var center = new qq.maps.LatLng(23.122700,113.555999);//中心点坐标
            map = new qq.maps.Map(document.getElementById('container'), {
                center: center,
                zoom: 17 //地图放大级数
            });

            var groundOverlay = new qq.maps.GroundOverlay({
                //设置显示地面覆盖层的地图
                map: map,
                //设置图片地址
                imageUrl: 'pm.png',
                //设置显示图片的地图上的矩形区域，左下角以及右上角坐标
                bounds: new qq.maps.LatLngBounds(new qq.maps.LatLng(23.120643,113.553850), new qq.maps.LatLng(23.123816,113.558466)),
                //设置覆盖层的透明度
                opacity: 1,
                //设置地面覆盖层可响应鼠标事件，默认为true
                clickable: true,
                //设置覆盖层可见，默认为true
                visible: true
            });            
    </script>
    <div style="width:100%;height:100vh" id="container"></div>
</body>

2、问题：覆盖物该怎么生成，怎么弄才能让覆盖物更自然的嵌入到地图上，以及缩放时是否自然和如何对齐问题

解决：我是先把腾讯地图放大到最大级别进行截图，然后把图片交给UI进行绘制，完成后只需将目标区域截取出来保存为png格式，如不明白可参考如何制作手绘地图？如何将图片图层精确地对准在地图上？

效果如下图所示：

覆盖图效果图

3、问题：覆盖图生成后就需要开始弄实时定位了，一开始就在想有没有办法引入地图就有自己附带定位功能的，就好像打开高德地图APP那样的，或者有没有API可以直接引用然后就会有那个自我定位的点出现，不过好像不能这么弄的，而且也一直不知道那些地图APP的自我定位图标是怎么生成的。

解决：使用腾讯地图前端定位组件>调用方式三>getLocation获取到自己的定位，然后使用marker标记自己的位置，最后再用watchPosition监听触发函数showMap。有个需要注意的就是微信7.0版本升级了对https的安全限制，即在微信7.0版本及以上版本使用http协议访问定位组件会导致定位失败。相关API文档。而且最近发现手机的定位方式是GPS和网络结合，定位相对准确，但耗电大。

关键代码：

在H5页面引入封装好的JS文件，通过调用js api的接口获取定位信息。

<head>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=ZG6BZ-UGZW5-UG2I6-QZ4O3-HS2Z3-I7BQA"></script>
    <script type="text/javascript" src="https://apis.map.qq.com/tools/geolocation/min?key=ZG6BZ-UGZW5-UG2I6-QZ4O3-HS2Z3-I7BQA&referer=黄埔花海-小程序"></script>
</head>
<body onload="init()">
    <script>
    	var map,marker,geolocation;	
        var init = function() {
            var center = new qq.maps.LatLng(23.122700,113.555999);
            map = new qq.maps.Map(document.getElementById('container'), {
                center: center,
                zoom: 17
            });

            var groundOverlay = new qq.maps.GroundOverlay({
                //设置显示地面覆盖层的地图
                map: map,
                //设置图片地址
                imageUrl: 'pm.png',
                //设置显示图片的地图上的矩形区域
                bounds: new qq.maps.LatLngBounds(new qq.maps.LatLng(23.120643,113.553850), new qq.maps.LatLng(23.123816,113.558466)),
                //设置覆盖层的透明度
                
                opacity: 1,
                //设置地面覆盖层可响应鼠标事件，默认为true
                clickable: true,
                //设置覆盖层可见，默认为true
                visible: true
            });            
			marker = new qq.maps.Marker({
			        map : map,
			        position : new qq.maps.LatLng(23.123405,113.557375)
			}); 
            geolocation=new qq.maps.Geolocation(); 
            function Geolocations() {
                geolocation.getLocation(showMap,showError)
            };
            function showMap(position){
                // alert(position.lat+','+position.lng)
                marker.position=new qq.maps.LatLng(position.lat,position.lng)
            };               
            Geolocations();//执行Geolocation()函数  
            geolocation.watchPosition(showMap)  //监听函数 
        }; 
        function showError(error){
            switch(error.code) {   
                case 1:   
                  alert("定位失败,用户拒绝请求地理定位");   
                  break;   
                case 5:   
                  alert("定位失败,请求获取用户位置超时");   
                  break;   
                default:   
                  alert("定位失败")  
            }   
        };
    </script>
    <div style="width:100%;height:100vh" id="container"></div>
</body>

效果如下：

定位效果图

三、注意点：

1、H5和腾讯前端定位组件都有getCurrentPosition() 和 watchPosition()事件，对比实例可发现引用方法不一样，定位失败返回的code也不同，网上的资料大家要注意区分，引用错了就没效果了，由于腾讯定位组件旨在优化纯HTML5 Geolocation定位能力弱，定位成功率不高的问题，所以我选用了腾讯前端定位组件。但后面发现糟老头坏得很，害我花费了很长时间去找定位不准的原因。

2、腾讯前端定位组件getCurrentPosition()事件获取定位的方式未知，但定位点没有像地图APP里的定位使用GPS和网络结合那么准确，所以定位不准可能不是代码问题造成的。刚开始不知道，然后就上网找资料，就发现了地图在国内原来是存在着几套坐标系的，WGS-84坐标系是GPS原始坐标系，腾讯高德等使用GCJ-02 坐标系也叫火星坐标系，百度用自家的BD-09坐标系，百度使用的坐标系可能是需要转化的，加密方式不同存在位置偏差。坐标系相关知识。就猜想会不会是这个原因导致的，后来我把获取到的经纬度拿出来，在在线地图经纬度查询（可输入不同地图经纬度，以及显示不同地图上点的位置）网站进行测试可发现就是拿到的经纬度不准的问题。

3、在这次开发过程中还学到了手机端开发者模式，一般PC端不带定位功能，然后就只能在PC端开本地服务器，把网页放到根目录下，通过手机端看效果，可是手机端就看不到控制台，最后发现手机可以用数据线连接PC端进入开发者模式的，但万万想不到的是chrome也是要求getCurrentPosition() and watchPosition()事件在HTTPS域名下使用的，最后我是用UC浏览器使用控制变量法通过alert弹出内容查看效果以及推测原因的。

时光乱了谁的心lmq

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
关于地图开发的那些坑儿

最近在开发微信小程序涉及到地图开发方面，效果虽然不理想，但还是想记录下开发中遇到的一些坑，梳理一下自己的解决思路，总结一下知识点。文中如有错误，欢迎大家评论留言。一、需求：在微信小程序添加一个景区导航，即在地图上面添加一层覆盖物，还要能实时定位。具体效果类似于微信小程序（腾讯智慧景区），上边覆盖着一个很炫的手绘地图还能够实时定位。如下图所示二、开发过程遇到的问题：1、问题：...
复制链接

扫一扫