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

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（这里因为是电脑定位，所有没有精确和没有具体的地址）。

作者：啊林博士

链接：https://blog.csdn.net/Doctor_...

起源：CSDN

著作权归作者所有。商业转载请分割作者取得受权，非商业转载请注明出处。