1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.   <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
  6.     <meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
  7.     <title>百度地图API自定义地图</title>
  8.     <!--引用百度地图API-->
  9.     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=17b7Lhnf06x0CMZLI3aYn5ZIdMxfGcyc"></script>
  10.   </head>
  11.  
  12.   <body>
  13.     <!--百度地图容器-->
  14.     <div style="width:100%;height:550px;border:#ccc solid 1px;font-size:12px" id="map"></div>
  15.   </body>
  16.   <script type="text/javascript">
  17.     //创建和初始化地图函数：
  18.     function initMap(){
  19.       createMap();//创建地图
  20.       setMapEvent();//设置地图事件
  21.       addMapControl();//向地图添加控件
  22.       addMapOverlay();//向地图添加覆盖物
  23.     }
  24.     function createMap(){
  25.       map = new BMap.Map("map");
  26.       map.centerAndZoom(new BMap.Point(116.421218,40.068393),15);
  27.     }
  28.     function setMapEvent(){
  29.       map.enableScrollWheelZoom();
  30.       map.enableKeyboard();
  31.       map.enableDragging();
  32.       map.enableDoubleClickZoom()
  33.     }
  34.     function addClickHandler(target,window){
  35.       target.addEventListener("click",function(){
  36.         target.openInfoWindow(window);
  37.       });
  38.     }
  39.     function addMapOverlay(){
  40.       var markers = [
  41.         {content:"哈哈哈",title:"禹辰时代",imageOffset: {width:0,height:3},position:{lat:40.072424,lng:116.420931}}
  42.       ];
  43.       for(var index = 0; index < markers.length; index++ ){
  44.         var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat);
  45.         var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25),{
  46.           imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height)
  47.         })});
  48.         var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)});
  49.         var opts = {
  50.           width: 200,
  51.           title: markers[index].title,
  52.           enableMessage: false
  53.         };
  54.  
  55.         var mapStyle = { style: "dark" };
  56.         map.setMapStyle(mapStyle);
  57.  
  58.         var infoWindow = new BMap.InfoWindow(markers[index].content,opts);
  59.         marker.setLabel(label);
  60.         addClickHandler(marker,infoWindow);
  61.         map.addOverlay(marker);
  62.       };
  63.     }
  64.     //向地图添加控件
  65.     function addMapControl(){
  66.       var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
  67.       scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
  68.       map.addControl(scaleControl);
  69.       var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
  70.       map.addControl(navControl);
  71.       var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});
  72.       map.addControl(overviewControl);
  73.     }
  74.  
  75.     var map;
  76.       initMap();
  77.  
  78.   </script>
  79. </html>

重点：

一、在百度地图生成器中，生成你要的地址——http://api.map.baidu.com/lbsapi/createmap/index.html

二、需要在百度地开发平台图申请一个AccessKey 秘钥——http://lbsyun.baidu.com/apiconsole/key

创建应用的时候：选项如下图所示

三、在百度地图个性化模板列表选择你的样式——http://lbsyun.baidu.com/custom/list.htm

文件示例下载链接 ：https://i.cnblogs.com/Files.aspx

