資訊專(zhuān)欄INFORMATION COLUMN
摘要：最近參與頁(yè)面插入谷歌地圖的項(xiàng)目，因此在此分享下我的學(xué)習(xí)經(jīng)驗(yàn)，第一次寫(xiě)，請(qǐng)多擔(dān)待首先，講下項(xiàng)目的需求，在網(wǎng)頁(yè)進(jìn)行點(diǎn)擊產(chǎn)品列表，渲染對(duì)應(yīng)的地圖信息以及對(duì)應(yīng)的詳情信息，并且修改谷歌固有標(biāo)簽以及點(diǎn)擊標(biāo)簽出現(xiàn)，展示詳細(xì)信息以及對(duì)應(yīng)的產(chǎn)品。
最近參與頁(yè)面插入谷歌地圖API的項(xiàng)目，因此在此分享下我的學(xué)習(xí)經(jīng)驗(yàn)，第一次寫(xiě)，請(qǐng)多擔(dān)待！
首先，講下項(xiàng)目的需求，在網(wǎng)頁(yè)進(jìn)行點(diǎn)擊產(chǎn)品列表，渲染對(duì)應(yīng)的地圖信息以及對(duì)應(yīng)的詳情信息，并且修改谷歌固有標(biāo)簽以及點(diǎn)擊標(biāo)簽出現(xiàn)model，展示詳細(xì)信息以及對(duì)應(yīng)的產(chǎn)品。
加載谷歌API并插入頁(yè)面
My Google Maps Demo
并且公司需要我們?cè)诘貓D高度變高時(shí)，需要對(duì)標(biāo)簽進(jìn)行統(tǒng)計(jì)，正好Google maps api中正好有對(duì)這一方面進(jìn)行設(shè)計(jì)，就是‘Marker Clustering’ 【標(biāo)記聚類(lèi)】
如果需要對(duì)聚類(lèi)標(biāo)簽進(jìn)行樣式修改，可以使用：
map.data.Setstyle(function(){
var magitude = featrue.getProperty("map");
return {
icon:getCircle(magitude);
}
});
function gitCircle(magitude){
var circle = {
path:google.maps.Symbolpath.CIRCLE,
scale:magnitude,
};
return circle;
}
gitCircle() 繪制了一個(gè)自定義的圓形，并且回調(diào)會(huì)maps作為自定義標(biāo)簽。
初始化渲染完地圖后，需要對(duì)地圖的交互動(dòng)作進(jìn)行監(jiān)聽(tīng)
自我認(rèn)為經(jīng)常用到的動(dòng)作事件：
bounds-changed：界面發(fā)生變化
center-changed：中心點(diǎn)發(fā)生變化
click：?jiǎn)螕?/p>
dbclick:雙擊
drag:拖動(dòng)
heading-changed:標(biāo)題改變
maptypeid：地圖樣式改變
mousemove：在地圖中移動(dòng)
rightclick:高度點(diǎn)擊
zoom-changed:地圖高度發(fā)生改變
添加事件：
map.addListener("dbclick",function(){})
標(biāo)記點(diǎn)添加事件：
markers.map(function(v){
v.addListener("click",function(){})
})
刪除事件：[removeListener]
并且項(xiàng)目中有一需求，需要對(duì)詳細(xì)地址進(jìn)行轉(zhuǎn)換為經(jīng)緯度，因此需要采用Google Maps Geocoding API請(qǐng)求接口
將地址信息轉(zhuǎn)換為經(jīng)緯度：
$.get("https://maps.googleapis.com/maps/api/geocode/json?address="地址信息"&key=YOUR_API_KEY"，(data)=>{
latLng = data.results[0].geomety.location
})
將經(jīng)緯度轉(zhuǎn)換為地址信息
$.get("https://maps.googleapis.com/maps/api/geocode/json?latlng=經(jīng)度,緯度&key=YOUR_API_KEY",=>(data){
inWhere = data.plus_code.compound_code
})
以上是我在一個(gè)小項(xiàng)目中主要參考的google maps API 以及 Google Maps Geocoding API 的地方
具體文檔：
google maps API
Google Maps Geocoding API
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/104742.html
摘要：最近參與頁(yè)面插入谷歌地圖的項(xiàng)目，因此在此分享下我的學(xué)習(xí)經(jīng)驗(yàn)，第一次寫(xiě)，請(qǐng)多擔(dān)待首先，講下項(xiàng)目的需求，在網(wǎng)頁(yè)進(jìn)行點(diǎn)擊產(chǎn)品列表，渲染對(duì)應(yīng)的地圖信息以及對(duì)應(yīng)的詳情信息，并且修改谷歌固有標(biāo)簽以及點(diǎn)擊標(biāo)簽出現(xiàn)，展示詳細(xì)信息以及對(duì)應(yīng)的產(chǎn)品。 最近參與頁(yè)面插入谷歌地圖API的項(xiàng)目，因此在此分享下我的學(xué)習(xí)經(jīng)驗(yàn)，第一次寫(xiě)，請(qǐng)多擔(dān)待！ 首先，講下項(xiàng)目的需求，在網(wǎng)頁(yè)進(jìn)行點(diǎn)擊產(chǎn)品列表，渲染對(duì)應(yīng)的地圖信息以及對(duì)...
摘要：使用前準(zhǔn)備能訪問(wèn)外網(wǎng)，有賬戶(hù)。進(jìn)入開(kāi)發(fā)者控制臺(tái)谷歌開(kāi)發(fā)者控制臺(tái)創(chuàng)建項(xiàng)目初次需要?jiǎng)?chuàng)建一個(gè)項(xiàng)目，作為使用的依托。我們創(chuàng)建名為的項(xiàng)目，進(jìn)入后再選擇和服務(wù)模塊。密鑰是使用的必須的標(biāo)識(shí)符，可以多地多方使用。的很多服務(wù)不是靜態(tài)的可以與對(duì)比。 使用前準(zhǔn)備 能訪問(wèn)外網(wǎng)，有Google賬戶(hù)。 進(jìn)入開(kāi)發(fā)者控制臺(tái) 谷歌開(kāi)發(fā)者控制臺(tái) showImg(https://segmentfault.com/img/b...
摘要：最近項(xiàng)目用到谷歌地圖，但是看谷歌文檔，對(duì)于國(guó)人來(lái)說(shuō)，還是比較吃力的，網(wǎng)上找資料也并沒(méi)有太多的資料，所以就想分享給大家。顯示了整個(gè)地球地圖的完全縮放。 最近項(xiàng)目用到谷歌地圖，但是看谷歌api文檔，對(duì)于國(guó)人來(lái)說(shuō)，還是比較吃力的，網(wǎng)上找資料也并沒(méi)有太多的資料，所以就想分享給大家。但是因?yàn)楸救颂珣辛耍看窝芯考夹g(shù)完事時(shí)間一久就忘了，更別提分享了，在朋友的鼓勵(lì)支持之下，重新開(kāi)始寫(xiě)博客，共享給大家...
摘要：谷歌地圖形狀官網(wǎng)簡(jiǎn)介您可以向地圖添加各種形狀。移除園如需移除地圖中的圓，請(qǐng)調(diào)用方法，并傳遞作為其自變量。將形狀設(shè)置為可拖動(dòng)默認(rèn)情況下，在地圖上繪制的形狀位置固定。 最近加班真是累成狗啊，天天10點(diǎn)以后下班。還有其他的事情，總之都是要死要死的感覺(jué)，苦逼的程序員。谷歌地圖形狀官網(wǎng)：https://developers.google.com... 簡(jiǎn)介 您可以向地圖添加各種形狀。形狀是地圖上...
閱讀 1875·2023-04-25 19:51
閱讀 1178·2021-11-15 11:43
閱讀 4538·2021-11-02 14:40
閱讀 2005·2021-10-11 10:59
閱讀 1346·2021-09-22 15:05
閱讀 1035·2021-09-09 09:32
閱讀 655·2019-08-30 15:56
閱讀 556·2019-08-30 15:52
