网页百度地图api，支持位置偏移
需加载 jq
我要评论<style type="text/css">
#allmap {width:100%; height:100%; border:#ccc solid 1px; box-sizing:border-box; position:relative; z-index:1;}
.mapbox {width:100%; height:420px; margin-top:15px; position:relative;}
.mapbox.on {height:100%; margin-top:0; position:fixed; top:0; left:0; z-index:1000;}
.mapbox .zw {width:100%; height:100%; position:absolute; top:0; left:0; z-index:2; display:none;}
.anchorbl, .bmap_cpyctrl {display:none;}
.bmap_pop {transform:translatey(-15px);}
.mapbigest {width:26px; height:26px; position:absolute; top:10px; right:10px; z-index:10; cursor:pointer; background-size:100% 100%; background-repeat:no-repeat; background-image:url('data:image/png;base64,ivborw0kggoaaaansuheugaaagqaaabkcamaaabhpgvmaaaahfbmveuaaabjsulkskpjsulbqufdq0njsuljsulls0tjsulfruvjsulkskpkskpjsuljsuljsuljsulhr0disehjsulkskpjsulls0tkskpjsuljsulisehjsulkskpisehjsuljsulisehererjsulisehjsuljsulisehjsuljsulhr0dkskras+laaaaak3rstlmawibjcat77bhmdfljxt3n1qvlnl+0rsic+gzr9lpyit13f5juxjanrpwrmvj51gaaasxjrefuan7t2tusojaqgoeetarfwrmikido6dj9/u+3u+xgxa7zkfc7n/yxxvcvzvgsbga+3dpiq1lmmohrffko7vqctlczgdc32bk7k+ce3r30ksn2lwiqkvsraypsiht95nsqsqvouamhhixz2sgdxm1l57vhkkvw5cfg3xwkyndk1kecumxeoig/qbkiyy1aslkqsjwaiw7w2bwftpzcovfdgfnjg4fgssyn9gnaowkjubzwsvxiuass8wbkpg0mgqlvsij7iqw5ap6tsmkzfkgkvugrthiakmc3gyjcmqnlbmws56bgyc4ut6espw0gcsrkyzeafgmupvc+bqw1aqy/8tkycbjkhhnytig3kwm29ychxoqlesbxfc3l0gha3mwflscihyoat1gmlg0py8fix2sigdeasg4csfxfuvkjid8s6i5hrnh+hvrxl3hve6bonxldsdmcotzmajs1xinx0big1uo4b0w8vnmzbuy5io4wlhlrhy8cbpk2hmbgxsbgxsbgxsbg/l9864fv+cpfe6asdhedg8npdjxqm+pa3ciwlta4yk8tdczvkw0r5yk/m+5b0t0vcrcw8ka5sptskpkxbzyiyatcgwsghuastiyghajgrjlm6whorxpuxxpdsenqh+zyz6gwmxhncanito+uga/kjc/ea4cmg3ogsq2dpungdbbojh7kjv0d4v/e0fr8ohceglnxsm7j1aipigguukrtthmw6oykzd6n8ewyrzdq21uuayhhrcgrrgyd7o0iq9iogezkkbspio2xaav2qll57whbesnywtyvnnilxidktywchrhdacvccvvikiby8dybmqaponchawpykys5mn04r5ub9coondcklydshn2mxz94zwedpkihjxrkxmfurvrifbslicfoxe8f8vzslaaizqft7imwlrx0qhkyd0mlkxvdlyofwnklbrtlaaaaaelftksuqmcc');}
@media (max-width: 640px) {
.bmap_scalectrl {display:none;}
.mapbox .zw {display:block;}
}
</style>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=【你的密匙】"></script>
<div class="mapbox"><div class="mapbigest"></div><div class="zw"></div><div id="allmap"></div></div>
<script type="text/javascript">
//手机版点击才可拖动
$(document).on("click",".mapbox",function(){
$(this).find(".zw").hide();
});
//地图最大化
$(document).on("click",".mapbigest",function(){
$(this).parent(".mapbox").toggleclass("on");
baidu_map();
});
//键盘esc退出全屏
var ispiss = 0;
document.onkeydown = function(event) {
var e = event || window.event || arguments.callee.caller.arguments[0];
if(e.keycode == 27){
if($(".mapbox").hasclass("on")){
$(".mapbox").removeclass("on");
baidu_map();
}
}
};
function pix(p)
{
p = p/100000;
return p;
}
function poi_move(x,y,type)
{
//x: +往右偏移 -往偏左移
//y: +往上偏移 -往偏下移
arr = type.split(",");
xarr = xpoi = new array();
if(type){
if(arr){
for(i=0;i<arr.length;i++)
{
xarr.push(arr[i].split(":"));
}
}
if(xarr){
for(i=0;i<xarr.length;i++)
{
if(xarr[i][0]=="left"){
x = x+pix(xarr[i][1]);
}else if(xarr[i][0]=="right"){
x = x-pix(xarr[i][1]);
}else if(xarr[i][0]=="top"){
y = y-pix(xarr[i][1]);
}else if(xarr[i][0]=="bottom"){
y = y+pix(xarr[i][1]);
}
console.log(xarr[i])
}
}
}
xpoi["x"] = x;
xpoi["y"] = y;
return xpoi;
}
function baidu_map()
{
//公司名称
var my_company = '广州国伦科技有限公司';
//公司地址
var my_address = '地址：广州市番禺区钟村街汉兴三街6号3栋921';
//坐标
var my_poix = 113.3404460125;
var my_poiy = 22.9967992377;
//地图位置偏移
var move_type = "left:15,top:15"; // 往左偏移15像素，往上偏移15像素
poi_arr = poi_move(my_poix,my_poiy,move_type);
my_poix_p = poi_arr["x"];
my_poiy_p = poi_arr["y"];
// 百度地图api功能
var map = new bmap.map("allmap");
var point = new bmap.point(my_poix,my_poiy)
var point_p = new bmap.point(my_poix_p,my_poiy_p);
var myicon = new bmap.icon("data:image/png;base64,ivborw0kggoaaaansuheugaaabmaaaahcamaaaampgbyaaaa3lbmveuaaaaraamraam+fobhh/auacqvasuraanghu5jifnjifnhipetz8e/feiwa8y3dnnfhos+fn9bf+rkivq0cm4py7smx7y9et04ddvcgecxbmkszr8mu58uacq1ctaoyblkivrdgukophuybssqzl06dthkivqlxle7edo7edpemp42kfc/lvtjmv8wkpqqjpe8lplblvw5k/gtjviki+5jkfggio1lmv9fjfqpfd4gg+vll/1dkvc8j/q0jvi7iosxhuk4hegugoe0f+a6fd8xenckdniobsolzr8gddo/82araaaaknrstlmamigggiwngbt3w73+/f349vpp5d7d3ndavr2wqkebfnv0avbeobr0k5ghelo3aaaa90leqvqoz13q1xqdqbrf4q0bgstdpalbs2ugixv6/i8uggsg/3j959xs+byjtapu1deckyygkkvlwuuicbn4zi1yrsaimuxfacsiefvxkdhgki0acumdvzixtlpnhqo9srvvgxx9m6vxknft8iibqwsw0vybrhutb9sf1vyv89mh6zqhwnsm7vsapoimktzfcz7b8tn2hatz1xbptkufa07pv5hzfkho4stw6caifsjwephud/zk9betc38porejxcdlthdjsyul9dodo+5stw7w8eivq7ckg71jsgm4dbcyfo+/x2erwhpc5gxcctztajz765xo9w5vvedylqlpqqaaaabjru5erkjggg==", new bmap.size(19,33)); //自定义图标
var marker = new bmap.marker(point,{icon:myicon});
map.addoverlay(marker); // 将标注添加到地图中
//marker.setanimation(bmap_animation_bounce); // 跳动的动画
map.centerandzoom(point_p, 18);
var opts = {
width : 200, // 信息窗口宽度
height: 60, // 信息窗口高度
//title : "" , // 信息窗口标题
//enablemessage:true,//设置允许信息窗发送短息
//message:""
}
var infowindow = new bmap.infowindow('<strong style="color:#d55522;font-size:14px;padding-bottom:10px;">'+my_company+'</strong><p>'+my_address+'</p>', opts); // 创建信息窗口对象
var top_left_control = new bmap.scalecontrol({anchor: bmap_anchor_top_left});// 左上角，添加比例尺
var top_left_navigation = new bmap.navigationcontrol(); //左上角，添加默认缩放平移控件
map.addcontrol(top_left_control);
map.addcontrol(top_left_navigation);
map.openinfowindow(infowindow,point); //开启信息窗口
marker.addeventlistener("click", function(){
map.openinfowindow(infowindow,point); //开启信息窗口
});
}
baidu_map();
</script>
如对本文有疑问， 点击进行留言回复！！
asp.net中ajax和一般处理程序（handler.ashx）的交互
egg.js创建项目，目录介绍，简单使用，sequelize mysql使用
网友评论