首页 > web前端 > js教程 > 正文

Google Maps API地图应用示例分享_javascript技巧

WBOY
发布: 2016-05-16 16:33:04
原创
1454 人浏览过

效果(新版Firefox中测试):

代码:

<br><br><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?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><br><br>  <div id="map"></div><br><br>
登录后复制

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

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

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板