网站建设中如何引入谷歌地图代码?

2016-01-26 分类：网站建设

在建设网站中用到地图是很常见的，在国内大部分都是用百度地图，但是有时候可能会用到国外地址，这时候就只能使用谷歌地图了，下面就介绍常用网站中使用谷歌地图方法集合。

一，使用框架引入谷歌地图

用框架引入谷歌地址是最简单的方法，不是专业开发人员也可以操作。登陆ditu.google.cn地图，输入地址信息，如："成都东方明珠"，把地图移动到合适的视角，点击分享链接后，有两个信息。第一个是一个网址，用于在浏览器中打开的；第二个是一个框架的代码，网站中通常使用这个代码。把代码复制到网站中去就可以了，里面可以自己设定度度，高度，语言等信息。

二，使用谷歌地图api开发

Api开发必须要专业人员才可以的，要会javascript,和简单的html。

谷歌地图api开发文档写的很全（如果打不开请使用fanqiang软件）：

说明文档：https://developers.google.com/maps/documentation/javascript/tutorial;

方法调用说明：https://developers.google.com/maps/documentation/javascript/reference

Api参考：https://developers.google.com/maps/documentation/javascript/reference

示例代码：https://developers.google.com/maps/documentation/javascript/examples/

文档写的很详细，要是全部阅读下来至少要花几个月以上时间，对于不是全部依赖地图的网站来说太多了，下面我们就，海外房地产用到地图来演示。

1，首页我们要在网页中引入谷歌的javascript包：

注意：官方给出的是：https://maps.googleapis.com/maps/api/js 但是因为谷歌被屏蔽的原因国内使用这个谷歌api打不开，所以建议使用google.cn这个引用地址

2，地图函数

function initialize() {

var myLatlng = new google.maps.LatLng(32.9556728100,112.5659179688);//谷歌坐标地址

var mapOptions = {

zoom: 14,//这里是地图的放大缩小

: myLatlng

}

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

var marker = new google.maps.Marker({

position: myLatlng,

map: map,

title: '这是我的地方'//坐标点提示

});

}

调用函数很简单，只有一个函数，大致意思解释一下：

var myLatlng = new google.maps.LatLng(32.9556728100,112.5659179688);后面的一串数字就是坐标点。

如何获取坐标点呢？

右上角有个"google实验室"里面有个显示经纬度，启用。然后鼠标放在地图上找到点后右击选择"放置经纬度标记"，然后就可以复制了。如下图：

var marker = new google.maps.Marker({

position: myLatlng,

map: map,

title: '这是我的地方'//坐标点提示

});

这段函数是在需要的位置上加个红色的标记，title是鼠标放在上面显示的文字，这个大部分都会用到的，如果不需要把上面那段代码删除即可。

2，html中需有一个dom给地图展示的，在div上添加一个id为"map-canvas"即可，如：

3，函数写完以后，在页面加载好以后执行函数就可以了，可以在body里添加onload="initialize()"，也可以放在jquery的ready函数里

下面给出完整的示例代码：

星空体育app最新版本(2024已更新)