百度地图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. Easyui入门视频教程 第04集---Easyui布局

    目录 目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义   Easyui入门视频教程 第08集---登录实现 ajax button的 ...

  2. Docker 技巧：删除 Docker 所有镜像

    删除所有未运行 Docker 容器 docker rm $(docker ps -a -q) 删除所有 Docker 镜像 删除所有未打 tag 的镜像 docker rmi $(docker ima ...

  3. k8s之服务发现

    一.概述 k8s中支持两种服务发现方法: 环境变量和DNS 二.环境变量 当Pod被创建的时候,k8s将为Pod设置每一个Service的相关环境变量,这些环境变量包括两种类型: k8s Servic ...

  4. spring 使用注解注入 list 或 map

    1.定义一个接口或抽象类AClass 2.定义两个类实现或继承AClass,(BClass,MClass) 3.在第三个类XClass 中注入List 形如: @Autowired private L ...

  5. Swift 类型转换

    1.类型转换 1.1 隐式类型转换 如 C 语言的类型转换 1.2 显式类型转换 Swift 语言是一种强类型语言,其整型的强制类型转换就是调用了参数类型对应的整形扩展构造方法,然后通过对应扩展构造方 ...

  6. 轻量级验证码生成插件webutil-licenseImage源码与实例应用

    webutil-licenseImage 插件内置4种验证码样式,支持用户扩展.自定义样式实现简单验证码. 源码脱管地址: http://code.google.com/p/licenseimage/ ...

  7. Twitter Bootstrap 中文帮助文档

    http://wrongwaycn.github.io/bootstrap/docs/index.htmlTwitter Bootstrap 中文帮助文档 翻译得很不错~~~ 但是,还是要看英文文档 ...

  8. android 4.x环境搭建

    一.Android搭建开发环境 (一).工具准备 原文地址:http://www.open-open.com/lib/view/open1386252535564.html 1.下载JDK JDK即J ...

  9. 你的应用是怎样被替换的，App劫持病毒剖析

    一.App劫持病毒介绍 App劫持是指运行流程被重定向,又可分为Activity劫持.安装劫持.流量劫持.函数运行劫持等. 本文将对最近利用Acticity劫持和安装劫持的病毒进行分析. 二.Acti ...

  10. CListCtrl自适应宽度

    原文链接: http://blog.csdn.net/benny5609/article/details/1967084 void CListCtrlExDlg::AdjustColumnWidth( ...