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

功能介绍
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）的{
            if（this.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>

 

posted @ 2019-01-16 13:12  御世制人  阅读(3320)  评论(0)  编辑  收藏  举报