首頁 > unispp > uniapp 微信小程序抖音小程序的地图坐标显示

uniapp 微信小程序抖音小程序的地图坐标显示

uniapp 微信小程序抖音小程序的地图坐标显示的问题


成品是这样子

图片.png


view中的代码


<map style="width: 100%; height: 250px;" :longitude="longitude" :latitude="latitude" scale="14" :markers="markers"></map>


js代码


data() {
            return {
                latitude : 0,
                longitude : 0,
                markers: [
                    {
                        latitude: 0,
                        longitude: 0,
                        title : '楼盘位置',
                        iconPath: '/static/location.png', //图标路径
                        width: 25,
                        height: 25,
                        id : 1,
                        callout: {
                            color: "#ffffff",
                            padding: 8,
                            content: '楼盘位置',
                            borderRadius: 5,
                            bgColor: "#0FC177",
                            fontSize: 12,
                            display: 'ALWAYS',
                        }
                    }
                ]
            }
        },


返回的数据中赋值

                    this.latitude = res.data.lat
                    this.longitude = res.data.lng
                    
                    this.markers[0].latitude = res.data.lat
                    this.markers[0].longitude = res.data.lng
                    this.markers[0].title = res.data.title
                    this.markers[0].callout.content = res.data.title


那个api接口要是使用百度的坐标标注,那么还得处理一下,处理方法如下


protected function turnLocation($location)
    {
        $url = "https://apis.map.qq.com/ws/coord/v1/translate?type=3&key=5HEBZ-****-QOKU2-CUAOZ-D4IE6-JCFZV&locations=".$location;
        $ch = curl_init(); // 启动一个CURL会话
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); // 跳过证书检查
        curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);  // 从证书中检查SSL加密算法是否存在
        curl_setopt($ch, CURLOPT_URL, $url);
        //curl_setopt($ch, CURLOPT_POST, true);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($ch, CURLOPT_TIMEOUT, 60);
        $tmpInfo = curl_exec($ch);     //返回api的json对象
        //关闭URL请求
        curl_close($ch);
        $result = json_decode($tmpInfo,true);
        if($result['status'] == 0)
        {
            return $result['locations'];
        }else{
            \think\facade\Log::write($result['message'],'error');
            return false;
        }
    }

调用

            $location = $this->turnLocation($info['lat'].','.$info['lng']);
            if($location)
            {
                $info['lng'] = $location[0]['lng'];
                $info['lat'] = $location[0]['lat'];
            }else{
                $info['lng'] = 0;
                $info['lat'] = 0;
            }

相关资讯
最新资讯
AiDoYou AiDoYou-我愿意分享技术平台是一家分享开发中常遇到的技术问题解决方案,也是站长门记录分享文章的平台。 琼ICP备2022012332号