• Six steps to create google map in the HTML5


    1.getCurrentPosition(); 2. API key of google client; 3. define properites of map; 4.the location for map to hold; 5.create a map object; 6.when to load the map.

    1.Geolocation is the identificaiton of the real-world geographic location of an object, such as a radar source, portable device or Internet-connected computer terminal.

    *Using HTML5 Geolocation

     The getCurrentPosition() method is used to get the position of user.

    <script>
    var x = document.getElementById("demo");
    function getLocation(){
      if(navigator.geolocation){
            navigator.geolocation.getCurrentPosition(showPosition,showError);
       }else{
            x.innerHTML="Geolocation is not supported by this browser."
        }
    }
    function showPosition(position){
       x.innerHTML = "Latitude: "+position.coords.latitude +"<br>Longitude: "+position.coords.longitude;
    }    
    function showError(error){
       switch(error.code){
           case error.PERMISSION_DENIED:{
                x.innerHTML = "User denied the request for Geolocation";
                break;
           }
           case error.POSITION_UNAVAILABLE:{
                x.innerHTML = "Location information is unavailable";
                break;
           }
           case error.TIMEOUT:{
                x.innerHTML = "The request to get user location timed out.";
                break;
           }
           case error.UNKNOWN_ERROR:{
                x.innerHTML = "An unknown error occurred.";
                break;
           }
       }
    }
    </script>    

    2. We need the goolge api key to access google map service.

    3. to configure the properties for creating googlem map.

      *google.maps.Map({properties});

      *center: google.maps.LatLng(lat,lng) (required); / user the city's name like chicago  ===>here, i can get value form navigator.getlocation.getCurrentPosition();

      *MapTypeId : google.maps.MapTypeId.HYBRID; google.maps.MapTypeId.ROADMAP(default);google.maps.MapTypeId.SATELLITE;google.maps.MapTypeId.TERRAIN.

      *zoom: 0-10 

      *scaleControl:true/false;  ==>enable/disable state of the Scale control.

      *streetView: StreetViewPanorama;

      *minZoom: number

      *maxZoom: number

      *backgroundColor: string

      *disableDefaultUI:boolean ==> enables/disabled all default UI.

      *disableDoubleClickZoom:boolean

      *draggle:boolean

    4.the location for map to hold;

    <style>
        #mapholder{
          height:100%;
        }
    </style>
    <body>
        <div id="mapholder"></div>
    </body>

    5.create a map object;

    <script>
    function initMap(){
      var map = new google.maps.Map(document.getElementById("mapholder"),{
         zoom:17;
         center:{lat:-42.901492499999996,lng:147.3278683};
       });
    }
    </script>

    6.when to load the map.

    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&callback=initMap" >
    </script>
  • 相关阅读:
    【转】ASP.NET MVC 使用 FluentScheduler 定时器计划任务
    【转】prototype扩展的JavaScript常用函数库
    【转】JavaScript系列文章:自动类型转换
    【转】Open Live Writer 插件更新
    highcharts与highstock实例
    SQL SERVER数据类型与C#数据类型对照表
    Highcharts在IE中不能一次性正常显示的一种解决办法
    MIME类型大全
    几种工具反编译被编译好的DLL文件
    MySQL之数据库的操作
  • 原文地址:https://www.cnblogs.com/yeatschen/p/5420782.html
Copyright © 2020-2023  润新知