首页 > 代码库 > 地图对接汇总(百度地图)
地图对接汇总(百度地图)
<span style="font-family:Microsoft YaHei;font-size:14px;"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <title>百度地图搜索</title> <script type="text/javascript" src="http://mapclick.map.baidu.com/data/98_36_11_018.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=1jwM1UGS8wPTvaiUSUaUnuOG"></script> </head> <body> <div style="width:520px;height:340px;border:1px solid gray" id="container"></div> 要查询的地址：<input id="text_" type="text" value="山东济南泉城广场" style="margin-right:100px;"/> 查询结果(经纬度)：<input id="result_" type="text" /> <input type="button" value="地址查询经纬度" onclick="searchByStationName();"/> <div id="r-result"> 城市名: <input id="cityName" type="text" style="width:100px; margin-right:10px;" /> <input type="button" value="查询" onclick="theLocation()" /> </div> <div id="results" style="font-size:13px;margin-top:10px;"></div> </body> </html> <script type="text/javascript"> var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用 map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用 //为了使用地图更加方便，我们还可以添加上缩放的平移控件，以及地图的缩略图控件，并设置他要显示的位置： map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件 map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件 map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT })); //右下角，打开 //var local = new BMap.LocalSearch(map, { // renderOptions: {map: map, panel: "results"} //}); //var opts = {anchor: BMAP_ANCHOR_TOP_RIGHT, offset: map.getCenter()}; ////var opts = {anchor: BMAP_ANCHOR_TOP_RIGHT, offset: new BMap.Size(10, 10)}; //map.addControl(new BMap.NavigationControl(opts)); //local.search("北京市海淀区上地地铁站"); //1.构建搜索 var localSearch = new BMap.LocalSearch(map); localSearch.enableAutoViewport(); //允许自动调节窗体大小 //2.开始做最关键的一步了，就是获取地址的具体经纬度： var searchByStationName = function(){ var keyword = document.getElementById("text_").value; //搜索回调方法 localSearch.setSearchCompleteCallback(function (searchResult) { alert(searchResult); var poi = searchResult.getPoi(0); document.getElementById("result_").value = poi.point.lng + "," + poi.point.lat; //获取经度和纬度，将结果显示在文本框中 map.centerAndZoom(poi.point, 13); }); localSearch.search(keyword); } /********************************** ***********百度地图API功能********* **********************************/ //1.城市名定位 //var map = new BMap.Map("allmap"); //var point = new BMap.Point(116.331398,39.897445); //map.centerAndZoom(point,11); function theLocation(){ var city = document.getElementById("cityName").value; if(city != ""){ map.centerAndZoom(city,11); // 用城市名设置地图中心点 } } //2.IP定位获取当前城市 function myFun(result){ var cityName = result.name; map.setCenter(cityName); alert("当前定位城市:"+cityName); } var myCity = new BMap.LocalCity(); myCity.get(myFun); //3.单击获取点击的经纬度 //单击获取点击的经纬度 var longitude = "";//经度 var latitude = "";//纬度 map.addEventListener("click",function(e){ alert("经度:"+e.point.lng + "," + "纬度:" +e.point.lat); longitude = e.point.lng; latitude = e.point.lat; if(longitude != "" && latitude != ""){ map.clearOverlays(); var new_point = new BMap.Point(longitude,latitude); var marker = new BMap.Marker(new_point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 map.panTo(new_point); marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 } }); //4 用经纬度设置地图中心点 /*function theLocation(){ if(longitude != "" && latitude != ""){ map.clearOverlays(); var new_point = new BMap.Point(longitude,latitude); var marker = new BMap.Marker(new_point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 map.panTo(new_point); } }*/ //5.逆地址解析,点击地图展示详细地址 var geoc = new BMap.Geocoder(); map.addEventListener("click", function(e){ var pt = e.point; geoc.getLocation(pt, function(rs){ var addComp = rs.addressComponents; alert(addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber); }); }); </script> </span>
附上baidu地图APIdemo地址：http://developer.baidu.com/map/jsdemo.htm
地图对接汇总(百度地图)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。