• 百度地图点击获取经纬度,地点名称,标注


    功能介绍
    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>
  • 相关阅读:
    ps4 如何导出切片 单个图片
    测试webservice的时候,如果出现这个错误:"The test form is only available for requests from the local machine"
    js jquery 按钮点击后 60秒之后才能点击 60秒倒计时
    有空研究一下 superwebsocket (底层是 supersocket) 用来实现 web聊天什么的
    Vue学习笔记一:初识Vue
    被爬虫了,嘻嘻嘻
    Mybatis-generator自动生成器
    SpringCloud笔记五:Feign
    SpringCloud笔记四:Ribbon
    SpringCloud笔记三:Eureka服务注册与发现
  • 原文地址:https://www.cnblogs.com/yszr/p/11363272.html
Copyright © 2020-2023  润新知