调用googleMapApi_程序开发

调用googleMapApi

admin

2023-06-11 20:41:48

0次

基本调用

> 
<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 调用

> 
<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_Geolocationtitle> 
<script type="text/javascript" 
    src="https://maps.google.com/maps/api/js?sensor=false"> 
script> 
 
head> 
 
<body> 
<div id="metaDataTable"> 
 <h2> Html5 Geolocation Distance Trackerh2> 
 <p id="status"> Html5 Geolocation is<strong> notstrong> 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 TimeStamptd> 
        <td wisth=114 id="timestamp">?td> 
     tr> 
table> 
<h5 id="currDist"> Current distance traveled:0.0KMh5> 
<h5 id="totalDist">Total distance traveled:0.0KMh5> 
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 = "我的当前位置"; 
       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>

上一篇：12款非常精致的免费 HTML5 & CSS3 网站模板

下一篇：Web前端开发人员和设计师必读文章【系列十一】

调用googleMapApi

相关内容

热门资讯