zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    为什么要用全文搜索引擎:全文搜索引擎 VS 数据库管理系统
    大数据学习路线之hive存储格式
    web测试教程之JavaScript中的变量
    Java学习中面向过程与面向对象的优缺点
    Java教程之Java反射
    Python技术基础知识点:OS模块的应用
    软件测试教程——概念解析及常用方法概说
    UI设计师必备技能 网页中的色彩搭配(色彩篇)
    UI技术分享 如何提高自己的设计视野
    JavaScript学习指南分享
  • 原文地址:https://www.cnblogs.com/yeatschen/p/5420782.html
Copyright © 2011-2022 走看看