效果如下:

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搭建ELK Cluster集群日志分析平台（一）：Elasticsearch

    应用场景: ELK实际上是三个工具的集合,ElasticSearch + Logstash + Kibana,这三个工具组合形成了一套实用.易用的监控架构, 很多公司利用它来搭建可视化的海量日志分析平 ...

  2. redis执行lua文件

    1.编写lua文件 还lua表示循环插入1-100的键为1-100值为1-100的键值对到redis中 for i=0,100 do redis.call("set",i,i) e ...

  3. MacBook上使用ssh localhost被拒绝

    最开始以为没有装sshd呢,实际上不是.又查了些方法,有些人居然把Linux上访问失败的方法直接照搬,让我建立公私钥.都没有成功.最后找到了解决方法,原来是由于苹果的安全限制,限制了这个功能. sud ...

  4. IntelliJ IDEA配置maven远程仓库

    最近在搭建springMVC+mybatis的框架,在添加jar包的时候出问题了.以前都是直接将jar包放到lib里面即可,但是看到现在用maven的比较多,就去配置maven.然后发现,在添加某个版 ...

  5. Windows Server 2003 添加“Resin”到“服务”出错

    将“Resin”添加到[服务] 进入安装目录,执行 httpd -install 从[服务]移除 执行 httpd -remove ---------------------------------- ...

  6. javaMail简介(一)

    一:开发javaMail用到的协议 SMTP(simple Message Transfer Protocal):简单消息传输协议.发送邮件时使用的协议,描述了数据该如何表示,默认端口为:25 POP ...

  7. M1-SaltStack&Flask-Day4

    1.virtualenv 虚拟环境 2.virtualenv env1 -p= 解释器路径 3. 进入Scripts 执行activate 激活配置 4.执行deactivate 取消激活配置 2.1 ...

  8. python自动化开发-[第八天]-面向对象高级篇与网络编程

    今日概要: 一.面向对象进阶 1.isinstance(obj,cls)和issubclass(sub,super) 2.__setattr__,__getattr__,__delattr__ 3.二 ...

  9. #1479 : 三等分（树形DP)

    http://hihocoder.com/problemset/problem/1479 #1479 : 三等分 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi最 ...

  10. 剑指Offer_编程题_11

    题目描述 输入一个整数,输出该数二进制表示中1的个数.其中负数用补码表示.   class Solution { public: int NumberOf1(int n) { int size = 3 ...