效果如下:

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. 初入react-redux （基于webpack babel的react应用框架）

    react这么热门的框架也不介绍了,redux是一个单项数据流的小框架,当然不只配合react,它起初是为react而配的,现在面向所有了,比如ng-redux的项目.redux做为react的标准搭 ...

  2. Java 帝国之建造者模式

    Java 帝国之建造者模式 原创: 王钦誉 码农翻身 今天 本文来自王钦誉的投稿,老刘做了较大修改. 原文地址: https://xiaoqinyu0000.github.io/2018/06/11/ ...

  3. sql server 2000 个人版怎么在win7下安装

    win7 64位安装SQL2000个人版教程 首先,如果以前安装的话,要删除干净.我也找了半天的网络资料. 1.把原来sqlserver的安装目录 C:\Program Files\microsoft ...

  4. height、clientHeight、offsetHeight、scrollHeight、height()、 innerHeight()、outerHeight()等的区别

    1.height height是css属性,这个属性定义元素内容区的高度,在内容区外面可以增加内边距.边框和外边距. 当  box-sizing: content-box 时,高度应用到元素的内容框. ...

  5. Vim常用插件安装及配置方法

    Vundle 安装 git clone https://github.com/VundleVim/Vundle.vim.git ~/.vim/bundle/Vundle.vim 配置 vimrc首部添 ...

  6. A1099. Build A Binary Search Tree

    A Binary Search Tree (BST) is recursively defined as a binary tree which has the following propertie ...

  7. MariaDB安装及基本配置

    MariaDB安装及基本配置(CentOS6.9) 数据库基础概念 数据库(Database, DB)是按照数据结构来组织.存储和管理数据的建立在计算机存储设备上的仓库. DBMS: Database ...

  8. id选择器为变量时

    使用angularjs或者freemarker的同学基本都接触过一个问题:当使用list遍历数组值显示在页面,并要对所显示的数值进行操作时,如何选取数值所在标签? 以下是一个把地址id转为中文地址的函 ...

  9. nginx配置打印请求响应内容

    #放在http{}里面 log_format kyh ' [$time_local] "$request" $status \n' 'req_header:"$req_h ...

  10. pandas知识点

    1.选择对象 1.选择特定列和行的数据 a['x'] 那么将会返回columns为x的列,注意这种方式一次只能返回一个列.a.x与a['x']意思一样. 取行数据,通过切片[]来选择 如:a[0:3] ...