凨-百度地图API之地图标注(JS版),地理位置信息,根据地址获取经度纬度

简介: 使用的时候记得更改百度地图的开发者KEY <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>凨-百度地图API之地图标注(JS版),地理位置信息,根据

使用的时候记得更改百度地图的开发者KEY

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>凨-百度地图API之地图标注(JS版),地理位置信息,根据地址获取经度纬度</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=8277432c34c6f58ba75d3a541ed2559e"></script>
</head>
<body>
<div>
    <p>搜索:
        <input id="keyword" type="text" size="50"/> <input id="Search" type="button" value="搜索"
                                                           style="cursor: pointer"/>
    </p>

    <p> 纬度:<input name="lng" type="text" id="lng" style="width:200px;" value="120.570464"/>
        经度:<input name="lat" type="text" id="lat" style="width:200px;" value="31.300216"/>
        标注点所在区域:<input name="address" type="text" id="address" style="width:200px;"/>
    </p>
</div>
<div style="width: 420px; height: 340px; border: 1px solid gray; float: left;" id="container">
</div>
<div style="width: 350px; height: 340px;">
    <input id="biao" type="button" value="标注" style="cursor: pointer"/>
</div>
<script type="text/javascript">
    var map = new BMap.Map("container");
    //创建地址解析的实例
    var myGeo = new BMap.Geocoder();
    var lng = $('#lng').val(), lat = $('#lat').val();
    //默认根据IP读取当前城市
    var LocalCity = true;
    //默认北京市,或经度纬度不正确情况下
    if (!lng || !lat) {
        lng = 116.331398;
        lat = 39.897445;
    } else {
        LocalCity = false;
    }
    //设置地图中心坐标
    map.centerAndZoom(new BMap.Point(lng, lat), 12);
    //添加默认缩放平移控件
    map.addControl(new BMap.NavigationControl());
    //开启缩小放大
    map.enableScrollWheelZoom();
    //当前城市
    if (LocalCity) {
        var myCity = new BMap.LocalCity();
        myCity.get(setCenter);
    }else{
        //设置覆盖物
        var point = new BMap.Point(lng, lat);
        setPoint(point);
    }
    //搜索
    $('#Search').bind('click', function () {
        //清空覆盖物
        map.clearOverlays();
        var searchTxt = $("#keyword").val();
        myGeo.getPoint(searchTxt, function (point) {
            setPoint(point);
        }, "全国");

    });
    //搜索
    $('#biao').bind('click', function () {
        //清空覆盖物
        map.clearOverlays();
        var center = map.getCenter();
        var point = new BMap.Point(center.lng, center.lat);
        setPoint(point);
    });
    /**
     * 回调函数
     */
    function setCenter(result) {
        var cityName = result.name;
        //把地图设置当前城市
        map.setCenter(cityName);
    }
    /**
     * 设置覆盖物,获取坐标
     * @param point
     */
    function setPoint(point) {
        if (point) {
            //坐标赋值
            $('#lng').val(point.lng);
            $('#lat').val(point.lat);
            Geocoder(point);

            map.centerAndZoom(point, 12);
            var marker = new BMap.Marker(point);
            map.addOverlay(marker);
            marker.enableDragging();//可以拖动
            //创建信息窗口
            var infoWindow = new BMap.InfoWindow("这就是您公司的位置。<br/>如果不正确,请拖动红色图标");
            //显示窗口
            marker.openInfoWindow(infoWindow);
            //点击监听
            marker.addEventListener("click", function () {
                this.openInfoWindow(infoWindow);
            });
            //拖动监听
            marker.addEventListener("dragend", function (e) {
                //坐标赋值
                $('#lng').val(e.point.lng);
                $('#lat').val(e.point.lat);
                Geocoder(e.point);
            });
        }
    }
    /**
     * 根据坐标获取地址
     * @param point
     * @constructor
     */
    function Geocoder(point) {
        var gc = new BMap.Geocoder();
        gc.getLocation(point, function (rs) {
            var addComp = rs.addressComponents;
            $('#address').val(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
        });
    }

</script>
</body>
</html>

目录
相关文章
|
29天前
|
缓存 API
全球最新地震信息免费API接口教程
该接口提供全球最新地震信息,数据源自中国地震台网,每5分钟更新一次。支持POST/GET请求,需提供用户ID和KEY。返回数据包括地震等级、时间、经纬度、深度及位置等详细信息。示例请求和响应详见文档。
|
9天前
|
供应链 搜索推荐 API
探索1688榜单商品详细信息API接口:开发、应用与收益
本文深入探讨了1688榜单商品详细信息API接口的开发与应用,涵盖接口概述、开发条件、调用方法及数据处理等内容。该API帮助企业高效获取1688平台商品信息,应用于商品信息采集、校验、同步与数据分析等领域,有效提升了企业的运营效率、库存管理、销售转化率及市场策略制定能力,降低了采购成本,提升了客户满意度。
35 9
|
19天前
|
缓存 算法 API
查询域名WHOIS信息免费API接口教程
该API用于查询顶级域名的WHOIS信息,不支持国别域名和中文域名。通过POST或GET请求,需提供用户ID、KEY及待查询域名。返回信息包括域名状态、注册商、时间等详细数据。示例与文档见官网。
|
19天前
|
API 区块链
获取指定网页基础信息【TDK】免费API接口教程
该接口用于从标准网页中提取标题、关键词、描述和图标等信息。支持POST/GET请求,需提供用户ID、KEY及目标网址等参数,可选指定访问节点。返回状态码、信息提示及提取的内容。示例与详细文档见官网。
|
29天前
|
API
万年历[取当日信息]免费API接口教程
此API提供万年历当天的详细信息,包括农历、星期、宜忌、生肖、星座、节日、五行、星宿等。支持POST和GET请求,需提供用户ID和KEY。返回数据包含阳历、农历、干支、节日列表等多项内容。示例URL:https://cn.apihz.cn/api/time/getday.php?id=88888888&key=88888888。
148 10
|
25天前
|
新能源 API
百科-百度免费API接口教程
该接口用于从百度百科获取指定名词的基础解释。支持POST或GET请求,需提供用户ID、用户KEY及查询内容。返回状态码和解释内容或错误提示。示例:https://cn.apihz.cn/api/zici/baikebaidu.php?id=88888888&key=88888888&words=汽车。建议使用个人ID与KEY以享受更高调用频次。
|
25天前
|
API
表情包-百度版免费API接口教程
该接口用于通过指定关键词从百度渠道获取表情包,支持POST或GET请求。需提供用户ID和KEY,可选参数包括关键词、页码及结果数量。返回数据包含状态码、信息提示、结果集等。示例中ID与KEY为公共测试用,建议使用个人ID与KEY以享受更高调用频率。
|
28天前
|
API
通用图片搜索-百度源免费API接口教程
该接口用于搜索百度图片,支持通过关键词、页码、结果数量等参数获取图片搜索结果。请求方式为POST或GET,需提供用户ID和KEY,可选参数包括关键词、页码、结果数量及返回源类型。返回结果包含状态码、信息提示、结果集、当前页码、最大页码和结果数量。示例中提供了GET和POST请求方法及返回数据示例。
|
1月前
|
JSON 数据挖掘 API
电商信息指南:API接口淘宝关键词、店铺所有商品获取
要获取淘宝关键词商品数据和店铺所有商品的API接口,需先注册淘宝开放平台账号并创建应用,获取API密钥。接着,使用密钥获取访问令牌,详细阅读API文档,构造并发送API请求,解析响应数据。特别地,使用`item_search_shop`接口可获取店铺内所有商品信息。
|
2月前
|
机器学习/深度学习 自然语言处理 JavaScript
信息论、机器学习的核心概念:熵、KL散度、JS散度和Renyi散度的深度解析及应用
在信息论、机器学习和统计学领域中,KL散度(Kullback-Leibler散度)是量化概率分布差异的关键概念。本文深入探讨了KL散度及其相关概念,包括Jensen-Shannon散度和Renyi散度。KL散度用于衡量两个概率分布之间的差异,而Jensen-Shannon散度则提供了一种对称的度量方式。Renyi散度通过可调参数α,提供了更灵活的散度度量。这些概念不仅在理论研究中至关重要,在实际应用中也广泛用于数据压缩、变分自编码器、强化学习等领域。通过分析电子商务中的数据漂移实例,展示了这些散度指标在捕捉数据分布变化方面的独特优势,为企业提供了数据驱动的决策支持。
124 2
信息论、机器学习的核心概念:熵、KL散度、JS散度和Renyi散度的深度解析及应用