<!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. Java开发笔记（五十六）利用枚举类型实现高级常量

    前面介绍了联合利用final和static可实现常量的定义,该方式用于简单的常量倒还凑合,要是用于复杂的.安全性高的常量,那就力不从心了.例如以下几种情况,final结合static的方式便缺乏应对之 ...

  2. 【Java】数组转List常见方式的对比

    一.最常用通过 Arrays.asList(strArray) 方式,将数组转换List后,不能对List增删,只能查改,否则抛异常. 关键代码: List list = Arrays.asList( ...

  3. Mybatis框架基础支持层——反射工具箱之实体属性Property工具集（6）

    本篇主要介绍mybatis反射工具中用到的三个属性工具类:PropertyTokenizer.PropertyNamer.PropertyCopier. PropertyTokenizer: 主要用来 ...

  4. 关于mybatis条件查询 报错：元素内容必须由格式正确的字符数据或标记组成

    原查询 select sum(case when age<=16 then 1 else 0 end ) age1, sum(case when age>16 and age<=25 ...

  5. z-tree 回显所有选中的id

    //回显选择的checkbox函数 function treeHxIdFun(obj) { var objTree = $.fn.zTree.init($("#demo"), se ...

  6. Git 最佳实践：分支管理

    5月份,为统一团队git分支管理规范,刚开始准备自己写,在网上搜了下,发现不少不错的git分支管理实践.最后我为团队选择了这个git分支管理实践 A successful Git branching ...

  7. SC命令

    描述:         SC 是用来与服务控制管理器和服务进行通信         的命令行程序. 用法:         sc <server> [command] [service n ...

  8. C# Debug和release判断用法

    C# Debug和release判断用法 #if (!DEBUG) Response.Write("DEBUG下运行");#else Response.Write("re ...

  9. c/c++ 重载运算符 类型转换运算符

    重载运算符 类型转换运算符 问题:能不能把一个类型A的对象a,转换成另一个类型B的对象b呢?? 是可以的.这就必须要用类型A的类型转换运算符(conversion operator) 下面的opera ...

  10. drf 教程

    1, 序列化 Serialization 创建一个新环境 在做其他事之前,我们会用virtualenv创建一个新的虚拟环境.这将确保我们的包配置与我们正在工作的其他项目完全隔离. virtualenv ...