百度地图标注代码_<div style="width:700px;height:550px;border:#ccc s-程序员宅基地

技术标签: 前端日常笔记  JS  百度地图  

一、html代码

<!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=你的ak"></script>
  </head>
 
  <body>
    <!--百度地图容器-->
    <div style="width:700px;height:550px;border:#ccc solid 1px;font-size:12px" id="map"></div>
    <p style="color:red;font-weight:600">地图生成工具基于百度地图JS api v2.0版本开发,使用请申请密匙。
      <a href="http://developer.baidu.com/map/index.php?title=jspopular/guide/introduction" style="color:#2f83c7" target="_blank">了解如何申请密匙</a>
      <a href="http://lbsyun.baidu.com/apiconsole/key?application=key" style="color:#2f83c7" target="_blank">申请密匙</a>
    </p>
  </body>
  <script type="text/javascript">
    //创建和初始化地图函数:
    function initMap(){
      createMap();//创建地图
      setMapEvent();//设置地图事件
      addMapControl();//向地图添加控件
      addMapOverlay();//向地图添加覆盖物
    }
    function createMap(){
      map = new BMap.Map("map");
      map.centerAndZoom(new BMap.Point(115.654752,32.198709),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:32.192293,lng:115.66025}}
      ];
      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 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:0});
      map.addControl(navControl);
      var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:false});
      map.addControl(overviewControl);
    }
    var map;
      initMap();
  </script>
</html>

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/sinat_35656188/article/details/79259184

智能推荐

promise解决重复调用同一接口(同步)_promise.all并行调同一个接口-程序员宅基地

