简体   繁体   English

谷歌地图自定义标记设置默认图标

[英]google maps custom markers setting default icon

I have a google maps app that pulls the marker info from a database and writes it to a json file.我有一个谷歌地图应用程序,它从数据库中提取标记信息并将其写入 json 文件。 The googlemaps loads the json and creates the points etc. I have an option for custom icons depending on the json type field. googlemaps 加载 json 并创建点等。根据 json 类型字段,我可以选择自定义图标。 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.我想设置一个默认标记图标来处理数据库中不在 javascript 选择器中的空格和新类型。 Ideally a wildcard or default icon.理想情况下是通配符或默认图标。 I can trim spaces with mysql and limit the input type in the submission form.我可以用 mysql 修剪空格并限制提交表单中的输入类型。 It seems more flexible to apply it in the googlemap js.在googlemap js中应用它似乎更灵活。 It would allow new types without coding the custom icons.它将允许新类型而无需对自定义图标进行编码。

My javascript code from the google maps api:我来自谷歌地图 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'
       }
      */
    };

And the json looks like this: 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"
   }, 

The second and third instances, second has a space, third is blank in the type field.第二个和第三个实例,第二个有空格,第三个在类型字段中为空白。 Those will break the map.那些会破坏地图。

There is no method to define a default value while object["somePropertyName"] is undefined by naive javascript.没有定义默认值的方法,而对象 ["somePropertyName"] 未由幼稚的 javascript 定义。
And so far, javascript have not supported for using regular expression as property name either.到目前为止,javascript 也不支持使用正则表达式作为属性名称。
(Or maybe there Is but I don't know.) (也许,但我不知道。)

I guess property:icon of google.maps.Marker is the cause breaking the map when data type is not matching icons.我猜 property:icon of google.maps.Marker 是数据类型与图标不匹配时破坏地图的原因。

The sample code of google map api document : google map api文档示例代码:

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

In your case, when the data type is "Camping " or "", icons[feature.type] is undefined.在您的情况下,当数据类型为“Camping”或“”时,icons[feature.type] 未定义。 And icons[feature.type].icon (= undefined.icon) is going to break the map.而icons[feature.type].icon (= undefined.icon) 会破坏地图。

If as I guessed, you can change your google.maps.Marker as follows :如果如我所料,您可以按如下方式更改 google.maps.Marker:

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

or或者

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