【问题标题】:google maps custom markers setting default icon谷歌地图自定义标记设置默认图标
【发布时间】:2018-02-26 17:44:14
【问题描述】:

我有一个谷歌地图应用程序,它从数据库中提取标记信息并将其写入 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"
   }, 

第二个和第三个实例,第二个有空格,第三个在类型字段中为空白。那些会破坏地图。

【问题讨论】:

    标签: javascript google-maps-api-3 error-handling google-maps-markers


    【解决方案1】:

    当 object["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”或“”时,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
    });
    

    【讨论】:

    • 谢谢@Guest 第一个例子确实有效——有点。它会杀死信息窗口,只显示第一个实例并给出一些控制台未定义的错误。它不处理字段中的空间。不抱怨。当第一个红色标记出现在地图上时,真是一个大惊喜!稍后我将尝试第二个示例中的功能选项。天真地,我想我会清理我的 php 和 mysqli。我比 javascript 更擅长 ;-)
    • @grantiago 能帮助你是我的荣幸。
    猜你喜欢
    • 1970-01-01
    • 2020-06-26
    • 1970-01-01
    • 2015-06-06
    • 2018-01-13
    • 1970-01-01
    • 2013-08-21
    相关资源
    最近更新 更多