在做企业站的时候,经常需要百度地图API显示公司位置信息,百度地图生成器本身提供这个服务。但显示不够理想,网络搜索本文章介绍网页百度地图API,支持位置偏移,主要包括网页百度地图API,支持位置偏移使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。需加载 jQuery
<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="//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 = '地址:泰州市海陵区凤凰东路58号';
//坐标
var my_poix = 119.929529;
var my_poiy = 32.462353;
//地图位置偏移
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, 15);
var opts = {
width : 300, // 信息窗口宽度
height: 150, // 信息窗口高度
//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>
百度地图坐标拾取器:http://api.map.baidu.com/lbsapi/getpoint/index.html