百度地图WebAPI

调用百度地图WebAPI实现如下周边配套效果

可以点这里查看效果

首先要去百度地图开放平台申请为百度开发者，然后得到服务秘钥(ak)
WEB服务API: http://lbsyun.baidu.com/index.php?title=webapi/guide/webservice-placeapi

这里还有JS代码和html页面代码的示例: http://lbsyun.baidu.com/jsdemo.htm#i1_1

有了这两个文档和示例，我们就可以开始我们的开发了。
直接上代码

@*地图模块*@
<script type="text/javascript">$(function () {var city = "成都市西南交大";var addr = $(".map-content").attr("name");var map, latitude, longitute;var MapTitleId     //地图面板IDvar keyword ="交通";        //一级面板查询字var subKeyword = "地铁站"     //二级面板查询字var iconURL = "";var pointArray = new Array();        //周边点经纬度Point对象数组var ServiceArray = new Array();      //周边点详细信息//var DistanceArr = new Array();       //周边点到中心点距离function initMap() {//createMap();//创建地图setMapEvent();//设置地图事件addMapControl();//向地图添加控件addMapOverlay();//向地图添加覆盖物}function setMapEvent() {map.enableScrollWheelZoom();map.enableKeyboard();map.enableDragging();map.enableDoubleClickZoom()}function addClickHandler(target, window) {target.addEventListener("click", function () {target.openInfoWindow(window);});}function addMapOverlay() {}//向地图添加控件function addMapControl() {var scaleControl = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });scaleControl.setUnit(BMAP_UNIT_IMPERIAL);map.addControl(scaleControl);var navControl = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: 0 });map.addControl(navControl);}// 复杂的自定义覆盖物function ComplexCustomOverlay(point, text, mouseoverText) {this._point = point;this._text = text;this._overText = mouseoverText;}ComplexCustomOverlay.prototype = new BMap.Overlay();ComplexCustomOverlay.prototype.initialize = function (map) {this._map = map;var div = this._div = document.createElement("div");div.style.position = "absolute";div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);div.style.backgroundColor = "#EE5D5B";div.style.border = "1px solid #BC3B3A";div.style.color = "white";div.style.height = "33px";div.style.padding = "2px";div.style.lineHeight = "28px";div.style.whiteSpace = "nowrap";div.style.MozUserSelect = "none";div.style.fontSize = "16px"var span = this._span = document.createElement("span");div.appendChild(span);span.appendChild(document.createTextNode(this._text));var that = this;var arrow = this._arrow = document.createElement("div");arrow.style.background = "url(http://map.baidu.com/fwmap/upload/r/map/fwmap/static/house/images/label.png) no-repeat";arrow.style.position = "absolute";arrow.style.width = "11px";arrow.style.height = "10px";arrow.style.top = "32px";arrow.style.left = "35px";arrow.style.overflow = "hidden";div.appendChild(arrow);div.onmouseover = function () {this.style.backgroundColor = "#6BADCA";this.style.borderColor = "#0000ff";this.getElementsByTagName("span")[0].innerHTML = that._overText;arrow.style.backgroundPosition = "0px -20px";}div.onmouseout = function () {this.style.backgroundColor = "#EE5D5B";this.style.borderColor = "#BC3B3A";this.getElementsByTagName("span")[0].innerHTML = that._text;arrow.style.backgroundPosition = "0px 0px";}map.getPanes().labelPane.appendChild(div);return div;}ComplexCustomOverlay.prototype.draw = function () {var map = this._map;var pixel = map.pointToOverlayPixel(this._point);this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";this._div.style.top = pixel.y - 30 + "px";}var txt = addr, mouseoverTxt = txt + " " + parseInt(Math.random() * 1000, 10) + "套";//获取覆盖物位置function attribute(e) {var p = e.target;alert("marker的位置是" + p.getPosition().lng + "," + p.getPosition().lat);}//地图面板点击事件 第一级$(".aroundType li").click(function () {$(".aroundType li").each(function (index, item) {$(this).attr("class", "LOGCLICK");})$(".itemTagBox").each(function (index, item) {$(this).attr("style", "display:none");})$(this).attr("class", "LOGCLICK selectTag");MapTitleId = $(this).attr('data-bl');$("#" + MapTitleId).attr("style", "");keyword = $(this).text();  //一级选择   //alert(MapTitleId);//每个一级标签下第一个二级标签被点击var s = "#" + MapTitleId + " div:first";$(s).click();})//起始设置交通地铁站//$('.aroundType li:first').click();//地图点击事件  第二级$("#traffic div").click(function () {$("#" + MapTitleId + " div").each(function (index, item) {$(this).attr("class", "tagStyle LOGCLICK");})$(this).attr("class", "tagStyle LOGCLICK select");subKeyword = $(this).text();   //二级选择searchData(keyword + subKeyword);})$("#education div").click(function () {           $("#" + MapTitleId + " div").each(function (index, item) {$(this).attr("class", "tagStyle LOGCLICK");})$(this).attr("class", "tagStyle LOGCLICK select");subKeyword = $(this).text();   //二级选择searchData(keyword + subKeyword);            })$("#medical div").click(function () {$("#" + MapTitleId + " div").each(function (index, item) {$(this).attr("class", "tagStyle LOGCLICK");})$(this).attr("class", "tagStyle LOGCLICK select");subKeyword = $(this).text();   //二级选择searchData(keyword + subKeyword);})$("#shopping div").click(function () {$("#" + MapTitleId + " div").each(function (index, item) {$(this).attr("class", "tagStyle LOGCLICK");})$(this).attr("class", "tagStyle LOGCLICK select");subKeyword = $(this).text();   //二级选择searchData(keyword + subKeyword);})$("#life div").click(function () {$("#" + MapTitleId + " div").each(function (index, item) {$(this).attr("class", "tagStyle LOGCLICK");})$(this).attr("class", "tagStyle LOGCLICK select");subKeyword = $(this).text();   //二级选择searchData(keyword + subKeyword);})$("#entertainment div").click(function () {$("#" + MapTitleId + " div").each(function (index, item) {$(this).attr("class", "tagStyle LOGCLICK");})$(this).attr("class", "tagStyle LOGCLICK select");subKeyword = $(this).text();   //二级选择searchData(keyword + subKeyword);})//根据一二级关键字请求百度APIfunction searchData(key) {$.ajax({url: "http://api.map.baidu.com/geocoder/v2/",dataType: "jsonp",type: "get",async:false,data: { address: addr, output: "json", ak: "你的ak" },success: function (data) {//alert(addr);longitute = data.result.location.lng.toString();latitude = data.result.location.lat.toString();// 百度地图API功能//alert(latitude + "," + longitute);map = new BMap.Map("map-box-left");            // 创建Map实例initMap();var new_point = new BMap.Point(longitute, latitude);map.centerAndZoom(new_point, 16);   //参数调整比例map.enableScrollWheelZoom();//var marker = new BMap.Marker(new_point);  // 创建标注//map.addOverlay(marker);              // 将标注添加到地图中//marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画//自定义标注var myCompOverlay = new ComplexCustomOverlay(new_point, addr, mouseoverTxt);map.addOverlay(myCompOverlay);//map.panTo(new_point);//添加周边点addPoint(longitute, latitude, key);},error: function (data) {alert("检查网络和地址是否正确！");}});}//添加周边点function addPoint(longitute, latitude, keyword) {$.ajax({url: "http://api.map.baidu.com/place/v2/search",dataType: "jsonp",type: "get",async: false,data: { query: keyword, location: latitude + "," + longitute, radius: 2000,scope:2,filter:"sort_name:distance|sort_rule:1", output: "json", ak: "9pwN0orTUYNywM8HBvFC9qSgGpIGHtKO" },success: function (data) {                     ServiceArray = data.results;//周边点到中心点距离showService(ServiceArray);//遍历周边for (var i = 0; i < data.results.length; i++) {var address = data.results.address;var lat = data.results[i].location.lat.toString();var lng = data.results[i].location.lng.toString();var name = data.results[i].name;//console.log(lat + "," + lng);//创建图标pointArray[i] = new BMap.Point(lng, lat);//var marker = new BMap.Marker(pt);  // 创建标注//map.addOverlay(marker);              // 将标注添加到地图中//自定义图标//var myIcon = new BMap.Icon("/imgs/mapIconBlue@1x.png", new BMap.Size(24, 32));var iconURL = "/imgs/" + MapTitleId + ".png";var myIcon = new BMap.Icon(iconURL, new BMap.Size(24, 32));//var myIcon = BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(300, 157));var marker = new BMap.Marker(pointArray[i], { icon: myIcon });  // 创建标注map.addOverlay(marker);    //增加点marker.addEventListener("click", attribute);   //添加点击事件}showList(ServiceArray);//map.setViewport(pointArray);                //让所有点在视野范围内},error: function (data) {alert("检查网络和地址是否正确！");}});}function showList(ServiceArray){var listStr = "";$('.itemBox li').remove();           //alert("showList"+ServiceArray.length)           for(var i = 0;i < ServiceArray.length;i++ ){name = ServiceArray[i].name;addrSub = ServiceArray[i].address;distance = ServiceArray[i].detail_info.distance+"米";listStr = listStr + '<li ><div class="contentBox"><div class="itemContent"> <span class="icon-park"></span><span class="itemText itemTitle">' + name + '</span><span class="icon-distance"></span><span class="itemText itemdistance">' + distance + '</span></div><div class="itemInfo">' + addrSub + '</div></div></li>';}$(".itemBox").append(listStr);}function showService(ServiceArray) {console.log(ServiceArray);}$("#traffic_panel").click();document.getElementById("resold").style.color = "#F44336";})</script>

百度地图WebAPI相关推荐

百度地图地理位置转经纬度计算两点间的距离
调用百度地图转成经纬度百度地图web-api地址 tp 位置转经纬度 function getMap($address){$ak = config('common.map.ak');$url = c ...
百度地图绘制历史轨迹加标注，简易版
成品如下: 这是放在前端网页的div容器里,因为我的标注多,而且在虚拟机里,所以比较卡其实. API介绍说明使用的是JS API,所以注意的是在百度地图webAPI找是找不到的地图 JS API ...
python调用百度地图api定位_python 调用百度地图地点检索webAPI
百度地图提供了开放的API,使用方法右上角登陆账号 -> 点击"获取密钥" -> "创建应用" -> 填写应用名称&白名单IP -& ...
微信小程序城市定位(百度地图API)
概述微信小程序提供一些API(地址)用于获取当前用户的地理位置等信息,但无论是wx.getLocation,还是wx.chooseLocation均没有单独的字段表示国家与城市信息,仅有经纬度信息. ...
python批量爬取小网格区域坐标系_Python爬虫实例_利用百度地图API批量获取城市所有的POI点...
上篇关于爬虫的文章,我们讲解了如何运用Python的requests及BeautifuiSoup模块来完成静态网页的爬取,总结过程,网页爬虫本质就两步: 1.设置请求参数(url,headers,co ...
sns.distplot图例标注怎么添加_百度地图API图标、文本、图例与连线
百度地图开放平台功能强大,使用简单,为地图的自定义提供了非常方便的途径! 本文以绘制一张全国机器辐射图为例记录其基本使用方法,效果如下图: 图中包括了带图标和文本的标注,连线以及图例. 1.关于坐标 ...
获取用户精准地理位置信息（百度地图）
获取用户精准地理位置信息步骤: 1.通过 navigator.geolocation.getCurrentPosition(showPosition, showError); 方法获取经纬度: 2.使 ...
Windows Store Javascript项目使用高德地图、谷歌地图、百度地图API
Windows Store Javascript项目使用高德地图.谷歌地图.百度地图API 原文 Windows Store Javascript项目使用高德地图.谷歌地图.百度地图API 在Win8 ...
navigator.geolocation的应用 - 将定位信息显示在百度地图上
在学习navigator.geolocation的时候,有一个实例是获取坐标后显示在谷歌地图上.众所周知,谷歌地图国内并不能直接访问,得用特殊手段,那我要测试的时候还要开着梯子挺麻烦的,想给别人用也得 ...

百度地图WebAPI

百度地图WebAPI

百度地图WebAPI相关推荐

最新文章

热门文章