快捷導(dǎo)航

Google Maps API地圖應(yīng)用示例分享

更新時(shí)間：2014年10月23日 10:57:30 投稿：hebedich

這篇文章主要分享一段了Google Maps API地圖應(yīng)用示例，做項(xiàng)目中經(jīng)常會(huì)使用到，非常的簡(jiǎn)單，有需要的朋友可以參考下

效果（新版Firefox中測(cè)試）：

代碼：

<!DOCTYPE>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <title>Google Map</title>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript">
    function init()
    {
      // 獲取當(dāng)前位置
      navigator.geolocation.getCurrentPosition(function(position)
        {
          var coords = position.coords;
          // 設(shè)定地圖參數(shù)，將當(dāng)前位置的經(jīng)緯度設(shè)置為中心點(diǎn)
          var latlng = new google.maps.LatLng(coords.latitude,coords.longitude);
          var myOptions = 
          {
            // 放大倍數(shù)
            zoom:14, 
            // 標(biāo)注坐標(biāo)
            center:latlng,
            // 地圖類(lèi)型
            mapTypeId:google.maps.MapTypeId.ROADMAP
          };
          var map1;
          // 顯示地圖
          map1 = new google.maps.Map(document.getElementById('map'),myOptions);
          // 創(chuàng)建標(biāo)記
          var marker = new google.maps.Marker(
            {
              position:latlng,
              map:map1
            });
          // 設(shè)定標(biāo)注窗口，附上注釋文字
          var infowindow = new google.maps.InfoWindow(
            {
              content:"當(dāng)前位置"
            });
          // 打開(kāi)標(biāo)注窗口
          infowindow.open(map1,marker);
        });
    }
  </script>
</head>
<body onload="init()">
  <div id="map"></div>
</body>
</html>

Google Maps JavaScript API v3（參考文檔）：https://developers.google.com/maps/documentation/javascript/basics

百度地圖API的參考文檔：http://developer.baidu.com/map/jsmobile.htm

您可能感興趣的文章:

相關(guān)文章

一文了解你不知道的JavaScript異步篇
這篇文章主要為大家詳細(xì)介紹了一些你不知道的JavaScript異步相關(guān)知識(shí)，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)JavaScript有一定幫助，感興趣的可以跟隨小編一起學(xué)習(xí)一下
2022-11-11
javascript 封裝Date日期類(lèi)實(shí)例詳解
這篇文章主要介紹了javascript-封裝Date日期類(lèi)的相關(guān)資料,需要的朋友可以參考下
2017-05-05
JS中表單的使用小結(jié)
本篇文章主要是對(duì)JS中表單的使用進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-01-01
javascript使用正則表達(dá)式檢測(cè)IP地址
這篇文章主要介紹了javascript使用正則表達(dá)式檢測(cè)IP地址的方法,需要的朋友可以參考下
2014-12-12
JavaScript高級(jí)程序設(shè)計(jì) 閱讀筆記（二十） js錯(cuò)誤處理
語(yǔ)法錯(cuò)誤,也稱(chēng)解析錯(cuò)誤，發(fā)生在傳統(tǒng)語(yǔ)言的編譯時(shí)，在JavaScript中發(fā)生在解釋時(shí),運(yùn)行時(shí)錯(cuò)誤也稱(chēng)為異常（exception，在編譯期/解釋器后）
2012-08-08
js獲取某元素的class里面的css屬性值代碼
這篇文章主要介紹了js獲取某元素的class里面的css屬性值代碼，有需要的朋友可以參考一下
2014-01-01
javascript 獲取所有id中包含某關(guān)鍵字的控件的實(shí)現(xiàn)代碼
獲取某容器控件中id包含某字符串的控件id列表
2010-11-11
JavaScript圖片url地址轉(zhuǎn)base64簡(jiǎn)單示例
這篇文章主要給大家介紹了關(guān)于JavaScript圖片url地址轉(zhuǎn)base64的相關(guān)資料,圖片URL轉(zhuǎn)Base64是把圖片URL轉(zhuǎn)化為一個(gè)以base64編碼的字符串格式,使得圖片可以直接在HTML或CSS中使用,需要的朋友可以參考下
2023-10-10
javascript去掉代碼里面的注釋
這篇文章主要介紹了javascript去掉代碼里面的注釋的方法和具體代碼，有需要的小伙伴可以參考下。
2015-07-07
Typescript中函數(shù)類(lèi)型及示例詳解
這篇文章主要介紹了Typescript中函數(shù)類(lèi)型,主要包括常見(jiàn)寫(xiě)法、可選參數(shù)，默認(rèn)參數(shù)及剩余參數(shù)，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-01-01