网站建设
建站学堂Website Technology

您的位置:首页 > 新闻动态 > 建站学堂

网站建设如如何加入谷歌地图,及显示周边设施

admin 建站学堂 2017-03-17

谷歌地图.png

地图是网站建设过程中常用到的功能。而且在有些网站中会用到要显示地图周边设施(如:餐馆,学校,医院等)。如下面这个链接:http://www.shwzzz.cn/demo/google_map/index.php?zuobiao=40.6849297657,-73.9729589224&title=Soxford%20St ,我们可以看到在我们定位的这个地址中有很多的其它标记,并且如何做到的呢?下面就此做下详细讲解。
 
1,引入谷歌api接口地址
接口地址为:http://ditu.google.cn/maps/api/js?v=3.5&key=AIzaSyBgSJtU6tArUI8YsMyYq7xBaMOwHj820B8
我们可以看到上面地址有两个参数,V就是版本号默认3.5就可以,key是我们申请的key,申请地址:http://code.google.com/intl/zh-CN/android/maps-api-signup.html 
 
 
2,在地图上显示我们要标记的坐标
var myLatlng = new google.maps.LatLng(40.6849297657,-73.9729589224);
var mapOptions = {
zoom: 14,
center: myLatlng
}
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker= new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Soxford St'
});
 
 
40.6849297657,-73.9729589224 这个就是我们要定位的坐标。
Soxford St这个是标题(当鼠标放到标记点上会提示)。
 
3,在地图上标记周边设施
到这里我们已经完成地图这一步骤了,那么如何显示周边设施呢。我们这里用到了https://foursquare.com/ 这个网站接口,有兴趣了解Foursquare是干什么的可以百度了解一下。
接口地址:https://api.foursquare.com/v2/venues/search?ll=40.6849297657,-73.9729589224&oauth_token=CRPTRAJRUVG2210XJD412F3ZBFX4HM5O1S43Q30RVCMSSZDO&v=20160902&query=restaurant
一共有3个参数,ll就是上面我们提到的坐标,oauth_token是key,我们通过上面网址注册可以申请到的。v是版本号用默认的即可。query是搜索关键词,即我们要在坐标周边搜索哪些设施。具体代码怎么样的,这里就不一步一步讲了,可以下载到本地看源代码。
附件地址:google_map.zip
该文章由上海集锦科技网站建设http://www.shwzzz.cn原创编写,转载请保留此地址!否则视为侵权,谢谢合作!

最新案例

相关文章

更多最新文章

热搜关键词

上海集锦信息科技有限公司版权所有 Copyright©2012-2015 http://www.shwzzz.cn All Rights Reserved 百度统计 备案号:沪ICP备13010428号