凨-百度地图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>

目录
相关文章
|
2月前
|
JSON API UED
商品信息API接口的设计与实现
商品信息API接口的设计与实现,遵循RESTful原则以确保高效、可维护和良好的用户体验。API支持获取、查询、创建、更新和删除商品资源,URL模式直观易懂。请求参数通过查询字符串传递,支持分页和过滤。响应体结构化,包含数据、链接和元数据字段,便于解析。错误处理采用HTTP状态码结合JSON错误描述,提供明确反馈。
|
3月前
|
供应链 API 开发者
解锁电商数据的无限可能:探秘京东商品SKU信息API接口
京东商品SKU信息API接口是电商开发与运营中的重要工具,帮助开发者获取商品的详细属性,如库存、价格、规格等。通过该接口,电商平台可以丰富商品展示页面,提升用户体验;商家能实时掌握库存动态,优化销售策略;数据分析人员可深入洞察市场趋势,实现精准营销。使用前需注册京东开放平台账号、创建应用并获取API权限,同时仔细阅读API文档以确保正确调用。代码示例展示了如何用Python调用该接口,并处理返回数据。未来,该接口将在个性化推荐、智能库存管理和数据分析等领域发挥更大作用,助力电商业务创新与发展。
179 14
|
3月前
|
JSON 监控 API
获取1688商品SKU信息API接口及实战应用
在电商蓬勃发展的今天,数据成为宝贵的财富。1688作为国内知名批发采购平台,提供商品SKU信息API接口,可获取库存、价格、规格等关键数据,助力电商运营、市场分析和价格监控。本文介绍如何注册1688开放平台账号、创建应用并获取AppKey/AppSecret,申请API权限,使用Python实现接口调用,处理响应数据,并注意请求频率限制和错误处理。通过该接口,可为电商运营和数据分析提供有力支持。
162 2
|
3月前
|
供应链 数据挖掘 API
探秘淘宝商品SKU信息API接口
在电子商务中,SKU(库存量单位)用于区分商品的不同规格、颜色、尺寸等属性,是精细化管理的基础。本文深入探讨淘宝商品SKU信息API接口,介绍其功能特点、使用方法及应用场景,并提供Python代码示例。该API支持实时更新、多维度筛选,帮助开发者获取全面的SKU信息,优化库存管理、订单处理和销售数据分析,提升运营效率与市场竞争力。
210 1
|
3月前
|
JSON 缓存 API
深度探索淘宝详情API接口:高效获取商品信息的实践指南
淘宝详情API接口是阿里巴巴开放平台的重要组成部分,帮助开发者通过程序化方式获取淘宝商品的详细信息,如标题、价格、销量等。本文介绍其使用方法,涵盖权限申请、请求构造、异常处理及高级应用,助力开发者优化电商体验和业务决策。
|
4月前
|
JavaScript API C#
【Azure Developer】Python代码调用Graph API将外部用户添加到组,结果无效,也无错误信息
根据Graph API文档,在单个请求中将多个成员添加到组时,Python代码示例中的`members@odata.bind`被错误写为`members@odata_bind`,导致用户未成功添加。
69 10
|
4月前
|
供应链 搜索推荐 API
1688榜单商品详细信息API接口的开发、应用与收益
1688作为全球知名的B2B电商平台,为企业提供丰富的商品信息和交易机会。为满足企业对数据的需求,1688开发了榜单商品详细信息API接口,帮助企业批量获取商品详情,应用于信息采集、校验、同步与数据分析等领域,提升运营效率、优化库存管理、精准推荐、制定市场策略、降低采购成本并提高客户满意度。该接口通过HTTP请求调用,支持多种应用场景,助力企业在电商领域实现可持续发展。
132 4
|
17天前
|
JSON 数据挖掘 API
1688API最新指南:商品详情接口接入与应用
本指南介绍1688商品详情接口的接入与应用,该接口可获取商品标题、价格、规格、库存等详细信息,适用于电商平台开发、数据分析等场景。接口通过商品唯一标识查询,支持HTTP GET/POST请求,返回JSON格式数据,助力开发者高效利用1688海量商品资源。
|
17天前
|
JSON 数据挖掘 API
京东API接口最新指南:店铺所有商品接口的接入与使用
本文介绍京东店铺商品数据接口的应用与功能。通过该接口,商家可自动化获取店铺内所有商品的详细信息,包括基本信息、销售数据及库存状态等,为营销策略制定提供数据支持。此接口采用HTTP请求(GET/POST),需携带店铺ID和授权令牌等参数,返回JSON格式数据,便于解析处理。这对于电商运营、数据分析及竞品研究具有重要价值。
|
28天前
|
存储 供应链 监控
1688商品数据实战:API搜索接口开发与供应链分析应用
本文详细介绍了如何通过1688开放API实现商品数据的获取与应用,涵盖接入准备、签名流程、数据解析存储及商业化场景。开发者可完成智能选品、价格监控和供应商评级等功能,同时提供代码示例与问题解决方案,确保法律合规与数据安全。适合企业开发者快速构建供应链管理系统。

热门文章

最新文章