原创著作,产权保护 政府、投票、评选、公安、学校、问卷、视频会议专注发展中小企事业 系统报价 | 支付帐号 | 授权查证
    计算机著作版权登记号:2014SR032463 手机:+86-1373066-4304 | QQ:1213920482 欢迎选择智睿软件系统 欢迎选择智睿软件系统
智睿软件系统
JS获取经韦坐标地图map
来源:智睿 浏览:447 次 发布时间:2020-04-19 09:03:23

<!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

【刷新页面】【加入收藏】【打印此文】 【关闭窗口】
上一篇:智睿网络投票评选管理系统 V 10.7.9 优秀评选大赛系统,年度优秀评选活动系统 下一篇:智睿录取查询报名系统 V 10.0.6 2020年全新录取查询系统 秋季招生系统