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

第一步:进入百度创建地图的网站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>

以上就是本文的全部内容,希望对大家有所帮助,谢谢对我们的支持!

(0)

相关推荐

  • jsp使用ECharts动态在地图上标识点

    ECharts可以很方便的在网页上绘制地图,图表,并且可以提供下载图像,放大,缩小,拖动等功能,今天主要说一下它的地图类型(type:'map')是如何实现的. 首先在ECharts地图的坐标需要我们存储在一个geoCoord属性里,它是一个JS的字典对象,由键/值对组成,键表示点的名称,值则表达它的坐标,由经纬度组成,它是一个数组,如[136.00,32.00]它就表示了一个坐标. 地图类型的图表需要关注的元素 title:标题,显示这个地图所表示的名称 title: { text: '清大云

  • AngularJS 与百度地图的结合实例

    我现在做的一个项目是angular,但是我用直接引用百度地图的方法引进js,写html,js代码,发现,我去,报错了,我一开始还以为是百度地图跟angular有冲突,然后我就去搜索啊,发现angular也有一个百度地图插件,无奈我用了报错了,网上说要用angular2版本才能兼容,但是我又不会下载2版本,所以我就放弃了,然后呢,我又去解决我一开始的那个错误了,发现,玛德我傻逼了,首先来说一下百度地图怎么用吧,很简单,上代码 首先引入js <script type="text/javascr

  • 微信小程序 地图定位简单实例

    微信小程序开发地图定位. 微信小程序 刚刚公布没多久,自己学习一下内容,以便以后的开发,想落后别人,这里做了一个简单的小程序示例,大家可以参考下 要求要完成的功能: 1.要完成的要点是城市定位. 2.就是切换城市. 首页我们先参照微信小程序开放的官方文档找到: 在这里我们可以找到"当前位置经纬度" getLocation: function () { var that = this wx.getLocation( { success: function (res) { console.

  • 微信小程序教程之本地图片上传(leancloud)实例详解

    微信小程序 leancloud --本地图片上传 由于本站最近学习微信小程序的知识,这里记录下微信小程序实现本地上传的功能实现方法,以下是网上找的资料,大家看下. 将本地图片上传至leancloud后台. 获取本地图片或者拍照,我在上一篇博文中写过.这里就不说了.我的博客 直接上代码: 1.index.js //index.js //获取应用实例 var app = getApp() const AV = require('../../utils/av-weapp.js'); Page({ da

  • JS代码实现百度地图 画圆 删除标注

    把下面这段代码复制到百度地图的demo中运行,效果就是我想设计的效果. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-sc

  • 微信小程序 wxapp地图 map详解

    微信小程序 wxapp地图 map: map 属性名 类型 默认值 说明 longitude Number   中心经度 latitude Number   中心纬度 scale Number 1 缩放级别 markers Array   标记点 covers Array   覆盖物 标记点 标记点用于在地图上显示标记的位置,不能自定义图标和样式 属性 说明 类型 必填 备注 latitude 纬度 Number 是 浮点数,范围 -90 ~ 90 longitude 经度 Number 是 浮

  • js实现百度地图同时显示多个路书效果

    本文介绍了js实现百度地图同时显示多个路书效果,主要是以自行车的还车地点作为实例,具体代码如下: 启动路书: <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=自己的ak"></script> <script type="text/javascript" src="js/lushu.js"&g

  • 微信小程序 地图(map)实例详解

    微信小程序 地图(map)实例 这里是小编对微信小程序 地图(map API )做的资料整理,获取当前的地址,应该如何实现的实例,大家可以看下. 今天做到地图定位的模块.模拟器肯定是获取不到位置的.下面为真机测试结果. 上图: 经纬度不说了.定位用的,我这里直接输入的数字定位.但是有许多问题 下图中scale是缩放比例,这个属性目前无效.后期微信团队应该会修复.毕竟现在刚开始公测.这样就导致我不管怎么修改scale,我的地图都是在默认的缩放比例.如上图. markers中的rotate是图标的旋

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

    第一步:进入百度创建地图的网站http://api.map.baidu.com/lbsapi/creatmap/,搜索出自己要展示的位置,如下图所示. 第二步:设置地图,大家可以对网站显示地图的宽高进行设置,其余选项不动. 第三步:添加标注.点击第一个图标后,在右侧找到自己的位置,单击鼠标左键可定位.标记图标处可更换图标形状,名称和备注填入位置相关信息. 第四步:获取代码.将代码贴到你的网页里 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra

  • java 中JDBC连接数据库代码和步骤详解及实例代码

    java 中JDBC连接数据库代码和步骤详解 JDBC连接数据库 •创建一个以JDBC连接数据库的程序,包含7个步骤:  1.加载JDBC驱动程序:  在连接数据库之前,首先要加载想要连接的数据库的驱动到JVM(Java虚拟机),这通过java.lang.Class类的静态方法forName(String  className)实现. 例如: try{ //加载MySql的驱动类 Class.forName("com.mysql.jdbc.Driver") ; }catch(Class

  • vue项目中使用tinymce编辑器的步骤详解

    Tinymce富文本也是一款很流行编辑器 把文件放在static下,然后在index.html文件中引入这个文件 <script src="static/tinymce/tinymce.min.js"></script> <tinymce :height=200 ref="editor" v-model="editForm.fdcNote"></tinymce> 在其他子文件中引入这个 import

  • 在eclipse中安装Scala环境的步骤详解

    1安装eclipse插件步骤,点击help,选择Eclipse Marketplace 2.输入Scala,点击go 3.选择搜索到的Scala IDE 4.7.x,点击install下载. 4.等待进度条加载完,选择全部,之后点击confirm,之后选择同意 5.等待下载完毕,重启即可 另外 1.导入scala项目后可能报错,会不识别,右键configure--选中Add Scala Nuture,错误就没了 2.运行scala项目时,会出现找不到类或无法加载主类,这是由于eclipse没有编

  • C#中调整图像大小的步骤详解

    在本篇文章中,我将介绍如何在C#中来调整你想要的图像大小.要实现这一目标,我们可以采取以下几个步骤: 1.首先要获取你想要调整大小的图像: string path = Server.MapPath("~/Images"); System.Drawing.Image img = System.Drawing.Image.FromFile(string.Concat(path,"/3904.jpg")); 2.将图像转换为Bitmap: Bitmap b = new B

  • 基于Android实现百度地图定位过程详解

    一.问题描述 LBS位置服务是android应用中重要的功能,应用越来越广泛,下面我们逐步学习和实现lbs相关的应用如定位.地图.导航等,首先我们看如何基于百度地图实现定位功能 二.配置环境 1.注册密钥:地址http://developer.baidu.com/map/ 2.下载定位SDK,并导入SDK如图所示: 三.编写MyApplication类 编写MyApplication类,为了使用方便我们可以将实现定位的方法封装的Application组件中 封装下列方法 1.  获取定位信息--

  • iOS百度地图简单使用详解

    百度地图 iOS SDK是一套基于iOS 5.0及以上版本设备的应用程序接口,不仅提供展示地图的基本接口,还提供POI检索.路径规划.地图标注.离线地图.定位.周边雷达等丰富的LBS能力 . 今天主要介绍以下接口 基础地图 POI检索 定位 首先配置环境 1.自动配置.framework形式开发包(使用CocoaPods)<推荐> 2.手动配置.framework形式开发包 特别注意: (API里有很多注意点,大家可以具体去看.但是我说的后两点少其中一个都会失败,第一点是有需求的话,必须加上)

  • vue百度地图 + 定位的详解

    vue 百度地图 + 定位 前提需要自己有百度的密钥,如没有可以去百度地图申请 一.在主目录下的index.html引入js,例如:   二.在webpack.base.conf.js配置文件中配置BMap,在module.exports 中与entry平级,例如: 三.在项目中引入BMap: 四.代码: <template> <div class="home"> <div id="allmap" class="allmap&

  • BootStrap网页中代码显示<code><pre>用法详解

    网页中代码的显示,包括行中代码显示:成段的代码显示,效果图如下 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <% String path = request.getContextPath(); String basePath = request.getScheme

  • Android项目中使用HTTPS配置的步骤详解

    前言 如果你的项目的网络框架是okhttp,那么使用https还是挺简单的,因为okhttp默认支持HTTPS.传送门 下面话不多说了,来一起看看详细的介绍: Android 使用 HTTPS 配置的步骤. 1.step 配置hostnameVerifier new HostnameVerifier() { @Override public boolean verify(String hostname, SSLSession session) { return true; } }: 2.step

随机推荐