效果如下:

1.获取位置的经纬度:

如坐标：114.110033,22.541098

获取经纬度：

http://api.map.baidu.com/lbsapi/getpoint/index.html

2.html代码:

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

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

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

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

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

<title>公司地图</title>

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

<style type="text/css">

    html,body

    {

        margin:0;

        padding:0;

    }

    .iw_poi_title

    {

        color:#CC5522;

        font-size:14px;

        font-weight:bold;

        overflow:hidden;

        padding-right:13px;

        white-space:nowrap

    }

    .iw_poi_content

    {

        font:12px arial,sans-serif;

        overflow:visible;

        padding-top:4px;

        white-space:-moz-pre-wrap;

        word-wrap:break-word

    }

</style>

<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>

</head>

<body>

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

  <div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>

</body>

    <script type="text/javascript">

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

        function initMap(){

            createMap();//创建地图

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

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

            addMarker();//向地图中添加marker

        }

        //创建地图函数：

        function createMap(){

            var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图

            var point = new BMap.Point(113.871998,22.657299);//定义一个中心点坐标

            map.centerAndZoom(point,18);//设定地图的中心点和坐标并将地图显示在地图容器中

            window.map = map;//将map变量存储在全局

        }

        //地图事件设置函数：

        function setMapEvent(){

            map.enableDragging();//启用地图拖拽事件，默认启用(可不写)

            map.enableScrollWheelZoom();//启用地图滚轮放大缩小

            map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)

            map.enableKeyboard();//启用键盘上下左右键移动地图

        }

        //地图控件添加函数：

        function addMapControl(){

            //向地图中添加缩放控件

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

        map.addControl(ctrl_nav);

                    }

        //标注点数组

        var markerArr = [{title:"定位位置名称",content:"我的备注",point:"113.871566|22.657115",isOpen:0,icon:{w:23,h:25,l:46,t:21,x:9,lb:12}}

             ];

        //创建marker

        function addMarker(){

            for(var i=0;i<markerArr.length;i++){

                var json = markerArr[i];

                var p0 = json.point.split("|")[0];

                var p1 = json.point.split("|")[1];

                var point = new BMap.Point(p0,p1);

                var iconImg = createIcon(json.icon);

                var marker = new BMap.Marker(point,{icon:iconImg});

                var iw = createInfoWindow(i);

                var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});

                marker.setLabel(label);

                map.addOverlay(marker);

                label.setStyle({

                            borderColor:"#808080",

                            color:"#333",

                            cursor:"pointer"

                });

                (function(){

                    var index = i;

                    var _iw = createInfoWindow(i);

                    var _marker = marker;

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

                        this.openInfoWindow(_iw);

                    });

                    _iw.addEventListener("open",function(){

                        _marker.getLabel().hide();

                    })

                    _iw.addEventListener("close",function(){

                        _marker.getLabel().show();

                    })

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

                        _marker.openInfoWindow(_iw);

                    })

                    if(!!json.isOpen){

                        label.hide();

                        _marker.openInfoWindow(_iw);

                    }

                })()

            }

        }

        //创建InfoWindow

        function createInfoWindow(i){

            var json = markerArr[i];

            var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");

            return iw;

        }

        //创建一个Icon

        function createIcon(json){

            var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})

            return icon;

        }

        initMap();//创建和初始化地图

    </script>

</html>

