做网站如怎么加入google地图,及显示周边设施

2019-09-15 郑州网站建设  

google地图.png

地图是做网站过程中常用到的功能。而且在有些网站中会用到要显示地图周边设施(如:餐馆,学校,医院等)。如下面这个链接:?zuobiao=40.6849297657,-73.9729589224&title=Soxford%20St ,我们可以看到在我们定位的这个地址中有很多的其它标记,并且怎么做到的呢?下面就此做下详细讲解。

 

1,引入googleapi接口地址

接口地址为:?v=3.5&key=AIzaSyBgSJtU6tArUI8YsMyYq7xBaMOwHj820B8

我们可以看到上面地址有两个参数,V就是版本号默认3.5就可以,key是我们申请的key,申请地址: 

 

 

2,在地图上显示我们要标记的坐标

var myLatlng = new 谷歌.maps.LatLng(40.6849297657,-73.9729589224);

var mapOptions = {

zoom: 14,

center: myLatlng

}

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

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

position: myLatlng,

map: map,

title: 'Soxford St'

});

 

 

40.6849297657,-73.9729589224 这个就是我们要定位的坐标。

Soxford St这个是标题(当鼠标放到标记点上会提示)。

 

3,在地图上标记周边设施

到这里我们已经完成地图这一步骤了,那么怎么显示周边设施呢。我们这里用到了https://foursquare.com/ 这个网站接口,有兴趣了解Foursquare是干什么的可以baidu了解一下。

接口地址:https://api.foursquare.com/v2/venues/search?ll=40.6849297657,-73.9729589224&oauth_token=CRPTRAJRUVG2210XJD412F3ZBFX4HM5O1S43Q30RVCMSSZDO&v=20160902&query=restaurant

一共有3个参数,ll就是上面我们提到的坐标,oauth_token是key,我们通过上面URL注册可以申请到的。v是版本号用默认的即可。query是搜索Keywords,即我们要在坐标周边搜索哪些设施。具体代码如何样的,这里就不一步一步讲了,可以download到本地看源代码。

附件地址:谷歌_map.zip


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