百度地图api：http://developer.baidu.com/map/jsdemo.htm

api申请ak：http://lbsyun.baidu.com/

一、搜索地址、定位、点击获取经纬度并标注（一般用于会员后台）

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

<head>

    <title></title>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xxxxxxxxxx"></script>

</head>

<body>

    <input name="address" type="text" id="address" class="inp" style="width: 192px" value="陕西省">

    <input type="button" value=" 搜索位置 " onclick="codeAddress()" class="ana">

    <input name="jingdu" type="text" id="jingdu" value="108.95309828" />

    <input name="weidu" type="text" id="weidu" value="34.2777999" />

    <br />

    <div style="width:1400px;height:800px;border:1px solid gray" id="allmap"></div>

    <script type="text/javascript">

        // 百度地图API功能

        var map = new BMap.Map("allmap");

        //var map = new BMap.Map("allmap", { mapType: BMAP_SATELLITE_MAP });

        var point = new BMap.Point(109.503789, 35.860026);

        map.centerAndZoom(point, 14);

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

        //定位

        var geolocation = new BMap.Geolocation();

        geolocation.getCurrentPosition(function (r) {

            if (this.getStatus() == BMAP_STATUS_SUCCESS) {

                var mk = new BMap.Marker(r.point);

                map.addOverlay(mk);

                map.panTo(r.point);

                //mk.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

                mk.enableDragging();

                //alert('您的位置：' + r.point.lng + ',' + r.point.lat);

                document.getElementById("jingdu").value = r.point.lng;

                document.getElementById("weidu").value = r.point.lat;

            }

            else {

                //alert('failed' + this.getStatus());

            }

        }, { enableHighAccuracy: true })

        //add city

        map.addControl(new BMap.CityListControl({

            anchor: BMAP_ANCHOR_TOP_LEFT

        }));

        //add click

        function showInfo(e) {

            //alert(e.point.lng + ", " + e.point.lat);

            document.getElementById("jingdu").value = e.point.lng;

            document.getElementById("weidu").value = e.point.lat;

            var mk = new BMap.Marker(e.point);

            map.addOverlay(mk);

            map.panTo(e.point);

            //mk.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

            deletePoint(); //删除所有标注

        }

        map.addEventListener("click", showInfo);

        function deletePoint()

        {

            var allOverlay = map.getOverlays();

            for (var i = 0; i < allOverlay.length - 1; i++) {

                map.removeOverlay(allOverlay[i]);

            }

        }

        //关于状态码

        //BMAP_STATUS_SUCCESS    检索成功。对应数值“0”。

        //BMAP_STATUS_CITY_LIST    城市列表。对应数值“1”。

        //BMAP_STATUS_UNKNOWN_LOCATION    位置结果未知。对应数值“2”。

        //BMAP_STATUS_UNKNOWN_ROUTE    导航结果未知。对应数值“3”。

        //BMAP_STATUS_INVALID_KEY    非法密钥。对应数值“4”。

        //BMAP_STATUS_INVALID_REQUEST    非法请求。对应数值“5”。

        //BMAP_STATUS_PERMISSION_DENIED    没有权限。对应数值“6”。(自 1.1 新增)

        //BMAP_STATUS_SERVICE_UNAVAILABLE    服务不可用。对应数值“7”。(自 1.1 新增)

        //BMAP_STATUS_TIMEOUT    超时。对应数值“8”。(自 1.1 新增)

        function codeAddress() {

            // 创建地址解析器实例

            var myGeo = new BMap.Geocoder();

            // 将地址解析结果显示在地图上,并调整地图视野

            myGeo.getPoint(document.getElementById("address").value, function (point) {

                if (point) {

                    map.centerAndZoom(point, 14);

                    map.addOverlay(new BMap.Marker(point));

                    document.getElementById("jingdu").value = point.lng;

                    document.getElementById("weidu").value = point.lat;

                } else {

                    alert("您输入的地址在地图中未找到，请重新输入地址!");

                }

            }, "");

        }

</script>

</body>

</html>

二、按经纬度显示地图（前台）

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

<head runat="server">

    <title></title>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>

</head>

<body>

    <div style="width:700px;height:500px;border:1px solid gray" id="allmap"></div>

<script type="text/javascript">

    var map = new BMap.Map("allmap");//2d地图

    //var map = new BMap.Map("allmap", { mapType: BMAP_SATELLITE_MAP });//卫星地图

    var point = new BMap.Point(119.305724, 26.092186);

    map.centerAndZoom(point, 18);

    map.addControl(new BMap.NavigationControl());

    var marker = new BMap.Marker(point);

    map.addOverlay(marker);

    marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

