简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  Google Maps API map application example sharing_javascript skills

Google Maps API map application example sharing_javascript skills

WBOY
WBOYOriginal
2016-05-16 16:33:041399browse

Effect (tested in new version of Firefox):

Code: 

<!DOCTYPE><br><html><br><head><br>  <meta http-equiv="content-type" content="text/html;charset=utf-8"><br>  <title>Google Map</title><br>  <script type="text/javascript" src="http://maps.google.com/maps/api/js&#63;sensor=false"></script><br>  <script type="text/javascript"><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>  </script><br></head><br><body onload="init()"><br>  <div id="map"></div><br></body><br></html>

Google Maps JavaScript API v3 (reference documentation): https://developers.google.com/maps/documentation/javascript/basics

Baidu Map API reference document: http://developer.baidu.com/map/jsmobile.htm

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：js read and write json file example code_javascript skillsNext article：js read and write json file example code_javascript skills

Related articles

See more