web前端腾讯地图根据详细地址获取经纬度

Dear 丶 2022-03-21 07:28 1194阅读 0赞

先去腾讯地图官网申请开发密钥（Key）

> **[https://lbs.qq.com/guides/startup.html][https_lbs.qq.com_guides_startup.html]**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIzMzc1NzMz_size_16_color_FFFFFF_t_70][]

根据提示来操作就好。

申请完后继续以下操作：![是jsonp的跨域请求][jsonp]

//jsonp的跨域请求
    $.ajax({
        type: "get",
        dataType: 'jsonp',
        data: {
            key: "", // 填申请到的key
            address: "", //具体的地址
            output: 'jsonp' //返回格式：支持JSON/JSONP，默认JSON
        },
        jsonp: "callback",
        jsonpCallback: "QQmap",
        url: "https://apis.map.qq.com/ws/geocoder/v1/?",
        success: function (json) {
            if(json.status == 0) {
                lat = json.result.location.lat;
                lng = json.result.location.lng;
                console.log('经度：', lat);
                console.log('纬度：', lng);
            } else {
                alert('错误信息：', json.message);
            }
        },
        error: function (err) { 
            alert("异常错误，请刷新浏览器后重试");
        }
    })

**地址解析（地址转坐标） ** 官方文档地址**： [https://lbs.qq.com/webservice\_v1/guide-geocoder.html][https_lbs.qq.com_webservice_v1_guide-geocoder.html]**

## 请求URL ##

该请求为GET请求

https://apis.map.qq.com/ws/geocoder/v1/?address=

## 请求参数 ##

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>必填</th> 
   <th>说明</th> 
   <th>示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>address</td> 
   <td>是</td> 
   <td>地址（注：地址中请包含城市名称，否则会影响解析效果）</td> 
   <td>address=北京市海淀区彩和坊路海淀西大街74号</td> 
  </tr> 
  <tr> 
   <td>region</td> 
   <td>否</td> 
   <td>指定地址所属城市</td> 
   <td>region=北京</td> 
  </tr> 
  <tr> 
   <td>key</td> 
   <td>是</td> 
   <td>开发密钥（Key）</td> 
   <td>key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77</td> 
  </tr> 
  <tr> 
   <td>output</td> 
   <td>否</td> 
   <td>返回格式：支持JSON/JSONP，默认JSON</td> 
   <td>output=json</td> 
  </tr> 
  <tr> 
   <td>callback</td> 
   <td>否</td> 
   <td>JSONP方式回调函数</td> 
   <td>callback=function1</td> 
  </tr> 
 </tbody> 
</table>

## 响应结果 ##

<table> 
 <thead> 
  <tr> 
   <th colspan="3">名称</th> 
   <th>类型</th> 
   <th>必填</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td colspan="3">status</td> 
   <td>number</td> 
   <td>是</td> 
   <td>状态码，0为正常<br> 310请求参数信息有误<br> 311Key格式错误<br> 306请求有护持信息请检查字符串<br> 110请求来源未被授权</td> 
  </tr> 
  <tr> 
   <td colspan="3">message</td> 
   <td>string</td> 
   <td>是</td> 
   <td>状态说明</td> 
  </tr> 
  <tr> 
   <td colspan="3">result</td> 
   <td>object</td> 
   <td>是</td> 
   <td>地址解析结果</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td colspan="2">location</td> 
   <td>string</td> 
   <td>是</td> 
   <td>解析到的坐标</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>lat</td> 
   <td>number</td> 
   <td>是</td> 
   <td>纬度</td> 
  </tr> 
  <tr> 
   <td>lng</td> 
   <td>number</td> 
   <td>是</td> 
   <td>经度</td> 
  </tr> 
  <tr> 
   <td colspan="2">address_components</td> 
   <td>object</td> 
   <td>是</td> 
   <td>解析后的地址部件</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>province</td> 
   <td>string</td> 
   <td>是</td> 
   <td>省</td> 
  </tr> 
  <tr> 
   <td>city</td> 
   <td>string</td> 
   <td>是</td> 
   <td>市</td> 
  </tr> 
  <tr> 
   <td>district</td> 
   <td>string</td> 
   <td>是</td> 
   <td>区，可能为空字串</td> 
  </tr> 
  <tr> 
   <td>street</td> 
   <td>string</td> 
   <td>是</td> 
   <td>街道，可能为空字串</td> 
  </tr> 
  <tr> 
   <td>street_number</td> 
   <td>string</td> 
   <td>是</td> 
   <td>门牌，可能为空字串</td> 
  </tr> 
  <tr> 
   <td colspan="2">ad_info</td> 
   <td>object</td> 
   <td>是</td> 
   <td>行政区划信息</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>adcode</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>行政区划代码</td> 
  </tr> 
  <tr> 
   <td colspan="2">similarity</td> 
   <td>number</td> 
   <td>是</td> 
   <td>即将下线，由reliability代替</td> 
  </tr> 
  <tr> 
   <td colspan="2">deviation</td> 
   <td>number</td> 
   <td>是</td> 
   <td>即将下线，由level代替</td> 
  </tr> 
  <tr> 
   <td colspan="2">reliability</td> 
   <td>number</td> 
   <td>是</td> 
   <td>可信度参考：值范围 1 &lt;低可信&gt; - 10 &lt;高可信&gt;<br> 我们根据用户输入地址的准确程度，在解析过程中，将解析结果的可信度(质量)，由低到高，分为1 - 10级，该值&gt;=7时，解析结果较为准确，&lt;7时，会存各类不可靠因素，开发者可根据自己的实际使用场景，对于解析质量的实际要求，进行参考。</td> 
  </tr> 
  <tr> 
   <td colspan="2">level</td> 
   <td>number</td> 
   <td>否</td> 
   <td>解析精度级别，分为11个级别，一般&gt;=9即可采用（定位到点，精度较高） 也可根据实际业务需求自行调整，完整取值表见下文。</td> 
  </tr> 
 </tbody> 
</table>

[https_lbs.qq.com_guides_startup.html]: https://lbs.qq.com/guides/startup.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIzMzc1NzMz_size_16_color_FFFFFF_t_70]: /images/20220321/96041d4778db442497095d7ef68058b1.png
[jsonp]: https://private.codecogs.com/gif.latex?%25u662Fjsonp%25u7684%25u8DE8%25u57DF%25u8BF7%25u6C42
[https_lbs.qq.com_webservice_v1_guide-geocoder.html]: https://lbs.qq.com/webservice_v1/guide-geocoder.html