首先引入百度地图js
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=8DNPcDeuWLk7Yb1HEVTzWE8drkRjDV3y"></script>
部分HTML代码,在第一个input框输入地址内容,第二个input框存放详细地址
<label class="col-sm-4 control-label">发货地测试</label>
<div class="col-sm-8">
<input id="addressfrom" name="placeOfLoading" type="text" class="form-control" value="河北省衡水市武邑县">
</div>
<label class="col-sm-4 control-label">详细地址</label>
<div class="col-sm-8">
<input type="text" id="placeOfLoadingDetail" name="placeOfLoadingDetail" class="form-control">
</div>
<div class="col-md-8" style="height:250px;width:650px;float:right;">
<div id="endmap" style="height:100%;width:100%;margin:0 auto;"></div>
</div>
加载地图,初始化
//百度地图API功能
//加载第一张地图
var map1 = new BMap.Map("startmap"); // 创建Map实例
var point1 = new BMap.Point(116.404, 39.915);
map1.centerAndZoom(point1,15);
map1.enableScrollWheelZoom(); //启用滚轮放大缩小
map1.disableDoubleClickZoom();
实现功能,监听第一个input框,发货地,内容改变之后,
$(document).ready(function() {
var a = new Array();
//监听第一个input框,发货地
$("#addressfrom").change(function() {
var keyword = document.getElementById("addressfrom").value;
//根据文字信息获取地图的点
var localSearch = new BMap.LocalSearch(map1);
localSearch.enableAutoViewport(); //允许自动调节窗体大小
localSearch.setSearchCompleteCallback(function(searchResult) {
var poi = searchResult.getPoi(0); //document.getElementById("result_").value = poi.point.lng + "," + poi.point.lat; //获取经度和纬度,将结果显示在文本框中
map1.centerAndZoom(poi.point, 13);
//给地图标注点
var point = new BMap.Point(poi.point.lng, poi.point.lat);
for(var i = 0; i < a.length; i++) {
map1.removeOverlay(a[i]);
}
var marker = new BMap.Marker(point); // 创建标注
map1.addOverlay(marker); // 将标注添加到地图中
a.push(marker);
//从地图双击获取详细地址
var arr = new Array();
var geoc = new BMap.Geocoder();
map1.addEventListener("ondblclick", function(e) {
var lon = e.point.lng;
var lat = e.point.lat;
var pt = e.point;
geoc.getLocation(pt, function(rs) {
//addressComponents对象可以获取到详细的地址信息
var addComp = rs.addressComponents;
var site = addComp.province + " " + addComp.city + " " + addComp.district + " " + addComp.street + " " + addComp.streetNumber;
var province = keyword.split("省")[0] + "省";
var ct = keyword.split("省")[1];
var city = ct.split("市")[0] + "市";
//判断,选取的点和输入的省份城市是否一样
if(province == province && city == addComp.city) {
document.getElementById("placeOfLoadingDetail").value = site;
var marker2 = new BMap.Marker(pt); // 创建标注
map1.removeOverlay(marker);
map1.addOverlay(marker2);
for(var i = 0; i < arr.length; i++) {
map1.removeOverlay(arr[i]);
}
arr.push(marker2);
var opts = {
width: 200, // 信息窗口宽度
height: 100, // 信息窗口高度
title: "详细地址:", // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow(site, opts); // 创建信息窗口对象
map1.openInfoWindow(infoWindow, pt); //开启信息窗口
}
});
});
});
localSearch.search(keyword);
});
});
遇到一个问题,地图选点,会有标记,多次选点就有多次标记.所以需要将以前的标记删掉.
查了查资料,将标记存放在数组中,然后遍历删除就可以了.
大概是这种效果,只实现了部分