<!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. python多线程爬虫+批量下载斗图啦图片项目（关注、持续更新）

    python多线程爬虫项目() 爬取目标:斗图啦(起始url:http://www.doutula.com/photo/list/?page=1) 爬取内容:斗图啦全网图片 使用工具:requests ...

  2. Dynamics 365 Customer Engagement V9 活动源功能报错的解决方法

    微软动态CRM专家罗勇 ,回复300或者20190120可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me!我的网站是 www.luoyong.me . 安装好Dynamic ...

  3. Dynamics 365的审核日志分区删除超时报错怎么办？

    摘要: 本人微信公众号:微软动态CRM专家罗勇 ,回复296或者20190112可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me!我的网站是 www.luoyong.me ...

  4. 广州.NET微软技术俱乐部与其他技术群的区别

    .NET和微软技术相关的微信群有不少, 那么广州.NET微软技术俱乐部与其他技术群的区别是什么呢? 有十分大的区别! 本群公告写得很清楚! 本群坚决禁止讨论“JAVA和.NET哪个好”.“NET有没有 ...

  5. 钉钉JSAPI前端鉴权

    钉钉二次开发分为如下表所示三种类型的开发,只有企业内部应用才需要对JSAPI鉴权. 类型 开发方式 JSAPI鉴权 应用场景 第三方企业应用 E应用开发 不需要 用于发布到钉钉应用市场,供广大用户下载 ...

  6. Valgrind.Callgrind使用

    Callgrind介绍 用来对统计程序的函数调用之间的关系, 并统计每个函数的耗时 Callgrind之所以能够发现函数调用的关系, 依赖于平台的明确返回和调用指令. 在x86和amd64平台上wor ...

  7. (详细)华为畅享7 SLA-AL00的usb调试模式在哪里打开的流程

    就在我们使用Pc链上安卓手机的时候,如果手机没有开启usb开发者调试模式,Pc则不能够成功检测到我们的手机,有时我们使用的一些功能比较好的的应用软件如之前我们使用的一个应用软件引号精灵,老版本就需要打 ...

  8. Android .9.png 的介绍

    概述 .9.PNG是安卓开发里面的一种特殊的图片,这种格式的图片通过ADT自带的编辑工具生成,使用九宫格切分的方法.点九图是一种可拉伸的位图,android会自动调整它的大小,来使图像在充当背景时可以 ...

  9. C++ 浅拷贝与深拷贝探究

    C++浅拷贝与深拷贝探究 浅拷贝与深拷贝的概念是在类的复制/拷贝构造函数中出现的. 拷贝构造函数使用场景 对象作为参数,以值传递方式传入函数(要调用拷贝构造函数将实参拷贝给函数栈中的形参) 对象作为返 ...

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

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