google地图引入网页
2015-08-04 16:13
585 查看
<script src="http://maps.google.com/maps?file=api&v=3&sensor=true&key=ABQIAAAAIHAbNjJQCreFjDptcT4yjBR2jvTZOFQfaCn8QtYrCty2-BDc7RSG6t6loXYOXGxFmfXf9-Le0DVAQA" type="text/javascript"></script>
//接下来我要把地图显示在一个框框里面去,也就是DIV里面
<div id="map_canvas" style="width: 500px; height: 300px"></div>
<div id="show_x"></div><!--显示X坐标-->
<div id="show_y"></div><!--显示Y坐标-->
<div id="zoom"></div><!--显示缩放级别-->
//下面将会是实例化google库,开始要干了!
<script language="javascript">
var map = new GMap2(document.getElementById("map_canvas"));//实例化,显示google地图
var center = new GLatLng(39.916912086904624,116.39697074890137); 指定的坐标
map.setCenter(center,13);//指定坐标,缩放级别,setcenter 设置地图中心位置
//var mapControl = new GMapTypeControl(); //控件
//map.addControl(mapControl); //控件
//map.addControl(new GLargeMapControl()); //控件
var marker = new GMarker(center, {draggable: true});//是否可以拖动
map.addOverlay(marker); //生成了一个小标记 //marker
//下面的部分是什么呢?
GEvent.addListener(map, 'click', function(overlay, point) {
if (point) {
document.getElementById("show_x").innerHTML = point.x; //获取当前是x的坐标
document.getElementById("show_y").innerHTML = point.y; //获取当前是y坐标
document.getElementById("zoom").innerHTML = map.getZoom(); //获取当前是缩放级别
}
});
</script>
//接下来我要把地图显示在一个框框里面去,也就是DIV里面
<div id="map_canvas" style="width: 500px; height: 300px"></div>
<div id="show_x"></div><!--显示X坐标-->
<div id="show_y"></div><!--显示Y坐标-->
<div id="zoom"></div><!--显示缩放级别-->
//下面将会是实例化google库,开始要干了!
<script language="javascript">
var map = new GMap2(document.getElementById("map_canvas"));//实例化,显示google地图
var center = new GLatLng(39.916912086904624,116.39697074890137); 指定的坐标
map.setCenter(center,13);//指定坐标,缩放级别,setcenter 设置地图中心位置
//var mapControl = new GMapTypeControl(); //控件
//map.addControl(mapControl); //控件
//map.addControl(new GLargeMapControl()); //控件
var marker = new GMarker(center, {draggable: true});//是否可以拖动
map.addOverlay(marker); //生成了一个小标记 //marker
//下面的部分是什么呢?
GEvent.addListener(map, 'click', function(overlay, point) {
if (point) {
document.getElementById("show_x").innerHTML = point.x; //获取当前是x的坐标
document.getElementById("show_y").innerHTML = point.y; //获取当前是y坐标
document.getElementById("zoom").innerHTML = map.getZoom(); //获取当前是缩放级别
}
});
</script>
相关文章推荐
- ubuntu14.04重装sogou
- ubuntu14.04重装sogou 分类: 软件插件学习 2015-08-04 15:00 7人阅读 评论(0) 收藏
- django学习笔记之开发功能之前的准备
- .bat文件中start, pause,goto以及rem的用法
- Algorithms—199.Binary Tree Right Side View
- LightOJ 1051 Good or Bad 解题报告
- Lumia1520刷欧版固件去除联通logo使用4G
- django学习笔记之(model设计与实现)
- Django开发中DJANGO_SETTINGS_MODULE is undefined解决方案
- Django+ajax实现页面底部加载
- 利用Google Earth制作DEM
- Algorithms—215.Kth Largest Element in an Array
- win7下安装Django
- Algorithms—216.Combination Sum III
- cloudfoundry上搭建go服务端
- ceph存储 Google perftools工具内存检测以及性能分析
- Percolator Google的海量数据增量处理系统
- p3115 高精度练习之减法
- p3117 高精度练习之乘法
- hd3635 Dragon Balls(之前题意翻译有误,已改正)