首頁(yè) 新聞動(dòng)態(tài) 網(wǎng)站建設(shè) 網(wǎng)站建設(shè)如如何加入谷歌地圖,及顯示周邊設(shè)施

網(wǎng)站建設(shè)如如何加入谷歌地圖,及顯示周邊設(shè)施

來(lái)源:網(wǎng)站建設(shè) | 時(shí)間:2017-03-17 | 瀏覽:

谷歌地圖.png

地圖是網(wǎng)站建設(shè)過(guò)程中常用到的功能。而且在有些網(wǎng)站中會(huì)用到要顯示地圖周邊設(shè)施(如:餐館,學(xué)校,醫(yī)院等)。如下面這個(gè)鏈接:http://m.bdsjkw.cn/demo/google_map/index.php?zuobiao=40.6849297657,-73.9729589224&title=Soxford%20St ,我們可以看到在我們定位的這個(gè)地址中有很多的其它標(biāo)記,并且如何做到的呢?下面就此做下詳細(xì)講解。
 
1,引入谷歌api接口地址
接口地址為:http://ditu.google.cn/maps/api/js?v=3.5&key=AIzaSyBgSJtU6tArUI8YsMyYq7xBaMOwHj820B8
我們可以看到上面地址有兩個(gè)參數(shù),V就是版本號(hào)默認(rèn)3.5就可以,key是我們申請(qǐng)的key,申請(qǐng)地址:http://code.google.com/intl/zh-CN/android/maps-api-signup.html 
 
 
2,在地圖上顯示我們要標(biāo)記的坐標(biāo)
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 這個(gè)就是我們要定位的坐標(biāo)。
Soxford St這個(gè)是標(biāo)題(當(dāng)鼠標(biāo)放到標(biāo)記點(diǎn)上會(huì)提示)。
 
3,在地圖上標(biāo)記周邊設(shè)施
到這里我們已經(jīng)完成地圖這一步驟了,那么如何顯示周邊設(shè)施呢。我們這里用到了https://foursquare.com/ 這個(gè)網(wǎng)站接口,有興趣了解Foursquare是干什么的可以百度了解一下。
接口地址:https://api.foursquare.com/v2/venues/search?ll=40.6849297657,-73.9729589224&oauth_token=CRPTRAJRUVG2210XJD412F3ZBFX4HM5O1S43Q30RVCMSSZDO&v=20160902&query=restaurant
一共有3個(gè)參數(shù),ll就是上面我們提到的坐標(biāo),oauth_token是key,我們通過(guò)上面網(wǎng)址注冊(cè)可以申請(qǐng)到的。v是版本號(hào)用默認(rèn)的即可。query是搜索關(guān)鍵詞,即我們要在坐標(biāo)周邊搜索哪些設(shè)施。具體代碼怎么樣的,這里就不一步一步講了,可以下載到本地看源代碼。
附件地址:google_map.zip
TAG:谷歌地圖地圖標(biāo)記
在線咨詢
服務(wù)熱線
服務(wù)熱線:400-888-9358
TOP