JS获取经韦坐标地图map_智睿软件_致力于中小企事业系统开发!

正在加载中...
信息详页
JS获取经韦坐标地图map
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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>
    <span>经度：</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>
        <span>纬度：</span>
    </div>
    <div class="box_input">
        <input name="latitude" value=""id="lat"  class="case_text" type="text">
    </div>
</div>

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

<div style="width:100%;height:340px;border:1px solid gray" id="container"></div>

<script>
    var is_empty =0
    lng = 116.404;
    lat = 39.915;
    var map = new BMap.Map("container");//在指定的容器内创建地图实例
    map.setDefaultCursor("crosshair");//设置地图默认的鼠标指针样式
    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(marker);


    map.addEventListener("click", function(e){//地图单击事件
        var geocoder = new BMap.Geocoder();
        var point = new BMap.Point(e.point.lng,e.point.lat);
        geocoder.getLocation(point,function(geocoderResult,LocationOptions){
            map.clearOverlays()
            map.addControl(new BMap.NavigationControl());
            var marker = new BMap.Marker(point);        // 创建标注
            this.map.addOverlay(marker);
            //定位成功
            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);
        dingwei()

    }
    function dingwei() {
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(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
            }
            else {
                console.log('获取失败');
            }
        });
    }

    function sear(result){//地图搜索
        if(result.length ==0){
            dingwei();
            return false
        }
        var local = new BMap.LocalSearch(map, {
            renderOptions:{map: map}
        });
        local.search(result);
    }
</script>
</body>
</html>
链接: https://pan.baidu.com/s/1Soj3zf7whgj13dLU3IPKUA 提取码: j1jw