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

目录
相关文章
|
1月前
|
定位技术 API 开发工具
Android 按照步骤接入百度地图API,定位显示不了解决办法
Android 按照步骤接入百度地图API,定位显示不了解决办法
50 0
|
2月前
|
数据可视化 搜索推荐 JavaScript
数据可视化大屏百度地图区域掩膜MapMask实现地图指定区域非省市县行政区显示的实战案例解析(JavaScript API GL、个性化地图定制、指定区域经纬度拾取转化)
数据可视化大屏百度地图区域掩膜MapMask实现地图指定区域非省市县行政区显示的实战案例解析(JavaScript API GL、个性化地图定制、指定区域经纬度拾取转化)
225 0
|
2月前
|
定位技术 API 容器
百度地图API开发:停车场分布标注和检索静态版
百度地图API开发:停车场分布标注和检索静态版
40 0
|
2月前
|
前端开发 定位技术 API
百度地图API:根据起始点经纬度坐标确认最佳路线规划
百度地图API:根据起始点经纬度坐标确认最佳路线规划
30 0
|
2月前
|
移动开发 JavaScript 定位技术
百度地图开发:地图调起API(Web端)使用终点经纬度直接调用百度地图导航信息的解决方案
百度地图开发:地图调起API(Web端)使用终点经纬度直接调用百度地图导航信息的解决方案
35 0
|
2月前
|
定位技术 API
百度地图API开发:多边形覆盖物鼠标高亮效果及单击事件
百度地图API开发:多边形覆盖物鼠标高亮效果及单击事件
38 0
|
2月前
|
编解码 JavaScript 前端开发
百度地图:使用javascript和web服务API自动实现经纬度编码的解决方案
百度地图:使用javascript和web服务API自动实现经纬度编码的解决方案
34 1
|
2月前
|
定位技术 API
百度地图异步加载开发系列(7):计算两个坐标点距离的API
百度地图异步加载开发系列(7):计算两个坐标点距离的API
31 0
|
2月前
|
定位技术 API 容器
百度地图API开发:map.getDistance计算两点之间的距离(直线距离)
百度地图API开发:map.getDistance计算两点之间的距离(直线距离)
189 0
|
2月前
|
API 定位技术
百度地图web服务API接口实现IP到简要地址的转化
百度地图web服务API接口实现IP到简要地址的转化
30 0
相关产品
云迁移中心
推荐文章
更多