百度地图web api使用案例的更多相关文章

  1. C#怎么调用百度地图Web API

    直接上代码: public ActionResult FindMileage() { string s; HttpWebRequest req = (HttpWebRequest)HttpWebReq ...

  2. 带有定位当前位置的百度地图web api 前端代码

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta name="viewport& ...

  3. 【完全开源】百度地图Web service API C#.NET版，带地图显示控件、导航控件、POI查找控件

    目录 概述 功能 如何使用 参考帮助 概述 源代码主要包含三个项目,BMap.NET.BMap.NET.WindowsForm以及BMap.NET.WinformDemo. BMap.NET 对百度地 ...

  4. C# 调用百度地图Web服务API

    最近公司项目中需要根据两个地点的交通路径和距离做一些数据推荐,为了程序的稳定和用户体验所以想从百度地图 API 采集数据保存到数据库中,经过一翻研究之后选定了百度地图 Web 服务 API 中的 Di ...

  5. C# 调用百度地图 Web 服务 API

    最近公司项目中需要根据两个地点的交通路径和距离做一些数据推荐,为了程序的稳定和用户体验所以想从百度地图 API 采集数据保存到数据库中,经过一翻研究之后选定了百度地图 Web 服务 API 中的 Di ...

  6. 【转】【完全开源】百度地图Web service API C#.NET版，带地图显示控件、导航控件、POI查找控件

    [转][完全开源]百度地图Web service API C#.NET版,带地图显示控件.导航控件.POI查找控件 目录 概述 功能 如何使用 参考帮助 概述 源代码主要包含三个项目,BMap.NET ...

  7. 如何结合自己本地数据库，使用【百度地图】API

    如何结合自己本地数据库,使用[百度地图]API百度地图使用越来越多,官网上的示例数据都是写死的,实际上我们的开发中的数据都是从数据库中取出来的,最近看了很多大神的文章,结合自己本地数据库使用百度地图A ...

  8. 百度地图JavaScript API覆盖物旋转时出现偏移

    在项目中,调用百度地图JavaScript API,做覆盖物的旋转再添加到地图上,结果出现偏移了. 调试过程中的效果图: 发现图片的旋转并不是按车子的中心来的,而是之外的一个点.最后发现犯了一个很细节 ...

  9. 百度地图代码API

    百度地图代码API: http://api.map.baidu.com/lbsapi/creatmap/index.html

随机推荐

  1. 在centos7下用http搭建配置svn服务

    应用场景:SVN是Subversion的简称,是一个开放源代码的版本控制系统. 安装环境:centos7  //已关闭 Selinux和 Firewall 配置步骤: 1. 安装HTTP和SVN相关软 ...

  2. Python中Scrapy框架元素选择器XPath的简单实例

    原文标题:<Python网络爬虫-Scrapy的选择器Xpath> 对原文有所修改和演绎 优势 XPath相较于CSS选择器,可以更方便的选取 没有id class name属性的标签 属 ...

  3. CF1080F Katya and Segments Sets

    题意:给定n个区间,每个区间有颜色.m次询问,每次询问:这n个区间中所有被包含在[x, y]这一区间中的区间,它们的颜色是否取遍了[l, r]中的所有颜色. 强制在线. 解:第一步是大家都熟悉的套路⑧ ...

  4. 【洛谷P4462】异或序列

    题目大意:给定一个长度为 N 的序列,有 M 组询问,每组询问查询区间 [l,r] 内异或和等于给定常数 K 的区间组数. 题解:对于异或和问题,一般先进行前缀和处理,转化为两个点的的关系.因此,经过 ...

  5. Django（四）框架之第三篇模板语法

    https://www.cnblogs.com/yuanchenqi/articles/6083427.htm https://www.cnblogs.com/haiyan123/p/7725568. ...

  6. ajax多表单序列化

    今天在修一个后台接收参数为空值的bug 找了好久才发现原来是form表单合拼参数的时候把参数给搞没了 (我也不知道为什么啊—_—!) //对表单进行Json对象序列化 (function($){ $. ...

  7. 用css巧妙实现移动端横向滑动展示功能

    前言:记得以前处理移动端横向滑动展示都是去用js去解决的,要用js进行蛮多处理,要算li的宽度,然后还要用js设置ul盒子的宽度,又要设置最大滑动距离,最小滑动距离等等.......但是现在发现用cs ...

  8. 1、CC2530单片机介绍

    单片机是一种集成电路芯片,包含中央处理器CPU.随机存储器RAM.只读存储器ROM.输入输出I/O接口.中断控制系统.定时/计数器和通信等多种功能部件. 本教程使用的单片机德州仪器生产的CC2530, ...

  9. 本地服务器上挂载A目录到B目录

    原因: 由于某个分区满了,切磁盘无法扩大分区空间,但是项目依赖该分区,需要继续像该分区存储文件,此时其他分区还有很大的空间,使用挂载的方式,在有空间的分区创建新目录,将新目录挂载到源目录下即可. 执行 ...

  10. 面向对象【林老师版】：__init__定制自己独有的特征（三）

    本节内容 1.是如何产生对象 2.实例化的步骤 3.类即类型 一.是如何产生对象? __init__方法用来为对象定制对象自己独有的特征 1.stu1=LuffyStudent()调用报错 1.代码 ...