js调用百度地图及调用百度地图的搜索功能
js调用百度地图的方法
代码如下:
<!DOCTYPEhtml> <html> <head> <metaname="viewport"content="initial-scale=1.0,user-scalable=no"/> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>Hello,World</title> <styletype="text/css"> html { height:100%; } body { height:50%; margin:0px; padding:0px; } #container { width:600px; height:500px; } </style> <scripttype="text/javascript"src="http://api.map.baidu.com/api?v=1.3"></script> </head> <bodyonload="loand()"> <divid="container"> </div> <inputid="lng"type="hidden"runat="server"/> <inputid="lat"type="hidden"runat="server"/> <inputid="Button1"type="button"value="标记图标"runat="server"onclick="getbiaoji()"/> <scripttype="text/javascript"> functiongetbiaoji(){ varlng=document.getElementByIdx_x("lng").value; varlat=document.getElementByIdx_x("lat").value; varmap=newBMap.Map("container"); varpoint=newBMap.Point(lng,lat); varmarker=newBMap.Marker(point); varopts={ width:250,//信息窗口宽度 height:100,//信息窗口高度 title:"经销商地址"//信息窗口标题 } varinfoWindow=newBMap.InfoWindow("移动拖拽标记经销商地址:"+lng+lat,opts);//创建信息窗口对象 marker.enableDragging();//启用拖拽 map.addControl(newBMap.NavigationControl());//左上角控件 map.enableScrollWheelZoom();//滚动放大 map.enableKeyboard();//键盘放大 map.centerAndZoom(point,13);//绘制地图 map.addOverlay(marker);//标记地图 map.openInfoWindow(infoWindow,map.getCenter()); } functionloand(){ varmap=newBMap.Map("container"); varpoint=newBMap.Point(104.083,30.686);//默认中心点 varmarker=newBMap.Marker(point); varopts={ width:250,//信息窗口宽度 height:100,//信息窗口高度 title:"经销商地址"//信息窗口标题 } varinfoWindow=newBMap.InfoWindow("移动拖拽标记经销商地址",opts);//创建信息窗口对象 marker.enableDragging();//启用拖拽 marker.addEventListener("dragend",function(e){ point=newBMap.Point(e.point.lng,e.point.lat);//标记坐标(拖拽以后的坐标) marker=newBMap.Marker(point); document.getElementByIdx_x("lng").value=e.point.lng; document.getElementByIdx_x("lat").value=e.point.lat; infoWindow=newBMap.InfoWindow("当前位置<br/>经度:"+e.point.lng+"<br/>纬度:"+e.point.lat,opts); map.openInfoWindow(infoWindow,point); }) map.addControl(newBMap.NavigationControl());//左上角控件 map.enableScrollWheelZoom();//滚动放大 map.enableKeyboard();//键盘放大 map.centerAndZoom(point,13);//绘制地图 map.addOverlay(marker);//标记地图 map.openInfoWindow(infoWindow,map.getCenter());//打开信息窗口 } </script> </body> </html>
js调用百度地图搜索
引用百度jsApi
<scripttype="text/javascript"src="http://api.map.baidu.com/api?v=2.0&ak=xxxxxxxxxxxx"></script>
创建地址解析器:
varlocalSearch=null; //查询参数 varoptions={ //智能搜索 onSearchComplete:function(results){ //查询结果状态码 if(localSearch.getStatus()==BMAP_STATUS_SUCCESS){ vars=convertMapSearch(results);//对结果进行处理 model.locationAddress(s);//将结果数据赋予knockout对象数组(可用其他数组对象代替) } } }; localSearch=newBMap.LocalSearch("城市",options);
结合knockout的textInput绑定方法和对象的subscribe属性,实现输入框变化实时查询功能。
//绑定 <inputid="txtAddress"type="text"placeholder="请输入用餐地址"data-bind="textInput:addressInput"/> //subscribe属性在输入变化的时候执行地址查询 sf.addressInput.subscribe(function(val){ varaddr=$.trim(val); if(addr==""){ return; } localSearch.search(addr); });
以上就是毛票票的小编给大家分享的js调用百度地图及调用百度地图的搜索功能,有关更多关于百度地图相关内容,请持续关注本站,本站没有都有新的内容更新。