你的位置：首页 > 互联网IT
网站地图，网站公司地图标注，百度地图标注的实现方法
网站：html代码
新建网页，ditu.html
代码如下：
<html>
<script src="http://api.map.baidu.com/api?v=1.4"></script>
<style>
#mapbox{width:99%;height:500px;overflow:hidden;border:1px solid #ccc;}
</style>
<div id="mapbox"></div>
<script>
var map = new BMap.Map("mapbox"); // 创建Map实例，必须和地图容器id一致
var point = new BMap.Point(113.886699,22.570609); // 创建点坐标
map.centerAndZoom(point,16); // 初始化地图,设置中心点坐标和地图级别，最大19级
map.enableScrollWheelZoom(); //启用滚轮放大缩小
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(42,26), {
offset: new BMap.Size(0,0), // 指定定位位置
imageOffset: new BMap.Size(-21,0) // 设置图片偏移
});
var marker = new BMap.Marker(point,{ icon: myIcon });
map.addOverlay(marker);
var infoWinOpts = {}
var sitetxt="<div style='text-align:left;color:#333;line-height:25px;'><li>地址：广东省深圳市裕丰花园-西区-5号楼 </li><li>电话：13888888899</li></div>";
var infoWin = new BMap.InfoWindow(sitetxt,infoWinOpts);
marker.openInfoWindow(infoWin);
marker.addEventListener("click",function(){this.openInfoWindow(infoWin);});//注册点击事件
</script>
</html>
说明：
步骤1：加载百度地图js框架
<script src="http://api.map.baidu.com/api?v=1.4"></script>
步骤2：写好地图容器标签，html代码如下
<style>
#mapbox{width:99%;height:500px;overflow:hidden;border:1px solid #ccc;}
</style>
<div id="mapbox"></div>
步骤3：js初始化地图并标注，坐标点拾取地址：http://api.map.baidu.com/lbsapi/getpoint/index.html
<script>
var map = new BMap.Map("mapbox"); // 创建Map实例，必须和地图容器id一致
var point = new BMap.Point(113.886699,22.570609); // 创建点坐标
map.centerAndZoom(point,16); // 初始化地图,设置中心点坐标和地图级别，最大19级
map.enableScrollWheelZoom(); //启用滚轮放大缩小
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(42,26), {
offset: new BMap.Size(0,0), // 指定定位位置
imageOffset: new BMap.Size(-21,0) // 设置图片偏移
});
var marker = new BMap.Marker(point,{ icon: myIcon });
map.addOverlay(marker);
var infoWinOpts = {}
var sitetxt="<div style='text-align:left;color:#333;line-height:25px;'><li>地址：广东省深圳市裕丰花园-西区-5号楼 </li><li>QQ：378046089</li></div>";
var infoWin = new BMap.InfoWindow(sitetxt,infoWinOpts);
marker.openInfoWindow(infoWin);
marker.addEventListener("click",function(){this.openInfoWindow(infoWin);});//注册点击事件
</script>
- 发表评论
- 查看评论
【暂无评论！】发表评论: