调用googleMapApi

发布时间：2020-05-31 07:22:11 作者：起始页
来源：网络阅读：545

基本调用

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<style type="text/css"> 
  html { height: 100% } 
  body { height: 100%; margin: 0px; padding: 0px } 
  #map_canvas { height: 100% } 
</style> 
<script type="text/javascript" 
    src="https://maps.google.com/maps/api/js?sensor=true"> 
</script> 
<script type="text/javascript"> 
  function initialize() { 
    var latlng = new google.maps.LatLng(-34.397, 150.644); 
    var myOptions = { 
      zoom: 8, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
        myOptions); 
  } 
 
</script> 
</head> 
<body onload="initialize()"> 
  <div id="map_canvas" style="width:100%; height:100%"></div> 
</body> 
</html>

基于html5的稍微复杂的Goolge Map 调用

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<style type="text/css"> 
  html { height:800px; width:480px; } 
  body { height: 100%; margin: 0px; padding: 0px } 
  #map_canvas { height: 100% } 
  #metaDataTable { position:absolute; top:30px; left:0px; z-index:1000;} 
</style> 
<title>html5_Geolocation</title> 
<script type="text/javascript" 
    src="https://maps.google.com/maps/api/js?sensor=false"> 
</script> 
 
</head> 
 
<body> 
<div id="metaDataTable"> 
 <h2> Html5 Geolocation Distance Tracker</h2> 
 <p id="status"> Html5 Geolocation is<strong> not</strong> suppert your browser!!!</p> 
<h3>Current Position:</h3> 
<table border="1"> 
     <tr> 
        <td width=40 scope="col">纬度</td> 
        <td wisth=114 id="latitude">?</td> 
     </tr> 
     <tr> 
        <td width=40 scope="col">经度</td> 
        <td wisth=114 id="longitude">?</td> 
     </tr> 
      <tr> 
        <td width=40 scope="col">海拔</td> 
        <td wisth=114 id="accuracy">?</td> 
     </tr> 
       <tr> 
        <td width=40 scope="col">Last TimeStamp</td> 
        <td wisth=114 id="timestamp">?</td> 
     </tr> 
</table> 
<h5 id="currDist"> Current distance traveled:0.0KM</h5> 
<h5 id="totalDist">Total distance traveled:0.0KM</h5> 
</div> 
<script> 
      var totalDistance = 0.0; 
      var lastLat; 
      var lastLong; 
      var latitude; 
      var longitude; 
/*function getGeolacation(){ 
    if(navigator.geolocation){ 
        alert("Support the html5 Geolacation API"); 
        navigator.geolocation.getCurrentPosition(updateLocation); 
        } 
    }*/ 
    function updateLocation(position){ 
         latitude = position.coords.latitude; 
         longitude = position.coords.longitude; 
        var accuracy = position.coords.accuracy; 
        var timestamp = position.timestamp; 
        document.getElementById("latitude").innerHTML =latitude ; 
        document.getElementById("longitude").innerHTML = longitude; 
        document.getElementById("accuracy").innerHTML = accuracy; 
        document.getElementById("timestamp").innerHTML = timestamp; 
        if(accuracy >= 500){ 
          updateStatus("need more accure vslues to calculate distance."); 
          return; 
        } 
        //计算距离 
        if((lastLat != null)&&(lastLong != null)){ 
           var CurrentDistance = distance(latitude,longitude,lastLat,lastLong); 
           document.getElementById("currDist").innerHTML = "Current distance traveled"+CurrentDistance+"KM"; 
           totalDistance  += CurrentDistance; 
           document.getElementById("totalDist").innerHTML="=Total distance traveled "+totalDistance+"KM"; 
        } 
        lastLat = latitude; 
        lastLong = longitude; 
        updateStatus("Loacation Successfully uodated!!!"); 
        initialize(latitude,longitude); 
        } 
        function handleLocationError(error){ 
          switch(error.code){ 
           case 0 : 
           uodateStatus("There was an error while retrieving your Location "+error.message); 
           break; 
            case 1 : 
           uodateStatus("the user prevented this page from your Location "+error.message); 
            break; 
            case 2 : 
           uodateStatus("the browser was unable to determine your Location "+error.message); 
            break; 
            case 3 : 
           uodateStatus("the browser timed out before retrieving your Location "+error.message); 
            break; 
          } 
        } 
      function toRadians(degree){ 
        return degree = Math.PI / 180; 
      } 
      function distance(latitude1, longitude1, latitude2, longitude2){ 
      var R = 6371; 
      var deltatidude = toRadians(latitude2- latitude1); 
      var dellongitude = toRadians(longitude2 - longitude1); 
      latitude1  = toRadians(latitude1); 
      latitude2  = toRadians(latitude2); 
      var a = Math.sin(deltalatitude/2)*Math.cos(deltalatitude/2)*Math.cos(latitude1)*Math.cos(latitude2)*Math.sin(dellongitude/2)*Math.sin(dellongitude/2); 
      var c= 2*Math.atan2(Math.sqrt(a),Math.sqrt(1-a)); 
      var d = R*c; 
      return d; 
      } 
      //R是地球的半径，单位是KM 
      function updateStatus(message){ 
      document.getElementById("status").innerHTML = message; 
      } 
      function loadDemo(){ 
        if(navigator.geolocation){ 
        updateStatus("your browser is support html5 geolacation"); 
        navigator.geolocation.watchPosition(updateLocation,handleLocationError,{maximumAge:20000}); 
        } 
      } 
  function initialize(la,longi) { 
       var latlng = new google.maps.LatLng(la, longi); 
       var div = document.createElement("div"); 
       var str = "<b>我的当前位置</b>"; 
       var myOptions = { 
        zoom: 18, 
        center: latlng, 
        mapTypeId: google.maps.MapTypeId.TERRAIN 
        }; 
        var map = new google.maps.Map(document.getElementById("map_canvas"), 
        myOptions); 
        var marker = new google.maps.Marker({ 
           position:latlng, 
           map:map, 
           title:"My Location" 
        }); 
   } 
      window.addEventListener("load",loadDemo, true); 
      </script> 
      <div id="map_canvas" style="width:100%; height:100%"></div> 
 </body> 
</html>

调用googleMapApi

相关阅读