標籤：引入 element query 通過 success cat baidu img src
在開始之前，首先需要登入百度地圖API控制台申請密鑰ak。
1、登入百度地圖開放平台http://lbsyun.baidu.com註冊帳號，完善資訊，點擊網站右上方的“API控制台”，點擊，建立應用。
應用類型選擇：“伺服器端”，IP白名單：0.0.0.0/0
點擊提交。會產生一個訪問應用（AK）。
2、編寫介面。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <meta name="robots" content="noindex, nofollow"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <!-- 引入jquery--> <script src="./js/jquery-1.7.2.min.js"></script> </head> <body> address:<input type="text" name="address" id="address" style="width:30%">3.核心方法
<br> point:<input type="text" name="point" id="point" style="width:30%" readonly> <button type="button" id="open">getPoint</button> </body></html>
<script type="text/javascript"> document.getElementById(‘open‘).onclick = function () { var addressStr = $("#address").val(); if(addressStr!=""){ $.ajax({ url: "http://api.map.baidu.com/geocoder/v2/", data: {"address": addressStr, "output":"json", "ak":"剛才你申請的ak"}, type: "post", dataType:‘JSONP‘, success :function(data){ var lng = data.result.location.lng; var lat = data.result.location.lat; $("#point").val(lng+","+lat); } }); }else{ alert("addres is not null！"); } } </script>4.效果展示：
當沒有輸入地址，提示：
jQuery通過地址擷取經緯度demo
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
