做网站中怎么引入google地图代码?

2019-09-19 郑州网站建设  

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

一,使用框架引入google地图

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

google地图说明.jpg

二,使用google地图api开发

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

google地图api开发文档写的很全(如果打不开请使用fanqiang软件):

说明文档:

办法调用说明:

Api参考:

示例代码:

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

1,首页我们要在网页中引入google的javascript包:

<script src=http://www.shwzzz.cn/news/xuetang/"http:/maps.谷歌.cn/maps/api/js?v=3.exp&sensor=false"></script>
注意:官方给出的是:https://maps.谷歌apis.com/maps/api/js 但是因为google被屏蔽的原因国内使用这个googleapi打不开,所以建议使用谷歌.cn这个引用地址

2,地图函数

function initialize() {

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

  var mapOptions = {

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

    center: myLatlng

  }

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

 

  var marker = new 谷歌.maps.Marker({

      position: myLatlng,

      map: map,

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

  });

}

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

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

怎么获取坐标点呢?

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

google地图说明2.jpg

 

 

  var marker = new 谷歌.maps.Marker({

      position: myLatlng,

      map: map,

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

  });

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

2,html中需有一个dom给地图展示的,在div上添加一个id为"map-canvas"即可,如:<div id="map-canvas"></div>

 

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

 

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

<!DOCTYPE html>

<html>

<head>

<title>google地图调用</title>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

<meta charset="utf-8">

<style>

html, body, #map-canvas {

height: 500px;

width:600px;

margin: 0px;

padding: 0px

}

</style>

<script>

function initialize() {

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

  var mapOptions = {

    zoom: 14,

    center: myLatlng

  }

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

 

  var marker = new 谷歌.maps.Marker({

      position: myLatlng,

      map: map,

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

  });

}

</script>

  </head>

  <body onload="initialize()">

    <div id="map-canvas"></div>

  </body>

</html>

 


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/web/2951.html转载请标明出处,谢谢合作!
标签:
  • 谷歌地图