<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />

    <meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />

    <title>百度地图API自定义地图</title>

    <!--引用百度地图API-->

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=17b7Lhnf06x0CMZLI3aYn5ZIdMxfGcyc"></script>

  </head>

  <body>

    <!--百度地图容器-->

    <div style="width:100%;height:550px;border:#ccc solid 1px;font-size:12px" id="map"></div>

  </body>

  <script type="text/javascript">

    //创建和初始化地图函数：

    function initMap(){

      createMap();//创建地图

      setMapEvent();//设置地图事件

      addMapControl();//向地图添加控件

      addMapOverlay();//向地图添加覆盖物

    }

    function createMap(){

      map = new BMap.Map("map");

      map.centerAndZoom(new BMap.Point(116.421218,40.068393),15);

    }

    function setMapEvent(){

      map.enableScrollWheelZoom();

      map.enableKeyboard();

      map.enableDragging();

      map.enableDoubleClickZoom()

    }

    function addClickHandler(target,window){

      target.addEventListener("click",function(){

        target.openInfoWindow(window);

      });

    }

    function addMapOverlay(){

      var markers = [

        {content:"哈哈哈",title:"禹辰时代",imageOffset: {width:0,height:3},position:{lat:40.072424,lng:116.420931}}

      ];

      for(var index = 0; index < markers.length; index++ ){

        var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat);

        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),{

          imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height)

        })});

        var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)});

        var opts = {

          width: 200,

          title: markers[index].title,

          enableMessage: false

        };

        var mapStyle = { style: "dark" };

        map.setMapStyle(mapStyle);

        var infoWindow = new BMap.InfoWindow(markers[index].content,opts);

        marker.setLabel(label);

        addClickHandler(marker,infoWindow);

        map.addOverlay(marker);

      };

    }

    //向地图添加控件

    function addMapControl(){

      var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});

      scaleControl.setUnit(BMAP_UNIT_IMPERIAL);

      map.addControl(scaleControl);

      var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});

      map.addControl(navControl);

      var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});

      map.addControl(overviewControl);

    }

    var map;

      initMap();

  </script>

</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. 2018.12/17 function 的闭包

    1.闭包:函数在调用的时候会形成一个私有的作用域,对内部变量起到保护的作用,这就是闭包. 2.变量销毁: 1.人为销毁  var a=12; a=null 2.自然销毁  函数调用完成之后 浏览器会自 ...

  2. HTTPS 站点的性能优化

    HTTPS 站中的几大难题 性能,包括: HTTPS需要多次握手,因此网络耗时变长,用户从HTTP跳转到HTTPS需要一些时间: HTTPS要做RSA校验,这会影响到设备性能: 所有CDN节点要支持H ...

  3. 深海中的STL—nth_element

    如果让你求区间第\(k\)大,你会怎么做呢? 主席树?确实是个不错的选择(不过像我这种垃圾还是乖乖打暴力吧) 在c++的stl库中,提供了nth_element这样一个函数 它的用法是nth_elem ...

  4. 集成Android人脸识别demo分享

    本应用来源于虹软人工智能开放平台,人脸识别技术工程如何使用? 1.下载代码 git clone https://github.com/andyxm/ArcFaceDemo.git 2.下载虹软人脸识别 ...

  5. Redis压缩列表

    此篇文章是主要介绍Redis在数据存储方面的其中一种方式,压缩列表.本文会介绍1. 压缩列表(ziplist)的使用场景 2.如何达到节约内存的效果?3.压缩列表的存储格式 4. 连锁更新的问题  5 ...

  6. Python使用Plotly绘图工具，绘制水平条形图

    水平条形图与绘制柱状图类似,大家可以先看看我之前写的博客,如何绘制柱状图 水平条形图需要在Bar函数中设置orientation= 'h' 其他的参数与柱状图相同.也可以通过设置barmode = ' ...

  7. 中文乱码之《字符编码：ASCII，Unicode 和 UTF-8》

    参考文献:字符编码笔记:ASCII,Unicode 和 UTF-8 一.ASCII 码 我们知道,计算机内部,所有信息最终都是一个二进制值.每一个二进制位(bit)有0和1两种状态,因此八个二进制位就 ...

  8. 推荐一款关于MongoDB日志分析的工具--Mtools

    一. 需求背景 MongoDB数据库的强大的文档模型使其成为处理数据的最佳方式.文档适用于广泛的流行数据模型,支持各种各样的场景.文档模型可以包含键值.关系数据集和图形数据集,当然,还可以包含父子关系 ...

  9. 一个磁盘I/O故障导致的AlwaysOn FailOver 过程梳理和分析

    下面是我们在使用AlwaysOn过程中遇到的一个切换案例.这个案例发生在2014年8月,虽然时间相对久远了,但是对我们学习理解AlwaysOn的FailOver原理和过程还是很有帮助的.本次FailO ...

  10. access denied for user 'root'@'localhost'(using password:YES) FOR WINDOWS

    以windows为例: mysql5.5 1. 关闭正在运行的MySQL服务. 2. 打开DOS窗口,转到mysql\bin目录. 3. 输入mysqld --skip-grant-tables 回车 ...