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