文章浏览阅读4.7k次。前端实现多次调用同一个接口,所有数据均成功返回后,才可继续执行下面的代码封装请求数据方法getData(param) { return new Promise((resolve, reject) => { this.$axios .get(`/xx/xx/xxpath/${param}`) .then(res => { let content = res.data reso_promise.all并行调同一个接口

socket编程种名字与地址转换函数_getservbyname是可重入函数吗-程序员宅基地

文章浏览阅读274次。参考:《UNIX 网络编程 · 卷1 : 套接字联网API》之前都是使用数值地址来表示主机(比如:127.0.0.1),用数值端口号来标识服务器(比如:6379)。但是有时候最好使用名字而不是数值:名字比较容易记住,数值地址容易变动,而名字地址保持不变;随着 IPv6 上转移,数值地址变得很长,手工键入数值容易出错。之后将有一系列函数用于名字、数值、端口之间的转换。gethostbyname & gethostbyaddr 函数gethostbyname 函数查找主机名字最基本的函数时 g_getservbyname是可重入函数吗

第一章 Java概述_第 1章java me的概述-程序员宅基地

文章浏览阅读436次。JavaSE结构•Java概述•Java编程基础•面向对象编程•异常处理•API常用类•多线程•容器类•I/O•网络编程•注解1 Java概述结构•1.1 软件编程常识•1.2 Java语言概述•1.3 Java体系结构•1.4 Java语言的跨平台特性•1.5 搭建Java程序的开发环境•1.6 Java程序开发体验_第 1章java me的概述

CSS 选取第几个标签元素_css 第几个几个div-程序员宅基地

文章浏览阅读1w次,点赞6次,收藏11次。在前端开发中,我们可能会碰到这样的需求:想让列表中的第一个部分显示不同的样式 ,想让列表中的偶数部分显示不同的背景颜色,想让列表中的最后一部分样式不一样……这样的需求,我们怎样来实现?其实,如果前面文件是php开发的,可以通过php的循环语句+判断语句+css样式来实现。但是,如果是静态代码,php就无法用了。这时,我们还可以通过CSS来实现,CSS给我们提供了几个非常有用的样式参数:first-..._css 第几个几个div

固定资产管理系统的打造-程序员宅基地

文章浏览阅读106次。固定资产管理总体分为两个部分:固定资产管理财务帐部分,固定资产管理实物帐部分。前者偏重价值管理,后者偏重实物管理,前者一般由财务部门负责,后者一般由行政部门负责。两部分信息又是紧密衔接相辅相成的,通过信息系统的..._crv管理系统

SAP MM 物料主数据MRP2 视图Rounding Value字段-程序员宅基地

文章浏览阅读639次。SAP MM 物料主数据MRP2 视图Rounding Value字段如下物料号,MRP2视图中,维护了rounding value字段值为50。MRP type..._sap mpr2视图

随便推点

单片机入门资料,按键消抖方式,按键怎么消抖_单片机按键消抖-程序员宅基地

文章浏览阅读1.2w次,点赞19次,收藏108次。1.什么是按键消我们先来看一下按键按下去的波形图1.按键消抖原理我们可以看到当按键按下的那一时刻和松开的时候有类似于锯齿的形状那就是按键抖动,这个抖动不是我们人为能控制得了的,所以我们只能对进行硬件消抖或者进行软件消抖本期我们讲解软件消抖.**上图中我们可以看到理想波形和实际波形有很大的区别,区别在于实际波形在按键按下的那一刻前后有20毫秒的抖动,我们按键消抖的目的呢就是把抖动忽略掉只要中间的稳定闭合区域.**## 方法一延时消抖法可以用延时的方式跳过抖动的区域优缺点:优点._单片机按键消抖

Image2Lcd图片取模软件-程序员宅基地

文章浏览阅读3.7w次,点赞73次,收藏265次。image2lcd是一款非常简单使用的图片转换成LCD图像数据的图片转换软件。它能够将各种形式来源的图片转换成特定的数据格式以用来匹配单片机系统所需要的显示数据格式。在输入方面,它支持JPG、BMP、EMF、WBMP、GIF、ICO等多种格式图片的输入,输出的数据拥有二进制类型、WBMP格式、C语言数组类型和标准的BMP格式等多种类型。同时它还能将图象的数据扫描方式、亮度、对比度、灰度(颜色数)以及图像数据排列方式等等进行调节。image2lcd v3.2破解版image2lcd是一款非常简单使_image2lcd

IOS里的TaggedPointer[NSNumber篇]_nsnumber的tagged pointer-程序员宅基地

文章浏览阅读1.9k次。转自:http://www.infoq.com/cn/articles/deep-understanding-of-tagged-pointer/前言在2013年9月,苹果推出了iPhone5s,与此同时,iPhone5s配备了首个采用64位架构的A7双核处理器,为了节省内存和提高执行效率,苹果提出了Tagged Pointer的概念。对于64位程序,引入Tagged Po_nsnumber的tagged pointer

BUUCTF_2.RIP覆盖一下_buuctf rip-程序员宅基地

文章浏览阅读3.7k次。解题思路1. 查看文件信息,安全机制2. 代码审计3. 分析漏洞点4. 编写EXP1.基本信息$checksec ./文件名2.代码审计不管在简单题都一定要IDA查看一下伪代码(IDA做好是7.0以上的版本)首先查看敏感字符串(Ctrl+1)1.gets从标准输入设备读字符串函数,其可以无限读取,不会判断上限,以回车结束读取,所以应该确保buffer的空间足够大,以便在执..._buuctf rip

curl_init()和curl_multi_init()多线程的速度比较_curl_multi_init c++-程序员宅基地

文章浏览阅读7k次。php中curl_init()的作用很大,尤其是在抓取网页内容或文件信息的时候,例如之前文章curl获得header检测GZip压缩的源代码就介绍到curl_init()的强大。curl_init()处理事物是单线程模式,如果需要对事务处理走多线程模式,那么php里提供了一个函数curl_multi_init()给我们,这就是多线程模式处理事务的函数。curl_init()与cur_curl_multi_init c++

execve系统调用_execve系统调用寄存器参数-程序员宅基地

文章浏览阅读2.6k次。sys_execve()在真正的开始执行系统调用函数之前,系统调用服务程序已经将一些系统调用的函数的参数传递给了相应的寄存器,比如这里的ebx,ecx,edx都分别保存了系统调用的参数,ebx保存的是第一个参数,依次类推(当然最多传递的参数个数不能大于5个),首先这个函数通过ebx获取需要执行的文件的绝对路径,他通过这样一个函数实现获取到文件名之后他就会调用do_execve();_execve系统调用寄存器参数

推荐文章

热门文章

相关标签