</script>

</body>

</html>

百度地图API-搜索地址、定位、点击获取经纬度并标注的更多相关文章

  1. 百度地图api通过地址显示地图，白名单

    百度地图api通过地址显示地图,白名单 http://developer.baidu.com/map/jsdemo.htm#i7_1?qq-pf-to=pcqq.c2c---------------- ...

  2. 【百度地图API】如何判断点击的是地图还是覆盖物？

    原文:[百度地图API]如何判断点击的是地图还是覆盖物? 摘要:很多API爱好者问我,为什么我点击的是marker,而map也会响应该事件呢?怎样才能判断,我点击的是标注,还是地图呢?下面一起来看看. ...

  3. 如何利用【百度地图API】进行定位？非GPS定位

    原文:如何利用[百度地图API]进行定位?非GPS定位 如果你可以上网,如果你有火狐浏览器,那么恭喜你.你能很容易使用以下代码进行定位! ------------------------------- ...

  4. HTML5调用百度地图API进行地理定位实例

    自从HTML5的标准确定以后,越来越多的网站使用HTML5来进行开发.虽然对HTML5支持的浏览器不是很多,但是依然抵挡不了大伙对HTML5开发的热情.今天为大家带来的是使用HTML5调用百度地图AP ...

  5. 百度地图API的IP定位城市和浏览器定位（转）

    百度地图API提供了Geolocation 和 LocalCity两个服务类. 这俩API可以分别供用户在JavaScript中进行定位和城市确认. 1 本质上,Geolocation这个类是使用了支 ...

  6. 百度地图API 根据地址查询经纬度

    html页面.引用上API: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> ...

  7. 百度地图API 拖拽或点击地图位置获取坐标

    function setPlace(map,myValue,callback){ function getAddress(){ var pp = local.getResults().getPoi(0 ...

  8. php用百度地图API进行IP定位和GPS定位

    <?php /** * 根据地理坐标获取国家.省份.城市,及周边数据类(利用百度Geocoding API实现) * 百度密钥获取方法:http://lbsyun.baidu.com/apico ...

  9. 百度地图api根据地址获取经纬度

    package com.haiyisoft.cAssistant;import java.io.BufferedReader;import java.io.IOException; import ja ...

随机推荐

  1. App 开发步骤

    在 iOS 开发中,写一个 App 很容易,但是要写好一个 App,确是要下另一番功夫.首先,我们来看一个 App 的开发要求: 写一个 App,显示出 Spotify 上 Lady Gaga 相关的 ...

  2. struct timeval结构体 以及 gettimeofday()函数(转)

    struct timeval结构体 转载地址:http://blog.chinaunix.net/uid-20548989-id-2533161.html 该结构体是Linux系统中定义,struct ...

  3. JAXBContext处理CDATA

    今天做Lucene数据源接口时,遇到一个问题,就是输出xml时将某些数据放在CDATA区输出: 1.依赖的jar包,用maven管理项目的话, <dependency> <group ...

  4. .net core下直接执行SQL语句并生成DataTable

    .net core可以执行SQL语句,但是只能生成强类型的返回结果.例如var blogs = context.Blogs.FromSql("SELECT * FROM dbo.Blogs& ...

  5. axios 简单常用笔记

    简单认知: 1.config.data是POST参数,config.params是GET参数 axios(url, [config]) + qs + application/x-www-form-ur ...

  6. application配置和profile隔离配置（转）

    前言 github: https://github.com/vergilyn/SpringBootDemo 说明:我代码的结构是用profile来区分/激活要加载的配置,从而在一个project中写各 ...

  7. Windows 平台下Myeclipse 10 中SVN 插件使用教程（TortoiseSVN）

    1.  TortoiseSVN 简介 版本控制是管理信息修改的艺术,它一直是程序员最重要的工具,程序员经常会花时间作出小的修改,然后又在某一天取消了这些修改,想象一下一个开发者并行工作的团队 - 或许 ...

  8. mybatis与mysql中的Date和String之间转换

    在javaweb开发过程中,难免会使用日期类型,在持久化时java的日期格式可以是String,Date.mysql格式可以是varchar,datetime.他们之间如何进行相互转化? 1 java ...

  9. django 文档生成器

    参考博客:http://www.liujiangblog.com/course/django/160

  10. 发一些靠谱的招聘网站（含ios）

    近日整理一些 招聘网站 , 欢迎大家 推荐 http://www.zhaopin.com 智联,貌似这货上市了.. http://www.51job.com   51job  还行 大街就不提了.0. ...