本篇教程探讨了利用HTML5构建地图和获取定位地点，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。

<

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

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)
    });
这个服务其实是谷歌提供的，在我们国内使用的可能性较低
后端定位
前端调用一个后端提供的接口，后端进行定位操作，返回给前端
在工作中公司后端是可以给你调接口的！！（也不一定要自己弄，可以直接让后端搞。。嘿嘿）
利用百度地图API/高德地图API...定位

获取坐标，取回地点

<script src="//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="//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>    

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！