动用H伍构建地图和收获一定地方

地图与地理定位

稳定在多数门类中都要求贯彻,怎么着完结首要有如下的三种艺术

  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)
        });
    

    这几个服务实在是谷歌(谷歌(Google))提供的,在大家国内选用的可能较低

  2. 后端定位

    前者调用二个后端提供的接口,后端举办定点操作,重回给前端
    88bifa必发娱乐,在工作中公司后端是足以给您调接口的!!(也不肯定要团结弄,能够平昔让后端搞。。嘿嘿)

  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>

相关文章