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>
  • 相关阅读:
    freemarker报错之十一
    freemarker定义一个连续的序列
    freemarker报错之十
    freemarker之数组
    解决linux环境下nohup: redirecting stderr to stdout问题
    如何查看Linux操作系统版本?
    log file sync
    freemarker中的round、floor和ceiling数字的舍入处理
    freemarker中的split字符串分割
    freemarker中的left_pad和right_pad
  • 原文地址:https://www.cnblogs.com/yszr/p/11363272.html
Copyright © 2011-2022 走看看