在网页上加载百度地图

在项目里看在之前不知哪位程序员的大作，觉得挺好，就给摘下来了。

<!--bootstrap tab--><a href="#profile3" class="tabtn" id="around" rel="1" data-toggle="tab">地图</a><!-- map --><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=GaqiVXmYjIDWOzLzZLI2pHtC"></script><script src="public/js/jquery-1.9.1.min.js"></script><div style="width:100%;height:430px;margin-left:auto;margin-right:auto;"><ul class="mapbtn sub_nav"><li rel="1" id="around_bus">公交</li><li rel="2">地铁</li><li rel="3">教育设施</li><li rel="4">医院</li><li rel="5">银行</li><li rel="6">休闲娱乐</li><li rel="7">购物</li><li rel="8">餐饮</li><li rel="9">运动健身</li></ul><div><div id="allmap" class="col-md-9 col-sm-12 col-xs-12" style="border-right:2px solid #bcbcbc;height:430px;"></div><div id="r-result" class="col-md-3 col-sm-12 col-xs-12" style="height:430px;overflow-y:auto;"></div></div></div><script type="text/javascript">ilo="116.311165";iloa="39.948399";itxt="北京大学西校区";mapshown=0;$(function(){$(".mapbtn li").click(function(){inimap(ilo,iloa,$(this).attr("rel"),itxt);$(".mapbtn li").removeClass("on");$(this).addClass("on");})//这里有个bootstrap的tab,当触发这个tab时加载这个地图显示这个tab时触发这个事件$("#around").on('shown.bs.tab', function (e) {if(mapshown==0){inimap(ilo,iloa,1,itxt);$("#around_bus").addClass("on");mapshown = 1;}})})</script><script type="text/javascript" charset="utf-8" src="public/js/map.js"></script>

map.js

// JavaScript Documentvar ilo;
var iloa;
var itxt;//116.3333333,39.38888888
function inimap(lo,loa,i,txt)
{ilo=lo;iloa=loa;itxt=txt;// 百度地图API功能var mp = new BMap.Map("allmap");mp.centerAndZoom(new BMap.Point(lo,loa), 15);mp.enableScrollWheelZoom();mp.addControl(new BMap.NavigationControl()); // 复杂的自定义覆盖物function ComplexCustomOverlay(point, text){this._point = point;this._text = text;}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.color = "white";div.style.background = "url(img/2.png) no-repeat";div.style.height = "50px";div.style.padding = "2px";div.style.width = "130px";div.style.lineHeight = "28px";div.style.whiteSpace = "nowrap";div.style.MozUserSelect = "none";div.style.fontSize = "12px"div.style.top = "25px";div.style.left = "0px";div.style.overflow = "hidden";var span = this._span = document.createElement("span");span.style.display="block";span.style.width="130px";span.style.textAlign="center";div.appendChild(span);span.appendChild(document.createTextNode(this._text));      var that = this;var arrow = this._arrow = document.createElement("div");arrow.style.left = "0px";mp.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 - 65 + "px";this._div.style.top  = pixel.y - 40 + "px";}var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(lo,loa),txt);mp.addOverlay(myCompOverlay);var txt="";switch(i){case "1":txt="公交";break;case "2":txt="地铁";break;case "3":txt="学校";break;case "4":txt="医院";break;case "5":txt="银行";break;case "6":txt="娱乐";break;case "7":txt="购物";break;case "8":txt="餐饮";break;case "9":txt="健身";break;default:txt="公交";break;}var local = new BMap.LocalSearch(mp, {renderOptions:{map: mp, panel: "r-result"}});local.searchInBounds(txt, mp.getBounds());mp.addEventListener("dragend",function(){mp.clearOverlays();local.searchInBounds(txt, mp.getBounds());});}

在网页上加载百度地图相关推荐

FGMap学习之--加载百度地图
今天我们用FGMap来加载百度地图数据. 从目前国内的地图服务商提供的地图来看,地图瓦片切图规则只少分为三种.其中Google Map.Bing地图.MapABC.QQ地图是一类,而百度地图.搜狗地图 ...
（转） Arcgis for js加载百度地图
http://blog.csdn.net/gisshixisheng/article/details/44853709 概述: 在前面的文章里提到了Arcgis for js加载天地图,在本节,继续讲 ...
【百度地图】——利用三级联动加载百度地图
[百度地图]--利用三级联动加载百度地图 HTML+CSS代码如下: <!DOCTYPE html> <html lang="en"><head> ...
leaflet、cesium加载百度地图，加载自定义样式百度地图
1 leaflet.cesium加载百度地图(官方预设样式) 预留,待补充 2 leaflet.cesium加载百度自定义样式地图样式编辑器新版地址:http://lbsyun.baidu.com/ ...
openlayers加载百度地图作为底图坐标偏移的解决办法
openlayers加载天地图作为底图,在网上找了公开的服务资源,要做到百度地图与天地图之间切换,同样也从网上找到百度地图的服务资源但是在地图上坐标总是有偏差,最初的代码是这样的: var proje ...
angular使用openlayers6以及加载百度地图
angular中使用openlayers本来是没什么难度的,但是如果要加载百度地图还是有些问题的,在openlayers3中坐标是从原点右上递增,而openlayers6中是右下递增,这就导致使用百度 ...
Openlayers3 加载百度地图，天地图
2019独角兽企业重金招聘Python工程师标准>>> openlayers3 加载百度地图: var projection = ol.proj.get("EPSG:385 ...
Leaflet加载百度地图
为了验证一下百度地图的影像.矢量.注记等瓦片数据是否是坐标统一的,写了一个简单的leaflet加载百度影像瓦片.矢量瓦片.注记瓦片的页面,叠加在一起,看了一下,果然坐标系是统一的. <!DOCT ...
ol xyz 加载天地图_Openlayers3 加载百度地图，天地图
2019独角兽企业重金招聘Python工程师标准>>> openlayers3 加载百度地图: var projection = ol.proj.get("EPSG:385 ...

在网页上加载百度地图

在网页上加载百度地图相关推荐

最新文章

热门文章