使用百度地图API根据坐标显示地图
2014-08-04 09:02
519 查看
第一种方法：
<!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");
v
4000
ar 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>
<!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");
v
4000
ar 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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 百度地图API二：根据标注点坐标范围计算显示缩放级别zoom自适应显示地图
- 百度地图API二：根据标注点坐标范围计算显示缩放级别zoom自适应显示地图
- 使用谷歌地图API根据坐标显示地图
- 根据百度地图API得到坐标和地址并在地图上显示
- 在ios中使用手机定位获得的经纬度坐标 通过 arcgis的api 显示在wgs84 坐标系的地图上。
- 安卓学习笔记：让自己显示在地图上(使用百度地图API)
- 根据坐标在地图上添加点、标注及热力图（百度地图API）
- 根据坐标点显示地图显示范围（高德地图）
- 根据数据库中提供的坐标（经纬度） 在前端地图上标示坐标点、并显示
- 百度地图api根据地图缩放等级显示不同的marker点，功能二
- 百度地图 根据标注点坐标范围计算显示缩放级别zoom自适应显示地图
- android菜鸟学习笔记30----Android使用百度地图API(一)准备工作及在应用中显示地图
- 根据地图上的两个点各自的x,y坐标，计算出2点之间的直线距离。显示为公里、米
- 百度地图api根据地图缩放等级显示不同的marker点
- Android Studio中使用百度地图API，不显示地图的问题解决办法
- 解决Android使用百度定位坐标显示到地图上偏移过大问题
- 百度地图API使用系列2-显示地图
- 百度地图的使用之获取数据库表中信息的坐标点显示在地图上
- (android 地图实战开发)2 创建MapActivity,根据设备当前位置，显示地图
- 显示鼠标在地图上的坐标