效果如下:

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. javascript Object的新方法

    今天复习es6,又看到Object的一堆方法,与es5的表现又有不一致,耗费了一整天,整理一下: 前几天在司徒正美的书里又看到了es5 Object的字眼,为了向下兼容,大神们也是牛逼的整理出一系列i ...

  2. [WC2019] 数树

    [WC2019] 数树 Zhang_RQ题解(本篇仅概述) 前言 有进步,只做了半天.... 一道具有极强综合性的数数好题! 强大的多合一题目 精确地数学推导和耐心. 有套路又不失心意. 融合了: 算 ...

  3. QTREE5 - Query on a tree V——LCT

    QTREE5 - Query on a tree V 动态点分治和动态边分治用Qtree4的做法即可. LCT: 换根后,求子树最浅的白点深度. 但是也可以不换根.类似平常换根的往上g,往下f的拼凑 ...

  4. BZOJ2288 生日礼物

    本题是数据备份的进阶版. 首先去掉所有0,把连续的正数/负数连起来. 计算所有正数段的个数与总和. 然后考虑数据备份,有一点区别: 如果我们在数列中选出一个负数,相当于把它左右连起来. 选出一个正数, ...

  5. 洛谷P1020 导弹拦截

    n²谁都会打,不说了. 这里讨论一下nlogn算法(单调不减): 首先开始考虑单调性,我习惯性的以为是单调队列/栈优化的那个套路,想要找到一个跟下标有关的单调性却发现没有. 例如:我想过当下标增加时f ...

  6. Python 3 入门，看这篇就够了

    文章目录 简介 基础语法 运算符 变量 数据类型 流程控制 迭代器 生成器 函数 自定义函数 参数传递 可更改与不可更改对象 参数 匿名函数 变量作用域 模块 面向对象 错误和异常 文件操作 序列化 ...

  7. VMware Workstation 14 激活码

    激活码: 1.FF31K-AHZD1-H8ETZ-8WWEZ-WUUVA 2.CV7T2-6WY5Q-48EWP-ZXY7X-QGUWD

  8. C++基础知识－Day8

    2.类的作用域运算符 shadow 在我们之前讲的内容中,我们会发现一种情况,就是在我们在不同类中的打印函数我们都是尽量让其名字不同,那么为什么会有这种情况呢?首先我们来看一个函数 void func ...

  9. Harbor 使用 Helm 一键安装

    安装 Harbor Harbor 支持多种安装方式,源码目录下面默认有一个安装脚本(make/install.sh),采用 docker-compose 的形式运行 Harbor 各个组件,和前面的课 ...

  10. 基本类型（2）：oracle中有4个大对象（lobs）类型可用，分别是blob,clob,bfile,nclob。

    1)blob:二进制lob,为二进制数据,最长可达4GB,存贮在数据库中. 2)clob:字符lob,字符数据,最长可以达到4GB,存贮在数据库中. 3)bfile:二进制文件;存贮在数据库之外的只读 ...