zoukankan      html  css  js  c++  java
  • 百度地图点击获取经纬度,地点名称,标注

    功能介绍
    1,自动定位当前位置;(可能要等一会儿)
    2,搜索功能
    3,点击地图 小红点标记,
    4,点击地图获取当前位置,和当前坐标

    代码:
    https://github.com/liaoshengping/myJsNote/blob/master/map/map3.html

    demo:
    https://liaoshengping.github.io/demo/map3.html
    ---------------------

    <!DOCTYPE html>
    <html lang =“en”>
    <HEAD>
        <meta charset =“UTF-8”>
        <TITLE>标题</ TITLE>
        <script type =“text / javascript”src =“http://api.map.baidu.com/api?v=2.0&ak=0FuoX30MFf7YMrdS5Wi9GGAcHBblKDuu”> </ script>
    </ HEAD>
    <BODY>
    <input name =“address”value =“”id =“where”class =“case_text”type =“text”>
    </ DIV>
    <div style =“display:inline”onClick =“sear(document.getElementById('where')。value);” >
        搜索
    </ DIV>
    
    </ DIV>
    <div class =“zerocard_add_ys”>
        <span class =“color_dh”> * </ span>
        <跨度>经度:</跨度>
        <div class =“box_input”>
            <input name =“longitude”value =“”id =“lng”class =“case_text”type =“text”>
        </ DIV>
        <div class =“format2”>
            <span class =“color_dh”> * </ span>
            <跨度>纬度:</跨度>
        </ DIV>
        <div class =“box_input”>
            <input name =“latitude”value =“”id =“lat”class =“case_text”type =“text”>
        </ DIV>
    </ DIV>
    
    <br />
    <H1>功能介绍</ H1>
    1,自动定位当前位置;(可能要等一会儿),点击
    2,搜索功能,点击
    3,点击地图小红点标记,<br>
    4,点击地图获取当前位置,和当前坐标搜索结果
    
    <div style =“width:100%; height:340px; border:1px solid grey”id =“container”> </ div>
    
    <SCRIPT>
        var is_empty = 0
        lng = 116.404;
        lat = 39.915;
        var map = new BMap.Map(“container”); //在指定的容器内创建地图实例
        map.setDefaultCursor( “十字准线”); //设置地图默认的鼠标指针样式
        map.enableScrollWheelZoom(); //启用滚轮放大缩小,默认禁用。
        var point = new BMap.Point(lng,lat)
        map.centerAndZoom(point,15);
        map.addControl(new BMap.NavigationControl());
        var marker = new BMap.Marker(point); //创建标注
        this.map.addOverlay(标记);
    
    
        map.addEventListener(“click”,function(e){//地图单击事件
            var geocoder = new BMap.Geocoder();
            var point = new BMap.Point(e.point.lng,e.point.lat);
            geocoder.getLocation(点,功能(geocoderResult,LocationOptions){
                map.clearOverlays()
                map.addControl(new BMap.NavigationControl());
                var marker = new BMap.Marker(point); //创建标注
                this.map.addOverlay(标记);
                //定位成功
                var address = geocoderResult.address;
                document.getElementById(“where”)。value = address
                layer.msg( '定位成功');
                // $('#suggestId')。val(geocoderResult.address);
            });
            document.getElementById(“lng”)。value = e.point.lng;
            document.getElementById(“lat”)。value = e.point.lat;
        });
        function iploac(result){//根据IP设置地图中心
            var cityName = result.name;
            map.setCenter(的cityName);
        }
        if(is_empty == 0){
            // var myCity = new BMap.LocalCity();
            // myCity.get(iploac);
            丁未()
    
        }
        function dingwei(){
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(函数(r)的{
                ifthis.getStatus()== BMAP_STATUS_SUCCESS){
                    var mk = new BMap.Marker(r.point);
                    map.addOverlay(MK);
                    map.panTo(r.point);
                    document.getElementById(“lng”)。value = r.point.lng;
                    document.getElementById(“lat”)。value = r.point.lat;
                    var city_name = r.address.province + r.address.city;
                    document.getElementById(“where”)。value = city_name
                }
                其他{
                    的console.log( '获取失败');
                }
            });
        }
    
        function sear(result){//地图搜索
            if(result.length == 0){
                丁未();
                返回false
            }
            var local = new BMap.LocalSearch(map,{
                renderOptions:{map:map}
            });
            local.search(结果);
        }
    </ SCRIPT>
    </ BODY>
    
    
    
    
    </ HTML>
  • 相关阅读:
    Json对象与Json字符串互转(4种转换方式)
    Web.config配置文件详解
    jQuery BlockUI Plugin Demo 6(Options)
    jQuery BlockUI Plugin Demo 5(Simple Modal Dialog Example)
    jQuery BlockUI Plugin Demo 4(Element Blocking Examples)
    jQuery BlockUI Plugin Demo 3(Page Blocking Examples)
    jQuery BlockUI Plugin Demo 2
    <configSections> 位置引起的错误
    关于jQuery的cookies插件2.2.0版设置过期时间的说明
    jQuery插件—获取URL参数
  • 原文地址:https://www.cnblogs.com/yszr/p/11363272.html
Copyright © 2011-2022 走看看