百度地图+Marker纠偏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>百度地图+Marker纠偏</title>
<!--引用百度地图API-->
<style type="text/css">
html,body {
margin: 0;
padding: 0;
}
.iw_poi_title {
color: #CC5522;
font-size: 14px;
font-weight: bold;
overflow: hidden;
padding-right: 13px;
white-space: nowrap
}
.iw_poi_content {
font: 12px arial, sans-serif;
overflow: visible;
padding-top: 4px;
white-space: -moz-pre-wrap;
word-wrap: break-word
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<!--百度地图容器-->
<div style="width: 697px; height: 550px; border: #ccc solid 1px;" id="dituContent"></div>
</body>
<script type="text/javascript">
//创建和初始化地图函数：
function initMap() {
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
addMarker();//向地图中添加marker
}
//创建地图函数：
function createMap() {
var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
var point = new BMap.Point(120.791737, 41.488709);//定义一个中心点坐标
map.centerAndZoom(point, 7);//设定地图的中心点和坐标并将地图显示在地图容器中
window.map = map;//将map变量存储在全局
}
//地图事件设置函数：
function setMapEvent() {
map.disableDragging();//禁用地图拖拽事件
map.disableScrollWheelZoom();//禁用地图滚轮放大缩小，默认禁用(可不写)
map.disableDoubleClickZoom();//禁用鼠标双击放大
map.disableKeyboard();//禁用键盘上下左右键移动地图，默认禁用(可不写)
}
//地图控件添加函数：
function addMapControl() {
}
//标注点数组
var markerArr = {
title : "标记",
content : "备注",
point : "116.606352|40.513056",
isOpen : 0,
icon : {
w : 21,
h : 21,
l : 0,
t : 0,
x : 6,
lb : 5
}
};
//创建marker
function addMarker() {
var json = markerArr;
var p0 = json.point.split("|")[0];
var p1 = json.point.split("|")[1];
//GPS数据偏移校正
var transportApiUrl = "http://api.zdoz.net/transgpsbd.aspx?lat=" + p1
+ "&lng=" + p0;
$.ajax({
url : transportApiUrl,
type : 'GET',
dataType : 'JSONP',
success : function(data) {
if (data) {
var point = new BMap.Point(data.Lng, data.Lat);
var iconImg = createIcon(json.icon);
var marker = new BMap.Marker(point, {
icon : iconImg
});
var iw = createInfoWindow();
var label = new BMap.Label(json.title, {
"offset" : new BMap.Size(json.icon.lb - json.icon.x
+ 10, -20)
});
marker.setLabel(label);
map.addOverlay(marker);
label.setStyle({
borderColor : "#808080",
color : "#333",
cursor : "pointer"
});
(function() {
var _iw = createInfoWindow();
var _marker = marker;
_marker.addEventListener("click", function() {
this.openInfoWindow(_iw);
});
_iw.addEventListener("open", function() {
_marker.getLabel().hide();
})
_iw.addEventListener("close", function() {
_marker.getLabel().show();
})
label.addEventListener("click", function() {
_marker.openInfoWindow(_iw);
})
if (!!json.isOpen) {
label.hide();
_marker.openInfoWindow(_iw);
}
})()
}
}
});
}
//创建InfoWindow
function createInfoWindow() {
var json = markerArr;
var iw = new BMap.InfoWindow(
"<b class='iw_poi_title' title='" + json.title + "'>"
+ json.title + "</b><div class='iw_poi_content'>"
+ json.content + "</div>");
return iw;
}
//创建一个Icon
function createIcon(json) {
var icon = new BMap.Icon(
"http://app.baidu.com/map/images/us_mk_icon.png",
new BMap.Size(json.w, json.h), {
imageOffset : new BMap.Size(-json.l, -json.t),
infoWindowOffset : new BMap.Size(json.lb + 5, 1),
offset : new BMap.Size(json.x, json.h)
})
return icon;
}
initMap();//创建和初始化地图
</script>
</html>
版权声明：本文为博主原创文章，未经博主允许不得转载。
原文地址：http://blog.csdn.net/graceup/article/details/46793175
