使用百度地图API根据坐标显示地图
第一种方法：
<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;hidden;margin:0;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=amy5lBMjH4C0AM6WtKAeEEXU"></script>
<title>添加普通标注点</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var zhengjiaContent =
"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>正佳广场</h4>" +
"<img style='float:right;margin:4px' id='imgDemo' src='http://app.baidu.com/map/images/tiananmen.jpg' width='139' height='104' title='天安门'/>" +
"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>天安门坐落在中国北京市中心,故宫的南侧,与天安门广场隔长安街相望,是清朝皇城的大门...</p>" +
"</div>";
var anjubaoContent =
"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>安居宝</h4>" +
"<img style='float:right;margin:4px' id='imgDemo' src='http://app.baidu.com/map/images/tiananmen.jpg' width='139' height='104' title='天安门'/>" +
"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>天安门坐落在中国北京市中心,故宫的南侧,与天安门广场隔长安街相望,是清朝皇城的大门...</p>" +
"</div>";
// 百度地图API功能
var map = new BMap.Map("allmap");
var point=new BMap.Point(113.433402, 23.171994);//中心点
map.centerAndZoom(point,12);
var label = new BMap.Label('点击查看',{"offset":new BMap.Size(-10,-20)});
var label2 = new BMap.Label('点击查看',{"offset":new BMap.Size(-10,-20)});
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
point=r.point;
alert('您的位置：'+r.point.lng+','+r.point.lat);
}
else {
//alert('failed'+this.getStatus());
}
},{enableHighAccuracy: true})
//初始化地图
map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
map.enableScrollWheelZoom(); //启用滚轮放大缩小
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("广州"); // 设置地图显示的城市 此项是必须设置的
//安居宝地图位置
var pointanjubao = new BMap.Point(113.433402, 23.171994);
//设置显示图片的图标
var myIcon = new BMap.Icon("2323.gif", new BMap.Size(20,20));
var marker = new BMap.Marker(pointanjubao,{icon:myIcon});
map.addOverlay(marker);
marker.setLabel(label);
var opts = {
width : 200, // 信息窗口宽度
height: 60, // 信息窗口高度
title : "海底捞王府井店" , // 信息窗口标题
enableMessage:true,//设置允许信息窗发送短息
message:"亲耐滴，晚上一起吃个饭吧？戳下面的链接看下地址喔~"
}
var infoWindow1 = new BMap.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts); // 创建信息窗口对象
marker.openInfoWindow(infoWindow1); //开启信息窗口
//鼠标经过显示图片
var infoWindow = new BMap.InfoWindow(anjubaoContent); // 创建信息窗口对象
marker.addEventListener("mouseover", function(){
this.openInfoWindow(infoWindow);
//图片加载完毕重绘infowindow
document.getElementById('imgDemo').onload = function (){
infoWindow.redraw(); //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
}
});
//鼠标离开时候
marker.addEventListener("mouseout", function(){
this.openInfoWindow(infoWindow1,point);
});
//点击打开事件
marker.addEventListener("click", function(){
window.open("http://www.baidu.com");
});
//正佳广场
var pointzhengjia = new BMap.Point(113.333951, 23.138409);
//设置显示图片的图标
var markerzhengjia = new BMap.Marker(pointzhengjia,{icon:myIcon});
map.addOverlay(markerzhengjia);
markerzhengjia.setLabel(label2);
var optszhjia = {
width : 200, // 信息窗口宽度
height: 60, // 信息窗口高度
title : "正佳广场" , // 信息窗口标题
enableMessage:true,//设置允许信息窗发送短息
message:""
}
var infoWindowzhengjia = new BMap.InfoWindow("总车位数:80.剩下:20.", optszhjia); // 创建信息窗口对象
markerzhengjia.openInfoWindow(infoWindowzhengjia); //开启信息窗口
//鼠标经过显示图片
var infoWindowzhengjiaxiao = new BMap.InfoWindow(zhengjiaContent); // 创建信息窗口对象
markerzhengjia.addEventListener("mouseover", function(){
this.openInfoWindow(infoWindowzhengjiaxiao);
//图片加载完毕重绘infowindow
document.getElementById('imgDemo').onload = function (){
infoWindowzhengjiaxiao.redraw(); //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
}
});
//鼠标离开时候
markerzhengjia.addEventListener("mouseout", function(){
this.openInfoWindow(infoWindowzhengjia,point);
});
//点击打开事件
markerzhengjia.addEventListener("click", function(){
window.open("http://www.baidu.com");
});
function showInfo(e){
alert(e.point.lng + ", " + e.point.lat);
}
map.addEventListener("click", showInfo);
</script>
第二种：
<!DOCTYPE html>
<html>
<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,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
#r-result{height:100%;width:20%;float:left;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=amy5lBMjH4C0AM6WtKAeEEXU"></script>
<title>添加多个标注点</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
var lngs=new Array(113.433402,113.333951); //经度 第一个是安居宝的
var lats=new Array(23.171994,23.138409); //纬度
var arrnames=new Array("安居宝","正佳"); //纬度
var strname="";
// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(23.171994,23.138409);
map.centerAndZoom(point, 15);
//初始化
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
point=r.point;
alert('您的位置：'+r.point.lng+','+r.point.lat);
}
else {
//alert('failed'+this.getStatus());
}
},{enableHighAccuracy: true});
map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
map.enableScrollWheelZoom(); //启用滚轮放大缩小
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("广州"); // 设置地图显示的城市 此项是必须设置的
// 编写自定义函数,创建标注
function addMarker(point,strname){
var sContent =
"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>"+strname+"</h4>" +
"<img style='float:right;margin:4px' id='imgDemo' src='http://app.baidu.com/map/images/tiananmen.jpg' width='139' height='104' title='天安门'/>" +
"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>天安门坐落在中国北京市中心,故宫的南侧,与天安门广场隔长安街相望,是清朝皇城的大门...</p>" +
"</div>";
var myIcon="";
var infoWindowmarker="";
if(strname=="安居宝"){
myIcon= new BMap.Icon("yellow.png", new BMap.Size(40,40)); //设置图标显示
infoWindowmarker = new BMap.InfoWindow("总车位数:80.剩下:20.", opt); // 创建信息窗口对象
}else{
myIcon= new BMap.Icon("red.png", new BMap.Size(40,40)); //设置图标显示
infoWindowmarker = new BMap.InfoWindow(strname+"停车场:总车位数:80.剩下:10.", opt); // 创建信息窗口对象
}
var label = new BMap.Label(strname,{"offset":new BMap.Size(-10,-20)});
var marker = new BMap.Marker(point,{icon:myIcon});
map.addOverlay(marker);
marker.setLabel(label); //设置标签
var opt = {
width : 200, // 信息窗口宽度
height: 60, // 信息窗口高度
title : strname , // 信息窗口标题
enableMessage:true,//设置允许信息窗发送短息
message:""
}
marker.openInfoWindow(infoWindowmarker); //开启信息窗口
//鼠标经过显示图片
var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象
marker.addEventListener("mouseover", function(){
marker.openInfoWindow(infoWindow);
//图片加载完毕重绘infowindow
document.getElementById('imgDemo').onload = function (){
infoWindow.redraw(); //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
}
});
//鼠标离开时候
marker.addEventListener("mouseout", function(){
marker.openInfoWindow(infoWindowmarker,point);
});
//点击打开事件
marker.addEventListener("click", function(){
window.open("http://www.baidu.com");
});
}
// 随机向地图添加25个标注
for (var i = 0; i < lngs.length; i ++) {
var point = new BMap.Point(lngs[i], lats[i]);
addMarker(point,arrnames[i]);
}
</script>
智能推荐
注意！
本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系我们删除。