程序博客网 > 宁波奥派网络

在网站中添加百度地图

来源：互联网发布：宁波奥派网络编辑：程序博客网时间：2024/05/21 10:33

1.打开网站http://api.map.baidu.com/lbsapi/creatmap/ 如图:

2.按照图中标题进行设置，先定位中心点，例如北京；然后设置地图样式、位置等；如果要在地图中标示位置，那就添加标注

3.点击获取代码，将代码结合自己业务所需进行修改，例，我需要在地图中显示人的位置，

代码如下：

<!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" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#allmap{height:100%;width:100%;}
#r-result{width:100%; font-size:14px;}
</style>
<script type="text/javascript" src="${_b}/zyrt/layout/js/jquery.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=qsCyZKRdsVn6mDmreW8IIruw"></script>
<title>城市名定位</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>

<script type="text/javascript">
$(function() {
$.ajax({
url:"${_b}/business/main/sys/queryMemberMapInfo",
type:"post",
dataType:"json",
success: function(data){
var markerArr=new Array();
$.each(data.result, function(i, val){
markerArr[i]=val;
});
initMap(markerArr);//创建和初始化地图
},
error:function(){
alert("系统出错，请与系统管理员联系!");
}
});
});

//创建和初始化地图函数：
function initMap(markerArr){
createMap(markerArr);//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
addMarker(markerArr);//向地图中添加marker
}

//创建地图函数：
function createMap(markerArr){
var map = new BMap.Map("allmap");//在百度地图容器中创建一个地图
var point = "";
if(markerArr.length>0){
point = new BMap.Point(markerArr[0].x, markerArr[0].y);//定义一个中心点坐标，取第一个人的坐标
}
else{
point = new BMap.Point(118.583926,37.487121);//默认取所在地
}
map.centerAndZoom(point,12);//设定地图的缩放比
window.map = map;//将map变量存储在全局
}

//地图事件设置函数：
function setMapEvent(){
map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
map.enableKeyboard();//启用键盘上下左右键移动地图
}

//地图控件添加函数：
function addMapControl(){
//向地图中添加缩放控件
var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
map.addControl(ctrl_nav);
//向地图中添加缩略图控件
var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
map.addControl(ctrl_ove);
//向地图中添加比例尺控件
var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
map.addControl(ctrl_sca);
}

//创建marker
function addMarker(markerArr){
map.clearOverlays(); //清除地图上所有覆盖物

for(var i=0; i<markerArr.length; i++){
var json = markerArr[i];
var p0 = json.x; // 经度
var p1 = json.y; // 按照原数组的point格式将地图点坐标的经纬度分别提出来纬度
var point = new BMap.Point(p0,p1); // 循环生成新的地图点
var iconImg = createIcon(json);
var marker = new BMap.Marker(point,{icon:iconImg}); //按照地图点坐标生成标记
var iw = createInfoWindow(json);
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
var label = new BMap.Label(json.repairname,{"offset":new BMap.Size(20,-10)});
marker.setLabel(label);
map.addOverlay(marker);
label.setStyle({
borderColor:"#808080",
color:"#333",
cursor:"pointer"
});
(function(){
var _iw = createInfoWindow(json);
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);
});
})();
}
}

//创建InfoWindow
function createInfoWindow(json){
var iw = new BMap.InfoWindow("<p style=’font-size:12px;lineheight:1.8em;’>" + json.repairname
+ "</br>电话：" + json.repairtel
+ "</br>最近时间：" + json.adddate + "</br></p>"); // 创建信息窗口对象
return iw;
}

//创建一个Icon
function createIcon(json){
var icon = new BMap.Icon("${_b}/zyrt/layout/images/mario.png",
new BMap.Size(21,21),{
imageOffset: new BMap.Size(0,0),
infoWindowOffset: new BMap.Size(10,1),
offset: new BMap.Size(6,21)
});
return icon;
}

</script>

0 0

宁波奥派网络

宁波奥派网络

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子收割末世收割者末世收割猩红收割者黑暗收割收割者脊骨收割者水稻收割时空收割者美娱收割者蜜背收割者收割粉碎机收割一群狼快穿之收割男神我很忙收割伊丽莎白韩娱之男神收割指南黑暗收割有什么用金手指收割系统玉米收割青储机玉米收割打包机金手指收割专家快穿玉米联合收割粉碎机玉米收割打包机一体机收割者戈提克麦子什么时候收割小麦什么时候收割收银行卡信用卡不开卡收年费吗有人收银行卡给800一张收手机卡收购物卡回收西安收卡收京东e卡收卡啦收消费卡收回成命土地收回台湾收回收回水泼落地难收回土地收回政策