台灣最大程式設計社群網站
線上人數
1107
 
會員總數:246631
討論主題:190057
歡迎您免費加入會員
討論區列表 >> Java Script/ Node.js >> google map 替換景點的ICON圖標
[]  
[我要回覆]
1
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
google map 替換景點的ICON圖標
價值 : 50 QP  點閱數:1867 回應數:1
樓主

阿南
門外漢
0 38
606 55
發送站內信

請教這裡的JAVASCRIPT高手:

小弟最近在學習PHP
主要是與GOOGLE MAP作結合

我想替換GOOGLE MAP的紅色ICON圖標
而且是一個景點就一個不一樣的圖標
而且這個圖標 我可以去後台新增此圖ICON

目前透過後台新增景點資訊
可以撈出景點的資料與顯示位置
但就是不知如何更該圖標

但我知GOOGLE MAP的參數有一個ICON
例如:
icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'iconGreen

但這樣只能讓所有圖標都長一樣


下面這段是我自己加的
icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'iconGreen

另外 景點資料是去撈後台的PHP
例如 name:森心咖啡館
lat:'23.973028'
...等都是去撈後台
是我去新增資料的

我想要在每一筆資料多一個圖標的欄位
但JAVASCRIPT 卻不知如何改起


有點不是很熟JAVASCRIPT,
想向請這裡的高手請益

以下是程式碼的部份
=================
<script language="javascript">

var google_maps_data = [
{'name':'森心咖啡館', 'lat':'23.973028', 'lng':'120.975600', 'desc':'森心咖啡館是一個有情侶約會、吃吃喝喝、家庭聚會的景觀餐廳,網友認為值得推薦的有:焗烤奶油海鮮義大利貝殼麵。', 'tel':'049-2983278', 'addr':'台灣南投縣埔里鎮信義路121號'},

{'name':'沃克泰泰式料理', 'lat':'23.968915', 'lng':'120.946367', 'desc':'沃克泰泰式料理是一個有吃吃喝喝、平價、免服務費的泰式料理,網友認為值得推薦的有:打拋肉、青木瓜、椰汁雞。', 'tel':'049-2918569', 'addr':'南投縣埔里鎮梅村路22號'},
];

//顯示GoogleMap
function loadGoogleMap() {
//設定中心點
var center = new google.maps.LatLng(23.96612, 120.96626);
var markers = [];
//設定地圖顯示圖層
var map = new google.maps.Map(document.getElementById('map_div'), {
zoom: 14,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});

//加上景點
var data_count = google_maps_data.length;
for (var i = 0; i <data_count; i++) {
var mapItem = google_maps_data[i];
var latLng = new google.maps.LatLng(mapItem.lat, mapItem.lng);
var marker = new google.maps.Marker({
position: latLng,
title: mapItem.name,
map: map,
icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'iconGreen
})
markers.push(marker);

var message = "<div class='markdiv'><div class='marktitle'>" + mapItem.name + "</div>" + mapItem.desc + "<br><div class='contactinfo'>電話:"+mapItem.tel+"<br>住址:"+mapItem.addr+"</div><a href='#' onClick='show_streeview()'><img src='http://cbk0.google.com/cbk?output=thumbnail&w=250&h=50&ll="+mapItem.lat+","+mapItem.lng+"'></a></div>"
attachMessage(i, message, latLng);
}

//加上景點infowindow
var info_window = [];
function attachMessage(index, msg, latLng) {
google.maps.event.addListener(markers[index], 'click', function(event) {
close_other_makers(index);
if (info_window[index]){
info_window[index].close();
info_window[index] = null;
return;
}
info_window[index] = new google.maps.InfoWindow({
content: msg,
maxWidth: 280
});
info_window[index].open(markers[index].getMap(), markers[index]);
//將目前景點設為中心
markers[index].getMap().panTo(latLng);
//設定該景點街景
panorama = markers[index].getMap().getStreetView();
panorama.setPosition(latLng);
panorama.setPov({
heading: 0,
zoom: 1,
pitch: 0
});
});
}
//關閉所有景點infowindow
function close_other_makers(index){
var makers_count = markers.length;
for (var i=0;i<makers_count;i++){
if ( i == index ) continue;
if (info_window[i]) info_window[i].close();
info_window[i] = null;
}
}
}
//顯示街景
function show_streeview() {
panorama.setVisible(true);
}
//啟動 GoogleMap
google.maps.event.addDomListener(window, 'load', loadGoogleMap);
</script>

本篇文章發表於2015-04-26 18:45
1樓
回應

blackwing
捐贈 VP 給 blackwing 檢舉此回應
找到一個網址
說明為不同的marker設定icon的方法
可以試試看
https://developers.google.com/maps/tutorials/customizing/custom-markers
本篇文章回覆於2015-07-04 00:22
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
   
1

回覆
如要回應,請先登入.