网上大多数Google map的例子都是页面加载的时候把Map也加载,按照这样的方式把google map放到选项卡中(显示map的选项卡默认是display: none的),map将无法正常显示.
原因不是很清楚,应该是google map的Js加载问题
实现的效果如图:
下面的关键的代码,详细的例子请参考附件
<script src="http://ditu.google.com/maps?file=api&v=2&key=&hl=zh-CN" type="text/javascript"></script>
var cenx = 22.50128;
var ceny = 113.914619;
var stzoom = 14;
var map;
//使用google的jsapi来加载google map
function initLoader() {
var script = document.createElement("script");
script.src = "http://www.google.com/jsapi?key=abc&callback=loadMaps";
script.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(script);
}
function loadMaps() {
google.load("maps", "2", {"callback" : initialize()});
}
function initialize()
map=new GMap2(document.getElementById("map_canvas"));
//设置地图的中心坐标.
var loc = new GLatLng(cenx,ceny);
map.setCenter(loc,stzoom);
map.addOverlay(createMarker(loc));
}
//增加标注
function createMarker(point) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function(){marker.openInfoWindowHtml("标注");});
return marker;
}
- 大小: 25.7 KB
分享到:
相关推荐
在代码中,可以通过`MapView`对象的`getMapAsync()`方法获取到`GoogleMap`实例,进一步设置地图的属性,如缩放级别、标记、路线等。为了测试地图页是否正常显示,确实建议在真机上进行调试,因为模拟器可能不支持...
- **步骤一**:在项目仪表板中,选择“凭证”选项卡。 - **步骤二**:点击“创建凭证”按钮,并选择“API密钥”。 - **步骤三**:根据提示创建API密钥,并确保记录下密钥值。 #### 3. 配置API访问权限 - **步骤一*...
9.6 移动版GoogleMap——Geocoder反查Address对象 9.7 规划导航路径——DirectionsRoute 9.8 移动设备上的Picasa相册——GooglePicasaAPI 9.9 随身翻译机——GoogleTranslateAPI 第10章 创意Android程序设计 10.1 ...
语言:English 打开Google地图内联 “打开内联地图”是从您所选择的单词加载Google Map的扩展名。... * Google Map加载内联,因此您无需打开一个新选项卡。 资源 https://github.com/kyo-ago/open-inline-map-extense
确保经纬度单位设置为“°”,并在“3D显示”选项卡中选择“Decimal Degrees”。 接下来,保存Google地图为图像文件,例如JPG格式。这一步骤中,可以根据需要选择合适的分辨率,以平衡图像质量和加载速度。保存的...
标题中的“Restarant-list-google-map-api”表明这是一个与餐厅列表相关的项目,它利用了Google Maps API来展示餐厅的位置。这个项目可能是一个Web应用程序,帮助用户查找附近的餐馆,并在地图上直观地显示出来。 ...
打开开发者工具,找到Vue选项卡,可以看到组件树、数据、生命周期钩子等信息。 1. **Vue DevTools**:这是官方提供的一个强大的浏览器插件,可以在Chrome、Firefox等浏览器中安装。它能显示应用的组件结构、数据、...
9.6 移动版GoogleMap——Geocoder反查Address对象 9.7 规划导航路径——DirectionsRoute 9.8 移动设备上的Picasa相册——GooglePicasaAPI 9.9 随身翻译机——GoogleTranslateAPI 第10章 创意Android程序设计 10.1 ...
9.6 移动版Google Map 9.7 规划导航路径 9.8 移动设备上的Picasa相册 9.9 随身翻译机 第10章 创意Android程序设计 10.1 手机手电筒 10.2 GPS轨迹记录器 10.3 女性贴身...
- **“使用”选项卡**:设置如何使用Web服务中的数据。 - **“高级”选项卡**:进行更详细的配置,如安全设置等。 - **配置XML数据连接**:从XML文件中读取数据。 - **CrystalReport数据使用程序**:与Crystal ...
9.6 移动版GoogleMap——Geocoder反查Address对象 9.7 规划导航路径——DirectionsRoute 9.8 移动设备上的Picasa相册——GooglePicasaAPI 9.9 随身翻译机——GoogleTranslateAPI 第10章 创意Android程序设计 10.1 ...
项目5-邻里地图Udacity项目5 波特兰是我想再次... 单击搜索结果右侧的“隐藏/显示”选项卡会将结果移出屏幕,以更好地查看地图。 使用进行了测试,为各种尺寸的屏幕添加了响应式设计更改。 使用下面的URL签出我的项目。
v1.4.1发行说明修复了针对非HTTP协议的主机名的错误修复程序v1.4.0发行说明切换到onBeforeSendHeaders以捕获更多请求主要重构和代码清理更新至jQuery v1.3.8的最新版本发行说明切换至窗口从地图的标签选项卡-----此...
9.6 移动版GoogleMap——Geocoder反查Address对象 9.7 规划导航路径——DirectionsRoute 9.8 移动设备上的Picasa相册——GooglePicasaAPI 9.9 随身翻译机——GoogleTranslateAPI 第10章 创意Android程序设计 ...
4. 在"Order and Export"选项卡中,确保所有的Hadoop相关JAR包都排在JRE System Library之前,以便在编译和运行时正确加载依赖。 配置完成后,你可以开始编写MapReduce程序,定义Mapper和Reducer类,以及...
在“图层”>“属性”>“标签”选项卡中设置。 五、创建基站位置图 1. 排列图层:根据需要调整图层的显示顺序,确保基站图层位于最上层。 2. 添加背景地图:可以插入底图服务,如谷歌地图、OpenStreetMap等,以...
9.6 移动版GoogleMap——Geocoder反查Address对象 9.7 规划导航路径——DirectionsRoute 9.8 移动设备上的Picasa相册——GooglePicasaAPI 9.9 随身翻译机——GoogleTranslateAPI 第10章 创意Android程序设计 10.1 ...