js调用百度地图及调用百度地图的搜索功能

时间：2021-05-26

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调用百度地图及调用百度地图的搜索功能，有关更多关于百度地图相关内容，请持续关注本站，本站没有都有新的内容更新。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章