你的位置:首页 > 互联网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>


QQ截图20201108100937.jpg 网站地图,网站公司地图标注,百度地图标注的实现方法 互联网IT

  • 发表评论
  • 查看评论
【暂无评论!】

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。