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


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中的立即执行函数表达式介绍
Mar 15 Javascript
基于javascript实现根据身份证号码识别性别和年龄
Jan 22 Javascript
jquery attr()设置和获取属性值实例教程
Sep 25 Javascript
JS实现动画兼容性的transition和transform实例分析
Dec 13 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
Jun 30 Javascript
web前端vue之vuex单独一文件使用方式实例详解
Jan 11 Javascript
jQuery UI实现动画效果代码分享
Aug 19 jQuery
详释JavaScript执行环境与执行栈
Apr 02 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 Javascript
一文看懂如何简单实现节流函数和防抖函数
Sep 05 Javascript
微信小程序如何播放腾讯视频的实现
Sep 20 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
Apr 29 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
mayfish 数据入库验证代码
2010/04/30 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
checkbox 复选框不能为空
2009/07/11 Javascript
jQuery对象和DOM对象使用说明
2010/06/25 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
json的定义、标准格式及json字符串检验
2014/05/11 Javascript
apply和call方法定义及apply和call方法的区别
2015/11/15 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
javascript正则表达式之分组概念与用法实例
2016/06/16 Javascript
jQuery基于ID调用指定iframe页面内的方法
2016/07/06 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
在localStorage中存储对象数组并读取的方法
2016/09/24 Javascript
使用Angular.js开发的注意事项
2016/10/19 Javascript
jQuery弹出层插件popShow(改进版)用法示例
2017/01/23 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
2017/04/25 Javascript
详解VueJs前后端分离跨域问题
2017/05/24 Javascript
AngularJS实现进度条功能示例
2017/07/05 Javascript
js数据类型检测总结
2018/08/05 Javascript
vuex 中插件的编写案例解析
2019/06/10 Javascript
Vue父子之间值传递的实例教程
2020/07/02 Javascript
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
Python os模块介绍
2014/11/30 Python
Python+selenium实现截图图片并保存截取的图片
2018/01/05 Python
替换python字典中的key值方法
2018/07/06 Python
Python3爬虫学习入门教程
2018/12/11 Python
Python生成器的使用方法和示例代码
2019/03/04 Python
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
MONNIER Frères英国官网:源自巴黎女士奢侈品配饰电商平台
2018/12/06 全球购物
Clarks其乐鞋荷兰官网:Clarks荷兰
2019/07/05 全球购物
大学生学习党课思想汇报
2014/01/03 职场文书
《三亚落日》教学反思
2014/04/26 职场文书
教师一帮一活动总结
2014/07/08 职场文书
地心历险记观后感
2015/06/15 职场文书
Python中的tkinter库简单案例详解
2022/01/22 Python