谷歌地圖和當前位置的自定義標記

我正在構建一個應用程序，該應用程序將根據用戶當前位置在Google地圖上顯示標記。不過，我在Google網站上找到相關文檔相當混亂，我不知道最好從哪裏開始。谷歌地圖和當前位置的自定義標記

我想創建一個自定義標記，其中用戶位於小圖標的形式，然後在上面顯示一個小的彈出窗口，當它被徘徊時會說'你在這裏'。例如 enter image description here

到目前爲止，我有以下代碼來創建谷歌地圖並獲取用戶位置。那麼我怎麼說（以Foursquare爲基礎），會顯示藍色標記： enter image description here ，然後在其上方放置一個彈出窗口，並在窗口內放置一個小化身。它變得像這樣：

我的谷歌到目前爲止的代碼是：

http://jsfiddle.net/dnzZd/

如果有人能幫助我在正確的方向我會非常感激感謝得到。我非常擅長HTML和CSS，因此能夠輕鬆創建樣式並且看起來我想要的（如果GMaps甚至依賴於CSS），它只是一個讓它在屏幕上顯示並且瞭解它如何工作的例子。

感謝所有能幫忙的人。

來源

2012-03-08 Cameron

根據documentation這裏和這working sample。

這裏是你可以添加到你的代碼添加標記（把它放在infowindow代碼之前）。您需要使用MarkerImage類來獲取圖標的正確錨點。

var image = 'http://i.stack.imgur.com/orZ4x.png'; 
var marker = new google.maps.Marker({ 
     position: pos, 
     map: map, 
     icon: image 
    }); 
marker.setMap(map); 

var image = 'http://i.stack.imgur.com/KOh5X.png'; 
var marker = new google.maps.Marker({ 
    position: pos, 
    map: map, 
    icon: image 
}); 
marker.setMap(map);

來源

2012-03-08 23:58:24 andresf

好這真棒:)所以我怎麼會去這樣做的部分你在哪裏懸停並看到工具提示「你在這裏！」非常感謝。 – Cameron 2012-03-09 10:59:44

向標記添加事件偵聽器：http://code.google.com/apis/maps/documentation/javascript/events.html#EventListeners - 因此，您可以使用標記爲'mouseover'的事件：http： //code.google.com/apis/maps/documentation/javascript/reference.html#Marker – andresf 2012-03-09 18:24:12

您可以在一個標記使用一些做的if語句

var image = ''; 

      if (product.category_id == 1) { 

        image = 'images/custom_category_1_icon.png'; 

      } 

      else if (product.category_id == 2) { 

        image = 'images/custom_category_1_icon.png'; 

      } 

      .... 

      else if (product.category_id == N) { 

        image = 'images/custom_category_N_icon.png'; 

      }

//這裏的標誌

var marker = new google.maps.Marker({ 
position: pos, 
map: map, 
icon: image 
}); 
marker.setMap(map);

來源

2015-01-13 15:30:08

谷歌地圖和當前位置的自定義標記

回答

相關問題