百度地图API-搜索地址、定位、点击获取经纬度并标注

时间：2022-09-07 12:54:07

百度地图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&gt ...

  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. IT菜鸟的生存指南（二）新手村任务

    此文献给那些刚误入IT行业的小菜鸟们,此文无法教你如何"当上CEO,迎娶白富美",那是电视剧情.现实IT行业里危机重重,竞争激励.这里教你的是如何生存.生存.生存- 恭(不)喜(幸 ...

  2. linux学习日记之老男孩

    2016年10月5日企业面试题:cp 命令复制文件是如果有覆盖可能的话如何去除确认步骤,如:将/mnt/text.txt 复制 到/temp/text.txt,去除覆盖确认命令.方法:1.加全路径的c ...

  3. Python使用re模块正则式的预编译及pickle方案

    项目上线要求当中有言论和昵称的过滤需求, 客户端使用的是python脚本, python脚本中直接利用re模块来进行正则匹配, 一开始的做法是开启游戏后, 每帧编译2条正则式, 无奈运营需求里面100 ...

  4. javascript权威指南&lpar;6&rpar; - 对象

    JavaScript对象可以从一个称为原型的对象继承属性,这种"原型式继承"(prototypal inheritance)是JavaScript的核心特征.除了字符串.数字.tr ...

  5. css3盒子相关样式

    1.css3的display属性: inline:内联 inline-block:可以设置宽高的内联 block:设置为块: <!DOCTYPE html> <html lang=& ...

  6. Windows下使用nginx搭建反向代理服务器

    反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客户端,此时 ...

  7. Chrome浏览器调试技巧

    本文主要讲解针对chrome浏览器的调试方案,对于其他浏览器其实大同小异. 先来入门一点的 DOM元素调试 看上图: 以上图表明的1,2,3,4,5标记说明: 1,为移动设备模拟器,chorme现在是 ...

  8. C&num; Note33： 总结C&num; 6&period;0&sol;7&period;0 新特性

    先注明,本文主体参考自:C# 6.0新特性 目前代码中使用了很多C#6.0的新特性,下面以Point类来做相关叙述: public class Point { public int X { get; ...

  9. TF之RNN：TensorBoard可视化之基于顺序的RNN回归案例实现蓝色正弦虚线预测红色余弦实线—Jason niu

    import tensorflow as tf import numpy as np import matplotlib.pyplot as plt BATCH_START = 0 TIME_STEP ...

  10. wvblk 把 xp、2003、win7（32位） 装入 VHD

    关键1:是[预安装]阶段F6加载wvblk驱动: or 在还原ghost镜像后,导入wvblk驱动. 关键1.5:对于 win7(32位)来说,还可以在设备管理器内,通过添加“过时”硬件的方式导入wv ...

相关文章