如何在网中使用百度地图API自定义个性化地图的更多相关文章

  1. HTM L百度地图API 自定义工具地图实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 百度地图API自定义地图

    http://api.map.baidu.com/lbsapi/creatmap/index.html http://developer.baidu.com/map/index.php?title=w ...

  3. 网页嵌入百度地图和使用百度地图api自定义地图的详细步骤

    在网页中插入百度地图 如果想在自己的网页上面加入百度地图的话,可以用百度地图的api.具体使用方法如下: 第一步:进入百度创建地图的网站http://api.map.baidu.com/lbsapi/ ...

  4. 记录开发基于百度地图API实现在地图上绘制轨迹并拾取轨迹对应经纬度的工具说明

    前言: 最近一直在做数据可视化方面的工作,其中平面可视化没什么难度,毕竟已经有很多成熟的可供使用的框架,比如百度的echart.js,highcharts.js等.还有就是3D可视化了,整体来说难度也 ...

  5. 百度LBS开放平台个性化地图 制作一款独一无二的地图

    百度LBS开放平台个性化地图  制作一款独一无二的地图 天天用百度地图的亲们是否已不再满足仅仅看例如以下的地图样式了呢? 默认百度地图样式 是否特别渴望看特别不一样的地图呢.如带京城81号气息的午夜蓝 ...

  6. 使用百度地图API进行Android地图应用开发（Eclipse）

    随着基于位置的服务的兴起,地图类App呈现爆发趋势.随着而来的是地图供应商开放大量的API.供开发人员开发基于PC或者移动端的应用程序. 如今我们研究使用百度地图SDK进行Android项目的开发. ...

  7. 百度地图API，展示地图和添加控件

    1.申请百度账号和AK 点我申请 2.准备页面 根据HTML标准,每一份HTML文档都应该声明正确的文档类型,我们建议您使用最新的符合HTML5规范的文档声明: <!DOCTYPE html&g ...

  8. 百度地图API 自定义标注图标

    通过Icon类可实现自定义标注的图标,下面示例通过参数MarkerOptions的icon属性进行设置, 也可以使用marker.setIcon()方法. <script type=" ...

  9. 百度地图API和高德地图API资料集锦

    [高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行   [高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自 ...

随机推荐

  1. Linux CentOS设置定时重启：crontab

    上一篇介绍了 开机自启动chkconfig命令  https://www.cnblogs.com/prefectjava/p/9399470.html 本篇介绍 crontab 设置定时任务,并且把 ...

  2. TensorFlow资料汇总

    升级mac自带的python 使用virtualenv进行python环境隔离 tf.nn.conv2d.卷积函数 max_pool 池化函数 TF.VARIABLE.TF.GET_VARIABLE. ...

  3. Windows中nvm使用

    介绍:在两个项目且使用的node版本不一样时,维护多个版本的node, 安装:下载安装目录:https://github.com/coreybutler/nvm-windows/releasesnvm ...

  4. 深海中的STL—mt19937

    mt19937 当你第一眼看到这玩意儿的时候 肯定禁不住吐槽:纳尼?这是什么鬼? 确实,这个东西鲜为人知,但是它却有着卓越的性能 简介 mt19937是c++11中加入的新特性 它是一种随机数算法,用 ...

  5. #WEB安全基础 : HTML/CSS | 0x10实现交互_表单

    先看看表单如何工作吧 请求   响应   简要工作流程: 浏览器加载页面 用户输入数据 用户提交表单 服务器响应 概念都清楚了,我们来写表单吧 只有一个html文件   这是显示   你可以向空白框框 ...

  6. C# MessageBox自动关闭

    本文以一个简单的小例子,介绍如何让MessageBox弹出的对话框,在几秒钟内自动关闭.特别是一些第三方插件(如:dll)弹出的对话框,最为适用.本文仅供学习分享使用,如有不足之处,还请指正. 概述 ...

  7. 小米6X手机解锁（bl锁）

    1. http://www.miui.com/unlock/index.html,申请解锁2. 手机:“设置 -> 更多设置 -> 开发者选项 -> 设备解锁状态”中绑定账号和设备. ...

  8. SQL Server Log Shipping学习总结

      SQL Server的日志传送(log shipping)技术一直比较鸡肋,尤其当SQL Server 推出了Always On技术以后,估计使用日志传送(log shipping)这种技术方案的 ...

  9. Java文件输入保存，统计某个字符串，统计所有字符串

    import java.io.*; import java.util.*; /** * Created by Admin on 2018/3/20. */ public class FileSaveT ...

  10. bug管理工具之禅道的测试模块的使用

    https://www.cnblogs.com/evablogs/p/6785017.html 角色:产品经理PO,项目经理PM,开发,测试 测试任务: bug: 1.维护bug视图模块:[测试]-[ ...