效果如下:

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. HDU6280 From Tree to Graph

    下午打了湘潭邀请赛,好像缓解了一下北京网络赛超强的自闭感.补一下这个图论题.(补了很久) 题意:给你一颗n节点的树,有m个操作,每次向xi和lca(xi,yi)连边,然后每次zi就是对于新的图在删除每 ...

  2. 20165223 Linux安装及命令入门

    预备作业3:Linux安装及命令入门 一.VirtualBox和Ubuntu的安装 通过学习实践基于VirtualBox虚拟机安装Ubuntu图文教程,我开始学习虚拟机的安装,根据教程一步步试着安装. ...

  3. layui laydate is not defined

    记得引入的js文件要放到layui.js前面才会生效

  4. string的基本用法

    #include <iostream> #include<string> #include<vector> #include<algorithm> us ...

  5. Linux脚本点滴

    1.当硬盘空间不足15%时,循环删除最早的日志文件(ELK): #!/bin/bash for((i=20;i>=5;i-=1)) do code=`df /dev/mapper/ElkGrou ...

  6. js判断一个字符串是以某个字符串开头

    方法1: substr() 方法 if("123".substr(0, 2) == "12"){ console.log(true); } 方法2: subst ...

  7. [luogu1020][导弹拦截]

    题目位置 https://www.luogu.org/problemnew/show/P1020 题目描述 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的 ...

  8. noi.openjuge 2.6.90

    http://noi.openjudge.cn/ch0206/90/ 90:滑雪 总时间限制:  1000ms 内存限制:  65536kB 描述 Michael喜欢滑雪百这并不奇怪, 因为滑雪的确很 ...

  9. 《Java 程序设计》第一周学习总结

    本周因为刚刚接触Linux和码云等等,所以在完成作业的时候遇到很多问题. 首先,在安装Linux没有安装盘片,在盘片安装之后成功建立虚拟机,建立虚拟机后首先要下载jdk,第一次下载时没有选对格式,Li ...

  10. MySQL会发生死锁吗？

    SHOW ENGINE INNODB STATUS;来查看死锁日志: SHOW PROCESSLIST;查看进程 MySQL的InnoDB引擎事务有4种隔离级别,主要是为了保证数据的一致性. Inno ...