您现在的位置是:网站首页>>其他>>其他

腾讯API 地图相关实现

发布时间:2019-08-12 10:24:16作者:wangjian浏览量:124点赞量:0

    上个星期公司让我做一个需求,需求描述如下:

    首先根据用户的当前位置进行定位,然后在地图上展示出当前的定位地址,用户可以自己移动位置,并且用户可以自己进行搜索地理位置进行定位(描述能力不是很好,请见谅!!!)

    解决:

    刚开始我准备使用百度地图来实现上述的现象,但是由于上述要求需要与我们的小程序项目进行对应上,由于百度使用的是BD-09(百度坐标系),如果使用百度地图来实现的话,之后会使用到坐标系的转化,感觉有点麻烦,由于微信小程序使用的就是腾讯地图,所以这里我就是用腾讯地图API来实现上面的需求

    一:用户定位

    用户定位使用到的JS文件:https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js

    用户定位API:

    var geolocation = new qq.maps.Geolocation("开发者KEY", "myapp");
    geolocation.getLocation(function(position) {
        console.log(position)
        lat = position.lat;//纬度
        lng = position.lng;//经度
    });

    根据如上代码控制台现象如:

    image.png

    二:根据定位在地图上展示定位

    使用到的JS文件:https://map.qq.com/api/js?v=2.exp&key=开发者KEY

    1:地图展示API:

    html(地图容器):

    <div id="container" style="height: 400px;width: 500px"></div>

    js:

    var center = new qq.maps.LatLng(lat, lng);//lat:纬度,lng:经度
    //定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
    var map = new qq.maps.Map(document.getElementById("container"), {
        center: center,      // 地图的中心地理坐标。
        zoom:14
    });

    根据如上代码现象如:

    image.png

    2:在地图上标注出当前定位点:

    根据上面的我们可以显示出我们定位的地图,但是我们无法看到我们的定位位置在哪,标注API就可以让我们知道我们定位的位子在哪了

    标注API:

    //添加标记点
    var marker = new qq.maps.Marker({
        position: center,
        draggable: true,//标注点是否可移动
        map: map
    });

    如果我们将draggable参数设置为true(标注点可移动),在标注点移动结束后会触发dragend事件

    //标注点拖拽事件
    qq.maps.event.addListener(marker, 'dragend', function(event) {
        console.log(event)
        lat = event.latLng.getLat() //纬度
        lng = event.latLng.getLng() //经度
    });

    根据如上现象如:

    image.png

    移动标注点控制台现象如:

    image.png

    3:在地图上显示提示信息

    提示窗API:

    //添加到提示窗
    var info = new qq.maps.InfoWindow({
        map: map
    });
    info.open();
    //lat:纬度, lng:经度
    info.setContent('<div style="text-align:center;white-space:nowrap;margin:2px;">' +
        '<div>纬度:'+ lat + '</div>' +
        '<div>经度:'+ lng  + '</div>' +
        '</div>');
    info.setPosition(center);

    根据如上代码现象如:

    image.png

    4:根据实际地址获取到对应的经纬度

    地址解析(Geocoder)API:

    //调用地址解析类
    var geocoder = new qq.maps.Geocoder({
        complete: function (result) {
            console.log(result)
            lat = result.detail.location.lat;//经度
            lng = result.detail.location.lng;//纬度
        }
    })
    var searchAddress = '北京市海淀区海淀大街38号';//实际地址
    //通过getLocation();方法获取位置信息值
    geocoder.getLocation(searchAddress);

    根据如上代码控制台现象如:

    image.png

    根据如上学习我的需求实现代码如下:

    1:引入js:

    <script src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
    <script src="https://map.qq.com/api/js?v=2.exp&key=开发者KEY"></script>

    2:html:

    <div>
        <input type="text" id="search_address" placeholder="请输入详细地址">
        <button onclick="searchAddress()">搜索</button>
    </div>
    <div id="container" style="height: 400px;width: 500px"></div>

    3:js:

    window.onload = function(){
        //初始化地图函数  自定义函数名init
        function init() {
            //获取用户经纬度
            var geolocation = new qq.maps.Geolocation("开发者KEY", "myapp");
            geolocation.getLocation(function(position) {
                console.log(position)
                lat = position.lat;//纬度
                lng = position.lng;//经度
                container = 'container';
                mapShow(lat, lng, container)
            });
        }
        //调用初始化函数地图
        init();
    }
    /**
     * 实际地址搜索事件
     * /
    function searchAddress() {
        //调用地址解析类
        var geocoder = new qq.maps.Geocoder({
            complete: function (result) {
                //根据用户输入的详细地址获取到对应的经纬度
                lat = result.detail.location.lat;//纬度
                lng = result.detail.location.lng;//经度
                container = 'container';
                mapShow(lat, lng, container)
            }
        })
        var searchAddress = document.getElementById('search_address').value;//获取用户输入的详细地址
        //通过getLocation();方法获取位置信息值
        geocoder.getLocation(searchAddress);
    }
    /**
     * 提示框
     * @param info
     * @param lat
     * @param lng
     * @param center
     */
    function message(info, lat, lng, center) {
        info.open();
        //lat:纬度, lng:经度
        info.setContent('<div style="text-align:center;white-space:nowrap;margin:2px;">' +
            '<div>纬度:'+ lat + '</div>' +
            '<div>经度:'+ lng  + '</div>' +
            '</div>');
        info.setPosition(center);
    }
    /**
     * 地图展示
     * @param lat
     * @param lng
     * @param container
     */
    function mapShow(lat, lng, container) {
        //初始化地图,展示地图
        var center = new qq.maps.LatLng(lat, lng);
        //定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
        var map = new qq.maps.Map(document.getElementById(container), {
            center: center,      // 地图的中心地理坐标。
            zoom:14
        });
        //添加标记点
        var marker = new qq.maps.Marker({
            position: center,
            draggable: true,//标注点是否可移动
            map: map
        });
        //添加到提示窗
        var info = new qq.maps.InfoWindow({
            map: map
        });
        message(info, lat, lng, center)
        //标注点拖拽事件
        qq.maps.event.addListener(marker, 'dragend', function(event) {
            console.log(event)
            lat = event.latLng.getLat() //纬度
            lng = event.latLng.getLng() //经度
            center = new qq.maps.LatLng(lat, lng);
            message(info, lat, lng, center)
        });
    }

    根据如上实现:

    image.png

0 +1