Question

I have a google maps app that pulls the marker info from a database and writes it to a json file. The googlemaps loads the json and creates the points etc. I have an option for custom icons depending on the json type field. If a user enters a different type or puts a space in the field it breaks the map.

I would like to set a default marker icon to deal spaces and new types in the database that are not in the javascript selector. Ideally a wildcard or default icon. I can trim spaces with mysql and limit the input type in the submission form. It seems more flexible to apply it in the googlemap js. It would allow new types without coding the custom icons.

My javascript code from the google maps api:

// 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'
       }
      */
    };

And the json looks like this:

    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"
   },

The second and third instances, second has a space, third is blank in the type field. Those will break the map.

Answer 1

没有方法来定义默认值，而对象[“somePropertyName”]未被天真的javascript定义。
到目前为止，javascript还不支持将正则表达式用作属性名称（或者可能但我不知道。）

我猜属性：google.maps.Marker的图标是数据类型与图标不匹配时打破地图的原因。

google map api文档的示例代码：

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

在您的情况下，当数据类型为“Camping”或“”时，图标[feature.type]未定义。并且图标[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
});

google maps custom markers setting default icon

1 个答案: