ホームページ ウェブフロントエンド jsチュートリアル Google Maps API 地図アプリケーションの例 共有_JavaScript スキル

Google Maps API 地図アプリケーションの例 共有_JavaScript スキル

May 16, 2016 pm 04:33 PM
api google maps

効果 (新しいバージョンの Firefox でテスト済み):

コード:

&lt;!DOCTYPE&gt;<br>&lt;html&gt;<br>&lt;head&gt;<br>  &lt;meta http-equiv="content-type" content="text/html;charset=utf-8"&gt;<br>  &lt;title&gt;Google Map&lt;/title&gt;<br>  &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js&#63;sensor=false"&gt;&lt;/script&gt;<br>  &lt;script type="text/javascript"&gt;<br>    function init()<br>    {<br>      // 获取当前位置<br>      navigator.geolocation.getCurrentPosition(function(position)<br>        {<br>          var coords = position.coords;<br>          // 设定地图参数,将当前位置的经纬度设置为中心点<br>          var latlng = new google.maps.LatLng(coords.latitude,coords.longitude);<br>          var myOptions = <br>          {<br>            // 放大倍数<br>            zoom:14, <br>            // 标注坐标<br>            center:latlng,<br>            // 地图类型<br>            mapTypeId:google.maps.MapTypeId.ROADMAP<br>          };<br>          var map1;<br>          // 显示地图<br>          map1 = new google.maps.Map(document.getElementById('map'),myOptions);<br>          // 创建标记<br>          var marker = new google.maps.Marker(<br>            {<br>              position:latlng,<br>              map:map1<br>            });<br>          // 设定标注窗口,附上注释文字<br>          var infowindow = new google.maps.InfoWindow(<br>            {<br>              content:"当前位置"<br>            });<br>          // 打开标注窗口<br>          infowindow.open(map1,marker);<br>        });<br>    }<br>  &lt;/script&gt;<br>&lt;/head&gt;<br>&lt;body onload="init()"&gt;<br>  &lt;div id="map"&gt;&lt;/div&gt;<br>&lt;/body&gt;<br>&lt;/html&gt;
ログイン後にコピー

Google Maps JavaScript API v3 (リファレンス ドキュメント): https://developers.google.com/maps/documentation/javascript/basics

Baidu Map API リファレンス ドキュメント: http://developer.baidu.com/map/jsmobile.htm

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Google Pixel 9とPixel 9 Proはリリース時にクリエイティブアシスタントAIを搭載すると噂される Google Pixel 9とPixel 9 Proはリリース時にクリエイティブアシスタントAIを搭載すると噂される Jun 22, 2024 am 10:50 AM

Google Pixel 9とPixel 9 Proはリリース時にクリエイティブアシスタントAIを搭載すると噂される

Pixel 9 Pro XL の Google Tensor G4 は 原神 で Tensor G2 に遅れをとっています Pixel 9 Pro XL の Google Tensor G4 は 原神 で Tensor G2 に遅れをとっています Aug 24, 2024 am 06:43 AM

Pixel 9 Pro XL の Google Tensor G4 は 原神 で Tensor G2 に遅れをとっています

Google AI、開発者向けに Gemini 1.5 Pro と Gemma 2 を発表 Google AI、開発者向けに Gemini 1.5 Pro と Gemma 2 を発表 Jul 01, 2024 am 07:22 AM

Google AI、開発者向けに Gemini 1.5 Pro と Gemma 2 を発表

Googleアプリのベータ版APK分解により、Gemini AIアシスタントに新たな拡張機能が追加されることが明らかになりました Googleアプリのベータ版APK分解により、Gemini AIアシスタントに新たな拡張機能が追加されることが明らかになりました Jul 30, 2024 pm 01:06 PM

Googleアプリのベータ版APK分解により、Gemini AIアシスタントに新たな拡張機能が追加されることが明らかになりました

Google Pixel 9スマートフォンは7年間のアップデート契約にもかかわらずAndroid 15では発売されない Google Pixel 9スマートフォンは7年間のアップデート契約にもかかわらずAndroid 15では発売されない Aug 01, 2024 pm 02:56 PM

Google Pixel 9スマートフォンは7年間のアップデート契約にもかかわらずAndroid 15では発売されない

新しい Google Pixel デスクトップ モードは、Motorola Ready For と Samsung DeX の代替として新鮮なビデオで紹介されています 新しい Google Pixel デスクトップ モードは、Motorola Ready For と Samsung DeX の代替として新鮮なビデオで紹介されています Aug 08, 2024 pm 03:05 PM

新しい Google Pixel デスクトップ モードは、Motorola Ready For と Samsung DeX の代替として新鮮なビデオで紹介されています

Google Pixel 9 Pro XLはデスクトップモードでテストされる Google Pixel 9 Pro XLはデスクトップモードでテストされる Aug 29, 2024 pm 01:09 PM

Google Pixel 9 Pro XLはデスクトップモードでテストされる

Google、AI Test Kitchen & Imagen 3 をほとんどのユーザーに公開 Google、AI Test Kitchen & Imagen 3 をほとんどのユーザーに公開 Sep 12, 2024 pm 12:17 PM

Google、AI Test Kitchen & Imagen 3 をほとんどのユーザーに公開

See all articles