H5地理位置定位,实现点击某一个点,跳转进另外一个页面

使用到的技术点:

前端:HTML5+CSS3+js+jQery+layer.js
后端:.net


js部分代码

//H5实现地理位置定位
function getLocation(){
    var options={
        enableHighAccuracy:true,
        maximumAge:1000
    }
    if(navigator.geolocation){
        //浏览器支持geolocation
        navigator.geolocation.watchPosition(onSuccess,onError,options);
    }else{
        //浏览器不支持geolocation
        layer.msg('您的浏览器不支持地理位置定位!', {icon: 5});
    }
}
// 自动定位填充当前地址
function onSuccess(position){
       var longitude =position.coords.longitude;
       var latitude = position.coords.latitude;
       var map = new BMap.Map("allmap");
       var ctrlNav = new window.BMap.NavigationControl({
            anchor: BMAP_ANCHOR_TOP_LEFT,
            type: BMAP_NAVIGATION_CONTROL_LARGE
       });
    map.addControl(ctrlNav);
        // 添加定位控件
    var geolocationControl = new BMap.GeolocationControl();
    geolocationControl.addEventListener("locationError",function(e){
        // 定位失败事件
           layer.msg(e.message, {icon: 5});

    });
    map.addControl(geolocationControl);
    var gpsPoint = new BMap.Point(longitude,latitude);
    BMap.Convertor.translate(gpsPoint, 0, function (point) {  
        map.centerAndZoom(point,14);
        var jsonData = {"Longitude":point.lng,"Latitude":point.lat};
        $.ajax({
            url:'url地址',
            type:'post',
            data:{
                "para":JSON.stringify(jsonData)
            },
            async:true,
            dataType:'json',
            success:function(data){
                if(data.Result == 1) {
                    var info = data.Info;
                    if(info.length <= 0){
                        layer.msg('当前地区暂无数据', {icon: 5});
                    }else{
                        for(var i = 0; i < info.length; i++) {
                            var iconUrl = info[0].IconUrl;
                            var lg = info[0].Longitude;
                            var la = info[0].Latitude;
                            var id = info[0].Id;
                            var myIcon = new BMap.Icon("http://119.29.218.203:60/" + iconUrl,new BMap.Size(72, 39));
                            //此处标注为从后台读取过来的数据,将此数据显示在百度地图上
                            // 创建标注
                            var marker = new BMap.Marker(new BMap.Point(lg, la), {icon: myIcon});  
                            map.addOverlay(marker);               // 将标注添加到地图中
                            marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
                            //添加点击事件的监听函数
                            marker.addEventListener("click",function(){
                                //跳转的地址,通过用地址拼接的方式实现
                                window.location.href= "./detail.html" + "?a=" + id + "&b=" + longitude + "&c=" + latitude;
                            })
                        } 
                    }
                }else{
                    layer.msg('获取数据失败', {icon: 5});

                }
            }
        })
        //此处的是地理位置定位实现对当前用户位置定位
        var marker = new BMap.Marker(point);  // 创建标注
        map.addOverlay(marker);               // 将标注添加到地图中
        marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画     
    });
}
function onError(error){
    switch(error.code){
        case 1:
            layer.msg('位置服务被拒绝,请手动选择当前地址', {icon: 5});
            break;
        case 2:
            layer.msg('暂时获取不到位置信息,请手动选择当前地址', {icon: 5});
            break;
        case 3:
            layer.msg('获取信息超时,请手动选择当前地址', {icon: 5});
            break;
        case 4:
            layer.msg('未知错误,请手动选择当前地址', {icon: 5});
            break;
    }
}
window.onload=getLocation;

你可能感兴趣的:(前端开发工程师)