利用H5构建地图和获取定位地点

来源:互联网 时间:2017-12-08

地图与地理定位

定位在大部分项目中都需要实现,如何实现主要有如下的几种方法

  1. H5定位

    在HTML5中navigator有很强大的功能,其中就有定位的方法

     navigator.geolocation.getCurrentPosition(function showPosition(position){

    lat=position.coords.latitude;

    lon=position.coords.longitude;

    console.log(lat,lon)

    },function(err){

    console.log(err)

    });

    这个服务其实是谷歌提供的,在我们国内使用的可能性较低

  2. 后端定位

    前端调用一个后端提供的接口,后端进行定位操作,返回给前端

    在工作中公司后端是可以给你调接口的!!(也不一定要自己弄,可以直接让后端搞。。嘿嘿)

  3. 利用百度地图API/高德地图API...定位

    获取坐标,取回地点

    <script src="http://webapi.amap.com/maps?v=1.4.2&key=025f0c88ec8249226cfc528b6e83c535(key值可以从高德地图api获取key值这

    是笔者自己申请的key值)&plugin=AMap.Geocoder"></script>

    <script>

    var map, geolocation;

    //加载地图,调用浏览器定位服务

    map = new AMap.Map('container', {

    resizeEnable: true

    });

    map.plugin('AMap.Geolocation', function() {

    geolocation = new AMap.Geolocation({

    enableHighAccuracy: true,//是否使用高精度定位,默认:true

    timeout: 20000, //超过10秒后停止定位,默认:无穷大

    buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)

    zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false

    buttonPosition:'RB'

    });

    geolocation.getCurrentPosition();

    AMap.event.addListener(geolocation, 'complete', function onComplete(data) {

    console.log(data.position.getLat(),data.position.getLng())

    regeocoder([data.position.getLng(),data.position.getLat()])

    });//返回定位信息

    });

    function regeocoder(pos) { //逆地理编码

    var geocoder = new AMap.Geocoder({

    radius: 1000,

    extensions: "all"

    });

    geocoder.getAddress(pos, function(status, result) {

    if (status === 'complete' && result.info === 'OK') {

    console.log(result)

    }

    });

    }

    </script>

    在国内地图应用公司主要有这么几个:百度-百度地图,腾讯-腾讯地图,阿里-高德地图,搜狗-搜狗地图..

    这些地图都会为开发者提供一些便利来使用其中的一些功能

做一个自己的地图

<style>

#map{

width: 100%;

height: 100vh;

}

</style>

<div id="map"></div>

<script src="http://webapi.amap.com/maps?v=1.4.2&key=4e2c29a761a9c245ddd69c5e64be66a5"></script>

<script>

var map = new AMap.Map('map', {

resizeEnable: true,

zoom:11,

center: [116.397428, 39.90923]

});

</script>

相关阅读:
Top