HTML代码(MVC)
@*-------------------调用地图接口在百度地图的基础上,添加自动搜索(地区)框----------------------------------*@ @{ Layout = null; } <script src="~/Scripts/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=CGkMErD3Gux07tGL26GCoWGU"></script> @*搜索框*@ <div style="margin:50px">请输入:<input type="text" id="suggestId" size="30" placeholder="搜索地区、" style="width:300px;" /></div> @*搜索结果*@ <div id="searchResultPanel" style="border:1px solid green;width:300px;height:600px;position:absolute;left: 650px;top:20px;"></div> @*添加地图的地方*@ <div id="container"></div>
JS代码
<script type="text/javascript"> //初始化地图 var map = new BMap.Map("container");//在百度地图容器中创建一个地图 var point = new BMap.Point(116.3964, 39.9093);//定义一个中心点坐标 map.centerAndZoom(point, 5);//设定地图的中心点和坐标并将地图显示在地图容器中 map.enableScrollWheelZoom();//允许鼠标滑轮放大或缩小 var ac = new BMap.Autocomplete( //建立一个自动完成的对象 { "input": "suggestId", "location": map }); function G(id) { return document.getElementById(id); } ac.addEventListener("onhighlight", function (e) { //鼠标放在下拉列表上的事件 var str = ""; var _value = e.fromitem.value; var value = ""; if (e.fromitem.index > -1) { value = _value.province + _value.city + _value.district + _value.street + _value.business; } str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value; value = ""; if (e.toitem.index > -1) { _value = e.toitem.value; value = _value.province + _value.city + _value.district + _value.street + _value.business; } str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value; G("searchResultPanel").innerHTML = str; }); var myValue; ac.addEventListener("onconfirm", function (e) { //鼠标点击下拉列表后的事件 var _value = e.item.value; myValue = _value.province + _value.city + _value.district + _value.street + _value.business; G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue; setPlace(); }); function setPlace() {// 创建地址解析器实例 var myGeo = new BMap.Geocoder();// 将地址解析结果显示在地图上,并调整地图视野 myGeo.getPoint(myValue, function (point) { if (point) { map.centerAndZoom(point, 9);//重新定位地图中心点 map.addOverlay(new BMap.Marker(point));//创建一个地图标注 } }, "北京"); } </script> <style type="text/css"> body { font-size: 13px; margin: 0px; } #container { width: 600px; height: 400px; } .label { margin-left: 20px; font-weight: bold; font-size: 14px; } </style>
时间: 2024-10-12 08:35:26