communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > Google Maps API显示地图的小示例_html/css_WEB-ITnose

Google Maps API显示地图的小示例_html/css_WEB-ITnose

WBOY
Libérer： 2016-06-24 11:55:40
original
791 Les gens l'ont consulté

来源：http://www.ido321.com/1089.html

效果（新版Firefox中测试）：

代码：

<!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()        {            // 获取当前位置            navigator.geolocation.getCurrentPosition(function(position)                {                    var coords = position.coords;                    // 设定地图参数，将当前位置的经纬度设置为中心点                    var latlng = new google.maps.LatLng(coords.latitude,coords.longitude);                    var myOptions =                     {                        // 放大倍数                        zoom:14,                          // 标注坐标                        center:latlng,                        // 地图类型                        mapTypeId:google.maps.MapTypeId.ROADMAP                    };                    var map1;                    // 显示地图                    map1 = new google.maps.Map(document.getElementById('map'),myOptions);                    // 创建标记                    var marker = new google.maps.Marker(                        {                            position:latlng,                            map:map1                        });                    // 设定标注窗口，附上注释文字                    var infowindow = new google.maps.InfoWindow(                        {                            content:"当前位置"                        });                    // 打开标注窗口                    infowindow.open(map1,marker);                });        }    </script></head><body onload="init()">    <div id="map" style="width:400px; height:400px"></div></body></html>
Copier après la connexion

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

百度地图API的参考文档：http://developer.baidu.com/map/jsmobile.htm

下一篇：如何在网站中添加支付宝支付功能？？？


 

Étiquettes associées：
Google Maps API显示地图的小示例
source：php.cn
Article précédent：C. Diverse Permutation（Codeforces Round #275(div2)_html/css_WEB-ITnose Article suivant：Codeforces Round #275 (Div. 2) C
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Méthodes CSS et HTML pour déplacer les paragraphes vers la gauche sur les écrans de taille mobile Il semble parfait sur un écran d'ordinateur 16:9 normal, avec du texte à gauche et des ima...
Depuis 2024-04-04 20:25:22
0
1
330
flex css - élément de clip après une certaine hauteur au lieu de l'envelopper Les bordures représentent la hauteur et la largeur statiques. Je souhaite que les éléments...
Depuis 2024-04-01 14:02:02
0
1
396
Les icônes Reactjs SVG sont de tailles différentes malgré le même CSS C'est la première fois que je crée un site Web avec Reactjs. J'utilise les icônes ReactJS ...
Depuis 2024-04-01 13:18:38
0
1
355
Tableaux en PHP : résultats surprenants lors de l'ajout de nouveaux éléments J'écris donc du code qui me permet de collecter des images collectées par la bibliothèque ...
Depuis 2024-03-31 14:10:42
0
1
405
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal