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


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获得地址栏参数的两种方法
Nov 08 Javascript
慎用 somefunction.prototype 分析
Jun 02 Javascript
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
Jul 13 Javascript
js检查页面上有无重复id的实现代码
Jul 17 Javascript
jquery实现浮动的侧栏实例
Jun 25 Javascript
判断JS对象是否拥有某属性的方法推荐
May 12 Javascript
JavaScript实现窗口抖动效果
Oct 19 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
Jun 17 Javascript
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
vue-cli脚手架-bulid下的配置文件
Mar 27 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
Sep 25 Javascript
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
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使用feof()函数读文件的方法
2014/11/07 PHP
php中删除数组的第一个元素和最后一个元素的函数
2015/03/07 PHP
PHP的Yii框架中View视图的使用进阶
2016/03/29 PHP
关于php开启错误提示的总结
2019/09/24 PHP
解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
2019/10/16 PHP
Javascript 遍历对象中的子对象
2009/07/03 Javascript
JQuery下关于$.Ready()的分析
2009/12/13 Javascript
原生javascript兼容性测试实例
2013/07/01 Javascript
js动态切换图片的方法
2015/01/20 Javascript
jQuery实现列表内容的动态载入特效
2015/08/08 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
2015/11/03 Javascript
javascript 用函数实现继承详解
2016/05/28 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
vue实现分页组件
2020/06/16 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
JavaScript获取某一天所在的星期
2019/09/05 Javascript
通过Kettle自定义jar包供javascript使用
2020/01/29 Javascript
基于Python代码编辑器的选用(详解)
2017/09/13 Python
python pandas 组内排序、单组排序、标号的实例
2018/04/12 Python
快速解决pandas.read_csv()乱码的问题
2018/06/15 Python
Centos下实现安装Python3.6和Python2共存
2018/08/15 Python
解决python selenium3启动不了firefox的问题
2018/10/13 Python
Python提取支付宝和微信支付二维码的示例代码
2019/02/15 Python
Python3.5集合及其常见运算实例详解
2019/05/01 Python
Python OpenCV 调用摄像头并截图保存功能的实现代码
2019/07/02 Python
使用NumPy读取MNIST数据的实现代码示例
2019/11/20 Python
Python安装OpenCV的示例代码
2020/03/05 Python
Java面试题:Java类的Main方法如果是Private将会怎么样
2016/08/18 面试题
人力资源专业推荐信
2013/11/29 职场文书
五一家具促销方案
2014/01/10 职场文书
环卫工人先进事迹材料
2014/06/02 职场文书
初中生考试作弊检讨书
2014/12/14 职场文书
初中政治教学工作总结
2015/08/13 职场文书
六一儿童节致辞稿(3篇)
2019/07/11 职场文书
Python中requests做接口测试的方法
2021/05/30 Python