1、必须调用jquery库,和百度地图API
<script src="http://api.map.baidu.com/api?v=2.0&ak=67jMQ5DmYTe1TLMBKFUTcZAR"></script>
2、修改函数中,ShowMap(‘坐标地址’, ‘公司名称’, ‘地址’, ‘电话’, ‘传真’, ‘放大倍数’);
$(function () {
ShowMap('113.54143,22.274386', '公司名称', '金茂大厦', '021-888888888', '021-888888888', '20');
})
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=67jMQ5DmYTe1TLMBKFUTcZAR"></script>
<style type="text/css">
body{margin: 0; padding: 0; font:12px/1 "Microsoft Yahei", "微软雅黑", sans-serif;}
p, span {
font-family: 'Microsoft Yahei'!important;
}
</style>
</head>
<body>
<div id="map">
<div style="width: 100%; height: 503px;" id="allmap"></div>
</div>
</body>
</html>
<script type="text/javascript">
$(function () {
ShowMap('113.54143,22.274386', '公司名称', '金茂大厦', '021-888888888', '021-888888888', '20');
})
function getInfo(id) {
$.ajax({
type: "POST",
url: "WebUserControl/Contact/GetInfo.ashx",
cache: false,
async: false,
data: { ID: id },
success: function (data) {
data = eval(data);
var length = data.length;
if (length > 0) {
ShowMap(data[0]["Image"], data[0]["NewsTitle"], data[0]["Address"], data[0]["Phone"], data[0]["NewsTags"], data[0]["NewsNum"]);
}
}
});
}
function ShowMap(zuobiao, name, addrsee, phone, chuanzhen, zoom) {
var arrzuobiao = zuobiao.split(',');
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(arrzuobiao[0], arrzuobiao[1]), zoom);
map.addControl(new BMap.NavigationControl());
var marker = new BMap.Marker(new BMap.Point(arrzuobiao[0], arrzuobiao[1]));
map.addOverlay(marker);
var infoWindow = new BMap.InfoWindow('<p style="color: #bf0008;font-size:14px;">' + name + '</p><p>地址:' + addrsee + '</p><p>电话:' + phone + '</p><p>传真:' + chuanzhen + '</p>');
marker.addEventListener("click", function () {
this.openInfoWindow(infoWindow);
});
marker.openInfoWindow(infoWindow);
}
</script>
兼容移动端,但是没有做ie浏览器兼容处理。就因为还有用户使用IE浏览器,才导致此业内毒瘤没有消失!生气!!
必须 注册 为本站用户, 登录 后才可以发表评论!