js代码:
$("#cityName").val($("#address").val());
$("#_DialogDiv_0").show();
var map = new BMap.Map("container"); //在container容器中创建一个地图,参数container为div的id属性;
var point = new BMap.Point($("#jd").val(),$("#wd").val()); //创建点坐标
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
map.centerAndZoom(point, 14); //初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(); //激活滚轮调整大小功能
map.addControl(new BMap.NavigationControl()); //添加控件:缩放地图的控件,默认在左上角;
map.addControl(new BMap.MapTypeControl()); //添加控件:地图类型控件,默认在右上方;
map.addControl(new BMap.ScaleControl()); //添加控件:地图显示比例的控件,默认在左下方;
map.addControl(new BMap.OverviewMapControl()); //添加控件:地图的缩略图的控件,默认在右下方; TrafficControl
//单击获取点击的经纬度
map.addEventListener("click",function(e){
var jing_du_value = e.point.lng ;
var wei_du_value = e.point.lat;
$("#jing_du").val(jing_du_value);
$("#wei_du").val(wei_du_value);
});
search = new BMap.LocalSearch("中国", {
onSearchComplete: function(result){
if (search.getStatus() == BMAP_STATUS_SUCCESS){
var res = result.getPoi(0);
var point = res.point;
map.centerAndZoom(point, 11);
}
},renderOptions: { //结果呈现设置,
map: map,
autoViewport: true,
selectFirstResult: true
} ,onInfoHtmlSet:function(poi,html){//标注气泡内容创建后的回调函数,有了这个,可以简单的改一下返回的html内容了。
// alert(html.innerHTML)
}//这一段可以不要,只不过是为学习更深层次应用而加入的。
});
search.search(document.getElementById("cityName").value);
}
// 点击搜索
function setCity(){
search.search(document.getElementById("cityName").value);
}
html:
<div>
<input type="text" id="cityName" value="郑州市"/>
<input type="button" οnclick="setCity()" value="查找" />
</div>
<div>
<label class="col-sm-3 control-label no-padding-right"
for="form-field-1-1">经度: </label>
<input name="hotelName" id="jing_du"
placeholder="经度" style="width: 50px"
value="" type="text">
<label class="col-sm-3 control-label no-padding-right"
for="form-field-1-1">纬度: </label>
<input name="hotelName" id="wei_du"
placeholder="纬度"
value="" style="width: 50px" type="text">
</div>
<div id="container"
style="text-align:left;position: relative; width: 850px; height: 600px;">
<div
style="position: absolute; height: 100%; width: 100%; display: none; background-color:#fff; opacity: 0.5;"
id="_Covering_0"> </div>
<iframe style="border:none 0;" id="_DialogFrame_0"
src="http://mp.lulinke.com:80/llk_hotel/hotelMessageSet/hotelMapLabel.do"
width="100%" height="100%" frameborder="0"></iframe>
</div>
<div style="text-align: center;">
<a class="btn btn-mini btn-primary" οnclick="selPoi();">确定</a>
<a class="btn btn-mini btn-danger" οnclick="quxiao();">取消</a>
</div>
js库:
<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>
备注:把代码拷贝过去直接能用,根据自己的需求加以改动,详情参照百度地图api文档