Vue项目中引入html5+plus.geolocation进行定位

1、直接上代码

<div class="getLocal" @click="getAdress">
            <div>
                <svg
                    t="1637560948776"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="13289" width="48" height="48">
                    <path d="M793.5 87.4c-4.3 0-8.6 0.4-12.9 1.9l-256.1 85.4c-4.3 1.6-8.2 1.9-12.5 1.9-4.3 0-8.2-0.4-12.5-1.9L243.4 89.3c-4.3-1.6-8.6-1.9-12.5-1.9-26.5 0-47.2 27.7-35.9 54.2l245.2 573.8 31.2 72.9 5.1 11.7c6.6 16 21 23.8 35.9 23.8 14.4 0 28.8-7.8 35.9-23.8l5.1-11.7 31.2-72.9L829 141.6c11.2-26.9-9.4-54.2-35.5-54.2z"
                          fill="#3683E4" p-id="13290"></path>
                    <path d="M624.3 730.9l-0.5 1.2-31.3 73.1-5.1 11.9c-13.3 30.4-42.1 49.3-74.9 49.3-33.6 0-62.5-19.2-75-49.5l-5.2-11.9-31.3-72.8-0.6-1.5c-52.8 20.5-87.5 55-87.5 94.2 0 62.8 89.1 113.8 199.1 113.8s199.1-50.9 199.1-113.8c0-39-34.4-73.5-86.8-94z"
                          fill="#E4A92E" p-id="13291">

                </path>
                </svg>
            </div>
        </div>

2、在methods中写入方法:

getAdress() {
            var that = this;
            that.time2 = plus.geolocation.getCurrentPosition(
                e => {
                    var x = e.coords.latitude;
                    var y = e.coords.longitude;
                    that.navigation_point_arr.push(new T.LngLat(y, x));
                    that.map.centerAndZoom(new T.LngLat(y, x), 6);
                    that.draw_local()
                },
                error => {
                    Toast({
                        message: "定位失败",
                        icon: "fail",
                        className: "toast_fail"
                    });
                }
            );
            that.startTool = new T.MarkTool(that.map, {
                icon: new T.Icon({
                    iconUrl: that.startIcon,
                    iconSize: new T.Point(44, 34),
                    iconAnchor: new T.Point(12, 31)
                }),
                follow: true
            });
            that.startTool.on("mouseup", that.mouseUpStartMaker);
        },
        mouseUpStartMaker(e) {
            var that = this;
            that.startLngLat = e.currentLnglat;
            document.getElementById("start").value =
                e.currentLnglat.getLng() + "," + e.currentLnglat.getLat();
        },
        //当前位置箭头指向
        draw_local() {
            var that = this;
            plus.orientation.getCurrentOrientation(e => {
                if (that.navigation_car == null) {
                    // that.map.removeOverLay(that.navigation_car);
                    //创建图片对象
                    var icon1 = new T.Icon({
                        iconUrl:
                            require("../../../static/images/people.png"),
                        iconSize: new T.Point(40, 40),
                        iconAnchor: new T.Point(10, 25)

                    });
                    //向地图上添加自定义标注
                    var currentPoint =
                        that.navigation_point_arr[
                            that.navigation_point_arr.length - 1
                        ];
                    that.navigation_car = new T.Marker(currentPoint, {
                        icon: icon1
                    });
                    that.map.addOverLay(that.navigation_car);
                    var icons = document.getElementsByClassName("tdt-marker-icon")
                    for (let i = 0;i<icons.length;i++){
                        if(icons[i].style.width == "40px"){
                            icons[i].style.border = "none"
                        }
                    }
                } else {
                    var imgEL = that.navigation_car.getIcon().img;
                    imgEL.style.transformOrigin = "center center";
                    // setTimeout(() => {
                    var _style = imgEL.style.transform;

                    // deg < 270 ? (deg += 90) : (deg -= 270);0
                    imgEL.style.transform = `${_style} rotate(45deg)`;
                }
                // return e.trueHeading;
            });
        },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

时间的情敌

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值