在网页中插入百度地图的步骤详解


Posted in Javascript onDecember 02, 2016

第一步:进入百度创建地图的网站http://api.map.baidu.com/lbsapi/creatmap/,搜索出自己要展示的位置,如下图所示。

在网页中插入百度地图的步骤详解

第二步:设置地图,大家可以对网站显示地图的宽高进行设置,其余选项不动。

第三步:添加标注。点击第一个图标后,在右侧找到自己的位置,单击鼠标左键可定位。标记图标处可更换图标形状,名称和备注填入位置相关信息。

第四步:获取代码。将代码贴到你的网页里

<!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=gb2312" />
<meta name="keywords" content="百度地图,百度地图API,百度地图自定义工具,百度地图所见即所得工具" />
<meta name="description" content="百度地图API自定义地图,帮助用户在可视化操作下生成百度地图" />
<title>百度地图API自定义地图</title>
<!--引用百度地图API-->
<style type="text/css">
 html,body{margin:0;padding:0;}
 .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
 .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
</head>
<body>
 <!--百度地图容器-->
 <div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>
</body>
<script type="text/javascript">
 //创建和初始化地图函数:
 function initMap(){
  createMap();//创建地图
  setMapEvent();//设置地图事件
  addMapControl();//向地图添加控件
  addMarker();//向地图中添加marker
 } 
 //创建地图函数:
 function createMap(){
  var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
  var point = new BMap.Point(118.756884,31.981589);//定义一个中心点坐标
  map.centerAndZoom(point,16);//设定地图的中心点和坐标并将地图显示在地图容器中
  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);
 } 
 //标注点数组
 var markerArr = [{title:"大数据",content:"我的备注",point:"118.758986|31.978442",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}
   ];
 //创建marker
 function addMarker(){
  for(var i=0;i<markerArr.length;i++){
   var json = markerArr[i];
   var p0 = json.point.split("|")[0];
   var p1 = json.point.split("|")[1];
   var point = new BMap.Point(p0,p1);
   var iconImg = createIcon(json.icon);
   var marker = new BMap.Marker(point,{icon:iconImg});
   var iw = createInfoWindow(i);
   var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
   marker.setLabel(label);
   map.addOverlay(marker);
   label.setStyle({
      borderColor:"#808080",
      color:"#333",
      cursor:"pointer"
   });   
   (function(){
    var index = i;
    var _iw = createInfoWindow(i);
    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);
    })
    if(!!json.isOpen){
     label.hide();
     _marker.openInfoWindow(_iw);
    }
   })()
  }
 }
 //创建InfoWindow
 function createInfoWindow(i){
  var json = markerArr[i];
  var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
  return iw;
 }
 //创建一个Icon
 function createIcon(json){
  var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
  return icon;
 } 
 initMap();//创建和初始化地图
</script>
</html>

以上就是本文的全部内容,希望对大家有所帮助,谢谢对三水点靠木的支持!

Javascript 相关文章推荐
JavaScript中的类数组对象介绍
Dec 30 Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 Javascript
js+html5实现可在手机上玩的拼图游戏
Jul 17 Javascript
深入理解javascript中concat方法
Dec 12 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
Jan 06 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
通过命令行生成vue项目框架的方法
Jul 12 Javascript
微信小程序 动画的简单实例
Oct 12 Javascript
Angularjs中date过滤器失效的问题及解决方法
Jul 06 Javascript
VSCode 配置uni-app的方法
Jul 11 Javascript
vant自定义二级菜单操作
Nov 02 Javascript
ant design的table组件实现全选功能以及自定义分页
Nov 17 Javascript
PHP获取当前页面完整URL的方法
Dec 02 #Javascript
jQuery插件fullPage.js实现全屏滚动效果
Dec 02 #Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
Dec 02 #Javascript
jquery实现图片列表鼠标移入微动
Dec 01 #Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 #Javascript
IE8兼容Jquery.validate.js的问题
Dec 01 #Javascript
利用JQuery阻止事件冒泡
Dec 01 #Javascript
You might like
php 文章调用类代码
2011/08/11 PHP
PHP安全配置详细说明
2011/09/26 PHP
php学习笔记之面向对象编程
2012/12/29 PHP
php的GD库imagettftext函数解决中文乱码问题
2015/01/24 PHP
在线编辑器中换行与内容自动提取
2009/04/24 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
2013/03/05 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
2015/09/27 Javascript
jQuery实现立体式数字动态增加(animate方法)
2016/12/21 Javascript
Node 自动化部署的方法
2017/10/17 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
详解webpack babel的配置
2018/01/09 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
详解babel升级到7.X采坑总结
2019/05/12 Javascript
Vue实现日历小插件
2019/06/26 Javascript
layui prompt 设置允许空白提交的方法
2019/09/24 Javascript
一篇不错的Python入门教程
2007/02/08 Python
Python IDE PyCharm的基本快捷键和配置简介
2015/11/04 Python
Python对文件和目录进行操作的方法(file对象/os/os.path/shutil 模块)
2017/05/08 Python
Python简单生成随机姓名的方法示例
2017/12/27 Python
Python简易版停车管理系统
2019/08/12 Python
pytorch使用指定GPU训练的实例
2019/08/19 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
波兰电子产品购物网站:Vobis
2019/05/26 全球购物
印度排名第一的蛋糕、鲜花和礼品送货:Winni
2019/08/02 全球购物
外贸业务员求职信范文
2013/12/12 职场文书
本科毕业生求职自荐信
2014/04/09 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书
乡镇保密工作承诺书
2015/05/04 职场文书
单位计划生育责任书
2015/05/09 职场文书
2016年全国爱眼日宣传教育活动总结
2016/04/05 职场文书
2019年国庆祝福语(70句)
2019/09/19 职场文书
如何用JavaScript检测当前浏览器是无头浏览器
2021/04/27 Javascript
Linux服务器离线安装 nginx的详细步骤
2022/06/16 Servers