关于html5:腾讯位置服务地图选点组件使用示例

43次阅读

共计 2776 个字符，预计需要花费 7 分钟才能阅读完成。

本文次要应用到的性能为：

1、抉择地址发送（地图选点组件）

2、实时地址动态图

3、地图调起
, 手机查看

选址组件次要是选地点的信息，如下：

在 js 或者数据库中保留这些信息，动态图片和地图 API 的调起就要用到这些信息，次要还是经纬度。

能够用在聊天发送定位的性能中。

Demo 中把 key 替换成你的 key

key 申请地址：https://lbs.qq.com/dev/console/key/manage

<html>
    <meta charset="utf-8">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta content="telephone=no" name="format-detection" />
    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style type="text/css">
        #mapPage {display: none;}
    </style>
    <body>
        <div>
            <a id="lookLoc" href="https://apis.map.qq.com/uri/v1/marker?marker=coord:22.51595,113.3926;title: 接管的位置;addr: 中山市政府 &referer=myapp"> 点击查看地位 </a>
            <img id="imgLoc" src="https://apis.map.qq.com/ws/staticmap/v2/?center=22.520843533080377,113.38995007717672&zoom=12&size=150*75&scale=2&maptype=roadmap&markers=size:large|color:red|22.520843533080377,113.38995007717672&key=you key"
             alt="定位地图" onclick="lookLoc()" /><br/>
            <div id="locInfo"></div>
        </div>
        <input type="button" value="发送定位" id="send" />
        <iframe id="mapPage" width="100%" height="100%" frameborder=0 src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&total=1&key=you key&effect=zoom&referer=rcwwap"></iframe>
    </body>
</html>
<script>
    var hrefStr = "https://apis.map.qq.com/uri/v1/marker?";
    var imgSrc = "https://apis.map.qq.com/ws/staticmap/v2/?center=";
    var imgSrc2 = "&zoom=16&size=150*75&scale=2&maptype=roadmap&markers=size:large|color:red|";
    var imgStr3 = "&key=you key";
    var pointStr = "";
    $(document).ready(function() {
        var loc;
        $("#mapPage").hide();
        $("#send").click(function() {$('#mapPage').attr('src', $('#mapPage').attr('src'));
            $("#mapPage").css("display", "inline-block");
        })
    });
    window.addEventListener('message', locationPicker, false);
    // 选址
    function locationPicker(event) {
        // 接管地位信息，用户抉择确认地位点后选点组件会触发该事件，回传用户的地位信息
        loc = event.data;
        console.log('locationassa', loc);
        console.log("注册 message 事件");
        if (loc && loc.module == 'locationPicker') { // 避免其余利用也会向该页面 post 信息，需判断 module 是否为 'locationPicker'
            console.log('选址 location', loc);
            $("#mapPage").hide();
            pointStr = loc.latlng.lat + "," + loc.latlng.lng;
            $("#locInfo").text(pointStr + "" + loc.poiname +" " + loc.poiaddress);
            $("#lookLoc").attr("href", hrefStr + "marker=coord:" + pointStr + ";title:" + loc.poiname + ";addr:" + loc.poiaddress +
                "&referer=myapp");
            $("#imgLoc").attr("src", imgSrc + pointStr + imgSrc2 + pointStr + imgStr3);
            alert("选址胜利");
        }
    }
</script>

1、选址的过程中，拖拽地图时，尽管上面的地址列表会跟着更新，然而不会默认第一个，还须要点击一下地址列表。不像微信一样在拖拽过程中会默认第一个，拖拽完就能够点击发送。如果要做跟微信一样的性能，在拖拽后就须要点击一下地址列表，再点击发送。目前地图组件不反对自定义，例如拖拽地图的事件。

2、地图选点组件是有定位性能的，在你关上地图时，第一个会显示“我的地位”。

对象的数据也是显示“我的地位”，如果你是把定位发给他人。他人看到也会是“我的地位”。能够这么解决，在选完地址后，判断一下 poiname 的值是不是等于“我的地位”，如果是则把 poiaddress 的值赋值给 poiname（这里因为是电脑定位，所有没有精确和没有具体的地址）。