最近公司項目需要優化表單的輸入方式，其中有一項是讓用戶從地圖中選擇地理位置，而不是在輸入框中填寫。一番百度之后發現騰訊地圖貼心的做了一個地圖選點組件,調用方式也很簡單，於是決定用這個組件。
調用方式
第一種方式是iframe內嵌地圖組件的方式，這種方式通過postmessage來獲取用戶選擇地址的相關信息，適用於在頁面的一部分放置地圖組件的情況；
另外一種方式就是直接打開一個新的地圖選擇頁面，同時將用戶選擇后要返回的頁面地址以查詢參數的形式傳遞出去，從而可以使用戶在選擇地址之后，可以跳轉回來。
由於我采用了第二種方式，下面就詳細說說第二種方式的使用以及遇到的坑。
整體來說，第二種調用方式，基本是基於url的查詢參數進行通信的，舉個例子：
<a href="http://apis.map.qq.com/tools/locpicker?search=1&type=0&backurl=https://baidu.com&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp">
<input placeholder="請選擇地址" readonly>
</a>
上面的a標簽所對應的（url）會跳轉到騰訊的地圖選點頁面,同時提供了幾個查詢參數：
key是你在騰訊地圖平台申請的key；backurl是用戶點擊后會返回的表單所在頁面地址。其他的配置類參數見詳見文檔。
這里我填了baidu.com作為backurl，這意味着，當用戶在地圖中點擊地址后，就會跳轉到baidu.com。同時會有一個查詢字符串跟在后面，里面包含了經緯度信息，通常是我們想要的，如下圖。此外還包含了addr,city...等一系列有用信息。接下來就是在頁面中監聽unload事件，提取url中的信息，填到輸入框。
一個可能的坑
假如你的backurl頁面中也帶有查詢字符串，比如是baidu.com?foo=1&bar=2,這時，調用騰訊地址選擇組件的url就會變成這樣：
http://apis.map.qq.com/tools/locpicker?search=1&type=0&backurl=https://baidu.com?foo=1&bar=2&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp
最終頁面會跳轉到https://baidu.com?foo=1&latng=...，你會發現bar=2這個原來頁面上的參數會丟失。如果這個參數對后台比較重要，那么頁面將無法正確渲染。
解決辦法是將&轉義為%26,保證backurl的正確路徑，其實也就是用到了encodeURIComponent這個函數：
encodeURIComponent('&') // => %26
//不會丟失參數的URL
//http://apis.map.qq.com/tools/locpicker?search=1&type=0&backurl=https://baidu.com?foo=1%26bar=2&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp
同樣的情況還有可能出現在微信的服務號授權上，也是同樣的道理。（完）