【高德地图】浏览器定位/ip定位+地图绘制/多点标记

①通过浏览器定位(浏览器定位不准确,且存在各种浏览器问题)





    
    
    
    
    
    
    后台管理
    
    
    
    
    


    

js进行初始化与实例实

/*enlarge.js*/
$(function(){
    var map = new AMap.Map('container', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        //zoom:13, //初始化地图层级
        // center: [116.397428, 39.90923] //初始化地图中心点
    });
    map.plugin('AMap.Geolocation',function(){
        var geolocation = new AMap.Geolocation({
            enableHighAccuracy: true, //是否使用高精度定位,默认:true
            timeout: 10000, //超过10秒后停止定位,默认:无穷大
            buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
            zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
            buttonPosition: 'RB'
        });
        document.getElementById('tip').innerHTML="定位中,请勿操作,否则会定位失败";
        document.getElementById("tip").style.color="red";
        map.addControl(geolocation);
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
        AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
    })
    function onComplete(data) {
    
        var str = [];
        //获取当前的经纬度
        Lat = data.position.getLat();
        Lng = data.position.getLng();
        console.log("Lng222",Lng)
        console.log("Lat222",Lat)
    
        console.log(data.position.getLat());
        console.log(data.position.getLng());
        str.push(data.position.getLat());
        str.push(data.position.getLng());
        //document.getElementById('tip').innerHTML = str;
        document.getElementById('tip').innerHTML="定位成功";
        document.getElementById("tip").style.color="#15A3FA";
        // setTimeout(tishi,3000);
    }
    function onError(data) {
        document.getElementById('tip').innerHTML = '定位失败请刷新再试';
    }
})

实现结果如下:

【高德地图】浏览器定位/ip定位+地图绘制/多点标记_第1张图片

②显示两点之间的路线(驾车路线为例子)

    
    if(driving){
        //清除上一次的地图 不清除绘制多条路线
        driving.clear();
    }
    driving.search(new AMap.LngLat(Lng, Lat), new AMap.LngLat(data.longitude, data.latitude), function(status, result) {
        // result 即是对应的驾车导航信息,相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
        if (status === 'complete') {
            log.success('绘制驾车路线完成')
        } else {
            log.error('获取驾车数据失败:' + result)
        }
    });

③通过ip定位(定位到当前所在城市中心)

var map,Pos,marker    
//地图初始化
    map = new AMap.Map('container',{
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom:10, //初始化地图层级
    });
    map.plugin(["AMap.ToolBar"], function() {
        map.addControl(new AMap.ToolBar());
    });
    map.clearMap();  // 清除地图覆盖物


    Pos = map.getCenter()
    console.log("POS",Pos)

//起点定位
    marker = new AMap.Marker({
        icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
        position: Pos,
        offset: new AMap.Pixel(-13, -30)
    });
    marker.setMap(map);

终点标记,不清空显示多点标记

                    if(marker2){
                        marker2.setMap(null);
                    }

                   marker2 = new AMap.Marker({
                        icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
                        position: [data.longitude, data.latitude],
                        offset: new AMap.Pixel(-13, -30)
                    });
                    marker2.setMap(map);

显示结果如下

【高德地图】浏览器定位/ip定位+地图绘制/多点标记_第2张图片

你可能感兴趣的:(前端,JQ,高德api,js,前端)