資訊專欄INFORMATION COLUMN
摘要：最近參與頁面插入谷歌地圖的項目，因此在此分享下我的學習經(jīng)驗，第一次寫，請多擔待首先，講下項目的需求，在網(wǎng)頁進行點擊產(chǎn)品列表，渲染對應(yīng)的地圖信息以及對應(yīng)的詳情信息，并且修改谷歌固有標簽以及點擊標簽出現(xiàn)，展示詳細信息以及對應(yīng)的產(chǎn)品。
最近參與頁面插入谷歌地圖API的項目，因此在此分享下我的學習經(jīng)驗，第一次寫，請多擔待！
首先，講下項目的需求，在網(wǎng)頁進行點擊產(chǎn)品列表，渲染對應(yīng)的地圖信息以及對應(yīng)的詳情信息，并且修改谷歌固有標簽以及點擊標簽出現(xiàn)model，展示詳細信息以及對應(yīng)的產(chǎn)品。
加載谷歌API并插入頁面
My Google Maps Demo
并且公司需要我們在地圖高度變高時，需要對標簽進行統(tǒng)計，正好Google maps api中正好有對這一方面進行設(shè)計，就是‘Marker Clustering’ 【標記聚類】
如果需要對聚類標簽進行樣式修改，可以使用：
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() 繪制了一個自定義的圓形，并且回調(diào)會maps作為自定義標簽。
初始化渲染完地圖后，需要對地圖的交互動作進行監(jiān)聽
自我認為經(jīng)常用到的動作事件：
bounds-changed：界面發(fā)生變化
center-changed：中心點發(fā)生變化
click：單擊
dbclick:雙擊
drag:拖動
heading-changed:標題改變
maptypeid：地圖樣式改變
mousemove：在地圖中移動
rightclick:高度點擊
zoom-changed:地圖高度發(fā)生改變
添加事件：
map.addListener("dbclick",function(){})
標記點添加事件：
markers.map(function(v){
v.addListener("click",function(){})
})
刪除事件：[removeListener]
并且項目中有一需求，需要對詳細地址進行轉(zhuǎn)換為經(jīng)緯度，因此需要采用Google Maps Geocoding API請求接口
將地址信息轉(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
})
以上是我在一個小項目中主要參考的google maps API 以及 Google Maps Geocoding API 的地方
具體文檔：
google maps API
Google Maps Geocoding API
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/54059.html
摘要：最近參與頁面插入谷歌地圖的項目，因此在此分享下我的學習經(jīng)驗，第一次寫，請多擔待首先，講下項目的需求，在網(wǎng)頁進行點擊產(chǎn)品列表，渲染對應(yīng)的地圖信息以及對應(yīng)的詳情信息，并且修改谷歌固有標簽以及點擊標簽出現(xiàn)，展示詳細信息以及對應(yīng)的產(chǎn)品。 最近參與頁面插入谷歌地圖API的項目，因此在此分享下我的學習經(jīng)驗，第一次寫，請多擔待！ 首先，講下項目的需求，在網(wǎng)頁進行點擊產(chǎn)品列表，渲染對應(yīng)的地圖信息以及對...
摘要：使用前準備能訪問外網(wǎng)，有賬戶。進入開發(fā)者控制臺谷歌開發(fā)者控制臺創(chuàng)建項目初次需要創(chuàng)建一個項目，作為使用的依托。我們創(chuàng)建名為的項目，進入后再選擇和服務(wù)模塊。密鑰是使用的必須的標識符，可以多地多方使用。的很多服務(wù)不是靜態(tài)的可以與對比。 使用前準備 能訪問外網(wǎng)，有Google賬戶。 進入開發(fā)者控制臺 谷歌開發(fā)者控制臺 showImg(https://segmentfault.com/img/b...
摘要：最近項目用到谷歌地圖，但是看谷歌文檔，對于國人來說，還是比較吃力的，網(wǎng)上找資料也并沒有太多的資料，所以就想分享給大家。顯示了整個地球地圖的完全縮放。 最近項目用到谷歌地圖，但是看谷歌api文檔，對于國人來說，還是比較吃力的，網(wǎng)上找資料也并沒有太多的資料，所以就想分享給大家。但是因為本人太懶了，每次研究技術(shù)完事時間一久就忘了，更別提分享了，在朋友的鼓勵支持之下，重新開始寫博客，共享給大家...
摘要：谷歌地圖形狀官網(wǎng)簡介您可以向地圖添加各種形狀。移除園如需移除地圖中的圓，請調(diào)用方法，并傳遞作為其自變量。將形狀設(shè)置為可拖動默認情況下，在地圖上繪制的形狀位置固定。 最近加班真是累成狗啊，天天10點以后下班。還有其他的事情，總之都是要死要死的感覺，苦逼的程序員。谷歌地圖形狀官網(wǎng)：https://developers.google.com... 簡介 您可以向地圖添加各種形狀。形狀是地圖上...
閱讀 1229·2021-09-26 09:55
閱讀 3200·2019-08-30 15:55
閱讀 971·2019-08-30 15:53
閱讀 2297·2019-08-30 13:59
閱讀 2383·2019-08-29 13:08
閱讀 1111·2019-08-29 12:19
閱讀 3307·2019-08-26 13:41
閱讀 421·2019-08-26 13:24
