Google Maps API地图应用示例分享
作者:bea
效果(新版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/
效果(新版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"></div></body></html>
Google Maps JavaScript API v3(参考文档):https://developers.google.com/maps/documentation/javascript/basics
百度地图API的参考文档:http://developer.baidu.com/map/jsmobile.htm
有用 | 无用
代码:
<!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"></div></body></html>
Google Maps JavaScript API v3(参考文档):https://developers.google.com/maps/documentation/javascript/basics
百度地图API的参考文档:http://developer.baidu.com/map/jsmobile.htm
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- 鼠标悬浮显示二级菜单效果的jquery实现
- BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
- JavaScript中的迭代器和生成器详解
- JS实现倒计时和文字滚动的效果实例
- javascript设置连续两次点击按钮时间间隔的方法
- jQuery中parents()和parent()的区别分析
- 原生javascript实现获取指定元素下所有后代元素的方法
- JS对象与json字符串格式转换实例
- 2014年最火的Node.JS后端框架推荐
- Nodejs极简入门教程(三):进程
- Dojo Javascript 编程规范 规范自己的JavaScript书写
- Nodejs极简入门教程(二):定时器
- Nodejs极简入门教程(一):模块机制
- JavaScript极简入门教程(三):数组
- JavaScript极简入门教程(二):对象和函数
- JavaScript极简入门教程(一):基础篇
- 上传图片预览JS脚本 Input file图片预览的实现示例
- 实用框架(iframe)操作代码
- form.submit()不能提交表单的原因分析