js調用百度地圖的方法
代碼如下：
<!DOCTYPE html><html><head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hello, World</title> <style type="text/css"> html { height: 100%; } body { height: 50%; margin: 0px; padding: 0px; } #container { width:600px; height: 500px; } </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script></head><body onload="loand()"> <div id="container"> </div> <input id="lng" type="hidden" runat="server" /> <input id="lat" type="hidden" runat="server" /> <input id="Button1" type="button" value="標記圖標" runat="server" onclick="getbiaoji()" /> <script type="text/javascript"> function getbiaoji() { var lng = document.getElementByIdx_x("lng").value; var lat = document.getElementByIdx_x("lat").value; var map = new BMap.Map("container"); var point = new BMap.Point(lng, lat); var marker = new BMap.Marker(point); var opts = { width: 250, // 信息窗口寬度 height: 100, // 信息窗口高度 title: "經銷商地址" // 信息窗口標題 } var infoWindow = new BMap.InfoWindow("移動拖拽 標記經銷商地址:" + lng + lat, opts); // 創建信息窗口對象 marker.enableDragging(); //啟用拖拽 map.addControl(new BMap.NavigationControl()); //左上角控件 map.enableScrollWheelZoom(); //滾動放大 map.enableKeyboard(); //鍵盤放大 map.centerAndZoom(point, 13); //繪制地圖 map.addOverlay(marker); //標記地圖 map.openInfoWindow(infoWindow, map.getCenter()); } function loand() { var map = new BMap.Map("container"); var point = new BMap.Point(104.083, 30.686); //默認中心點 var marker = new BMap.Marker(point); var opts = { width: 250, // 信息窗口寬度 height: 100, // 信息窗口高度 title: "經銷商地址" // 信息窗口標題 } var infoWindow = new BMap.InfoWindow("移動拖拽 標記經銷商地址", opts); // 創建信息窗口對象 marker.enableDragging(); //啟用拖拽 marker.addEventListener("dragend", function (e) { point = new BMap.Point(e.point.lng, e.point.lat); //標記坐標（拖拽以后的坐標） marker = new BMap.Marker(point); document.getElementByIdx_x("lng").value = e.point.lng; document.getElementByIdx_x("lat").value = e.point.lat; infoWindow = new BMap.InfoWindow("當前位置<br />經度：" + e.point.lng + "<br />緯度：" + e.point.lat, opts); map.openInfoWindow(infoWindow, point); }) map.addControl(new BMap.NavigationControl()); //左上角控件 map.enableScrollWheelZoom(); //滾動放大 map.enableKeyboard(); //鍵盤放大 map.centerAndZoom(point, 13); //繪制地圖 map.addOverlay(marker); //標記地圖 map.openInfoWindow(infoWindow, map.getCenter()); // 打開信息窗口 } </script></body></html>js調用百度地圖搜索
引用百度js Api
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xxxxxxxxxxxx"></script>
創建地址解析器：
var localSearch = null;//查詢參數var options = { //智能搜索 onSearchComplete: function (results) { //查詢結果狀態碼 if (localSearch.getStatus() == BMAP_STATUS_SUCCESS) { var s = convertMapSearch(results); //對結果進行處理 model.locationAddress(s); //將結果數據賦予knockout對象數組（可用其他數組對象代替） } } }; localSearch = new BMap.LocalSearch("城市", options);結合knockout的textInput綁定方法和對象的subscribe屬性，實現輸入框變化實時查詢功能。
//綁定<input id="txtAddress" type="text" placeholder="請輸入用餐地址" data-bind="textInput: addressInput" />//subscribe屬性 在輸入變化的時候執行地址查詢sf.addressInput.subscribe(function (val) { var addr = $.trim(val); if (addr == "") { return; } localSearch.search(addr); });以上就是武林網的小編給大家分享的js調用百度地圖及調用百度地圖的搜索功能，有關更多關于百度地圖相關內容，請持續關注本站，本站沒有都有新的內容更新。
新聞熱點
疑難解答
