簡體   English   中英

谷歌地圖自定義標記設置默認圖標

[英]google maps custom markers setting default icon

我有一個谷歌地圖應用程序,它從數據庫中提取標記信息並將其寫入 json 文件。 googlemaps 加載 json 並創建點等。根據 json 類型字段,我可以選擇自定義圖標。 如果用戶輸入不同的類型或在字段中放置一個空格,則會破壞地圖。

我想設置一個默認標記圖標來處理數據庫中不在 javascript 選擇器中的空格和新類型。 理想情況下是通配符或默認圖標。 我可以用 mysql 修剪空格並限制提交表單中的輸入類型。 在googlemap js中應用它似乎更靈活。 它將允許新類型而無需對自定義圖標進行編碼。

我來自谷歌地圖 api 的 javascript 代碼:

// set the base url for icons
var iconBase = '/kml/icons/';
    var icons = {
      Camping: {
        icon: iconBase + 'camping.png'
      },
      Access: {
        icon: iconBase + 'boat-ramp.png'
      },
      Showers: {
        icon: iconBase + 'shower.png'
      }
      /* to deal with spaces and types not included above *
        %wildcard%: {
        icon: iconBase + 'red.png'
       }
      */
    };

json 如下所示:

    var siteData =[  
   {  
      "id":"13",
      "name":"Banks",
      "river":"Payette",
      "type":"Access",
      "lat":"44.085070",
      "lng":"-116.115750"
   },
   {  
      "id":"57",
      "name":"Slides",
      "river":"Pack River",
      "type":"Camping ",
      "lat":"48.127099",
      "lng":"-116.604248"
   }, 
    {  
      "id":"58",
      "name":"Cold Springs",
      "river":"Payette",
      "type":"",
      "lat":"48.127099",
      "lng":"-116.604248"
   }, 

第二個和第三個實例,第二個有空格,第三個在類型字段中為空白。 那些會破壞地圖。

沒有定義默認值的方法,而對象 ["somePropertyName"] 未由幼稚的 javascript 定義。
到目前為止,javascript 也不支持使用正則表達式作為屬性名稱。
(也許,但我不知道。)

我猜 property:icon of google.maps.Marker 是數據類型與圖標不匹配時破壞地圖的原因。

google map api文檔示例代碼:

var marker = new google.maps.Marker({
  position: feature.position,
  icon: icons[feature.type].icon,
  map: map
});

在您的情況下,當數據類型為“Camping”或“”時,icons[feature.type] 未定義。 而icons[feature.type].icon (= undefined.icon) 會破壞地圖。

如果如我所料,您可以按如下方式更改 google.maps.Marker:

var marker = new google.maps.Marker({
  position: feature.position,
  icon:icons[feature.type] ? icons[feature.type].icon : '',
  map: map
});

或者

var marker = new google.maps.Marker({
  position: feature.position,
  icon:function(){
     /* some conditions*/
  }(),
  map: map
});

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM