js調(diào)用百度地圖的方法
代碼如下：
<!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="標(biāo)記圖標(biāo)" 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: "經(jīng)銷商地址" // 信息窗口標(biāo)題 } var infoWindow = new BMap.InfoWindow("移動(dòng)拖拽 標(biāo)記經(jīng)銷商地址:" + lng + lat, opts); // 創(chuàng)建信息窗口對(duì)象 marker.enableDragging(); //啟用拖拽 map.addControl(new BMap.NavigationControl()); //左上角控件 map.enableScrollWheelZoom(); //滾動(dòng)放大 map.enableKeyboard(); //鍵盤放大 map.centerAndZoom(point, 13); //繪制地圖 map.addOverlay(marker); //標(biāo)記地圖 map.openInfoWindow(infoWindow, map.getCenter()); } function loand() { var map = new BMap.Map("container"); var point = new BMap.Point(104.083, 30.686); //默認(rèn)中心點(diǎn) var marker = new BMap.Marker(point); var opts = { width: 250, // 信息窗口寬度 height: 100, // 信息窗口高度 title: "經(jīng)銷商地址" // 信息窗口標(biāo)題 } var infoWindow = new BMap.InfoWindow("移動(dòng)拖拽 標(biāo)記經(jīng)銷商地址", opts); // 創(chuàng)建信息窗口對(duì)象 marker.enableDragging(); //啟用拖拽 marker.addEventListener("dragend", function (e) { point = new BMap.Point(e.point.lng, e.point.lat); //標(biāo)記坐標(biāo)（拖拽以后的坐標(biāo)） 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("當(dāng)前位置<br />經(jīng)度：" + e.point.lng + "<br />緯度：" + e.point.lat, opts); map.openInfoWindow(infoWindow, point); }) map.addControl(new BMap.NavigationControl()); //左上角控件 map.enableScrollWheelZoom(); //滾動(dòng)放大 map.enableKeyboard(); //鍵盤放大 map.centerAndZoom(point, 13); //繪制地圖 map.addOverlay(marker); //標(biāo)記地圖 map.openInfoWindow(infoWindow, map.getCenter()); // 打開(kāi)信息窗口 } </script></body></html>js調(diào)用百度地圖搜索
引用百度js Api
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xxxxxxxxxxxx"></script>
創(chuàng)建地址解析器：
var localSearch = null;//查詢參數(shù)var options = { //智能搜索 onSearchComplete: function (results) { //查詢結(jié)果狀態(tài)碼 if (localSearch.getStatus() == BMAP_STATUS_SUCCESS) { var s = convertMapSearch(results); //對(duì)結(jié)果進(jìn)行處理 model.locationAddress(s); //將結(jié)果數(shù)據(jù)賦予knockout對(duì)象數(shù)組（可用其他數(shù)組對(duì)象代替） } } }; localSearch = new BMap.LocalSearch("城市", options);結(jié)合knockout的textInput綁定方法和對(duì)象的subscribe屬性，實(shí)現(xiàn)輸入框變化實(shí)時(shí)查詢功能。
//綁定<input id="txtAddress" type="text" placeholder="請(qǐng)輸入用餐地址" data-bind="textInput: addressInput" />//subscribe屬性 在輸入變化的時(shí)候執(zhí)行地址查詢sf.addressInput.subscribe(function (val) { var addr = $.trim(val); if (addr == "") { return; } localSearch.search(addr); });以上就是武林網(wǎng)的小編給大家分享的js調(diào)用百度地圖及調(diào)用百度地圖的搜索功能，有關(guān)更多關(guān)于百度地圖相關(guān)內(nèi)容，請(qǐng)持續(xù)關(guān)注本站，本站沒(méi)有都有新的內(nèi)容更新。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
