按阵列数据键入动态更改Google地图图标 [英] Dynamically change Google Maps icon by type in array data

查看：99
本文介绍了按阵列数据键入动态更改Google地图图标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我对javascript完全陌生，并且负责将旧的jvector地图转换为Google地图API。我认为我目前的表现相当不错！我已经设法让地图在所有指定的地点填充所有正确的标记，并在点击时弹出闪亮的infowindows。到目前为止，这部分是很好的。

我遇到麻烦的是当我试图根据数组中的字符串是否与8个不同的列表匹配来动态更改地图加载时的Google地图图标时类型。我正在处理的主要代码如下所示：

数据数组样本



该数组大约有30个故事然而为了简洁起见，我已经删除了内容并提供了下面的代码结构。

  var stories = [
 // ACT标记
 // ACT ICT 
 {
 latlng：[-35.3449476,148]，
名称：商家名称 - 商家名称后的标语，
类型：ICT，
文本：'用html标记的一些基本文本'，
}，



主代码示例：

pre $ window.onload = function（）{
LoadMap（）;
};

函数LoadMap（）{
var mapOptions = {
center：new google.maps.LatLng（-25.363882，131.044922），
zoom：4，
mapTypeId：google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map（document.getElementById（map-content），mapOptions）;

for（var i = 0; i< stories.length; i ++）{
var storydata = stories [i];
var myLatLng = new google.maps.LatLng（storydata.latlng [0]，storydata.latlng [1]）;
var marker = new google.maps.Marker（{
position：myLatLng，
map：map，
title：storydata.name，
content：storydata.text ，
}）;

var infowindow = new google.maps.InfoWindow（）;

google.maps.event.addListener（marker，'click'，function（）{
infowindow.setContent（this.title + this.content）;
infowindow.open （map，this）;
}）;
}

到目前为止，所有这些工作都很好。这很可能是一种更智能或更高效的方式来做到这一点，但正如我所说，我对任何形式的javascript都是全新的。

分类：问题



我现在想做的是根据故事更改图标。类型。
我一直在玩以下基于一些其他的stackoverflow线程（似乎无法找到链接），但我不知道在哪里插入代码，使其工作，或者如果我甚至真的在正确的球场。 

  for（var story in stories）{
 if（stories [i] .type =='Agrifood'） iconString ='http://maps.google.com/mapfiles/ms/icons/green-dot.png'; 
 else if（stories [i] .type =='Biotechnology'）iconString ='http://maps.google.com/mapfiles/ms/icons/pink-dot.png'; 
 else if（stories [i] .type =='BuiltEnvironment'）iconString ='http://maps.google.com/mapfiles/ms/icons/blue-dot.png'; 
 else if（stories [i] .type =='Energy'）iconString ='http://maps.google.com/mapfiles/ms/icons/yellow-dot.png'; 
 else if（stories [i] .type =='Engineering'）iconString ='http://maps.google.com/mapfiles/ms/icons/purple-dot.png'; 
 else if（stories [i] .type =='ICT'）iconString ='http://maps.google.com/mapfiles/ms/icons/ltblue-dot.png'; 
 else if（stories [i] .type =='Manufacturing'）iconString ='http://maps.google.com/mapfiles/ms/icons/orange-dot.png'; 
 else if（stories [i] .type =='Mining'）iconString ='http://maps.google.com/mapfiles/ms/icons/red-dot.png'; 
 else iconString ='http://maps.google.com/mapfiles/ms/icons/green-dot.png'; 
}

非常感谢您提供的帮助。

解决方案

你需要修改一下你的代码，这应该是个诀窍：

  for（var i = 0; i< stories.length; i ++）{
 var storydata = stories [i]; 
 var iconString =''; 
 switch（storydata.type）{
 case'Agrifood'：
 iconString ='http://maps.google.com/mapfiles/ms/icons/green-dot.png'; 
休息; 
 case'Biotechnology'：
 iconString ='http://maps.google.com/mapfiles/ms/icons/pink-dot.png'; 
休息; 
 case'BuiltEnvironment'：
 iconString ='http://maps.google.com/mapfiles/ms/icons/blue-dot.png'; 
休息; 
 case'Energy'：
 iconString ='http://maps.google.com/mapfiles/ms/icons/yellow-dot.png'; 
 break 
 case'Engineering'：
 iconString ='http://maps.google.com/mapfiles/ms/icons/purple-dot.png'; 
休息; 
 case'ICT'：
 iconString ='http://maps.google.com/mapfiles/ms/icons/ltblue-dot.png'; 
休息; 
 case'Manufacturing'：
 iconString ='http://maps.google.com/mapfiles/ms/icons/orange-dot.png'; 
休息; 
 case'Mining'：
 iconString ='http://maps.google.com/mapfiles/ms/icons/red-dot.png'; 
休息; 
默认值：
 iconString ='http://maps.google.com/mapfiles/ms/icons/green-dot.png'; 
} 
 
 var myLatLng = new google.maps.LatLng（storydata.latlng [0]，storydata.latlng [1]）; 
 var marker = new google.maps.Marker（{
 position：myLatLng，
 map：map，
 icon：iconString，
 title：storydata.name，
 content：storydata.text 
}）; 
 
 var infowindow = new google.maps.InfoWindow（）; 
 
 google.maps.event.addListener（marker，'click'，function（）{
 infowindow.setContent（this.title + this.content）; 
 infowindow.open （map，this）; 
}）; 
}


I am completely new to javascript and have been tasked with converting an old jvector map to the google maps API. I think i'm doing pretty well so far! I've managed to get the map to populate with all the right markers in all the assigned spots, with nice shiny infowindows popping up when they're clicked. That part is fine so far.

Where i'm having trouble is when I am trying to dynamically change google maps icons on map load, based on whether a string from an array matches a list of 8 different types. The main code i'm working with looks like:

Data array sample

The array has roughly 30 stories however for brevity I've removed the content and provided the code structure below.

 var stories = [
    // ACT Markers 
    // ACT ICT
    {
        latlng: [-35.3449476, 148],
        name: "Business name - tagline after the business name",
        type: "ICT",
        text: 'some basic text marked up with html',
           },

Main code sample:

window.onload = function() {
    LoadMap();
};

function LoadMap() {
    var mapOptions = {
        center: new google.maps.LatLng(-25.363882, 131.044922),
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map-content"), mapOptions);

    for (var i = 0; i < stories.length; i++) {
        var storydata = stories[i];
        var myLatLng = new google.maps.LatLng(storydata.latlng[0], storydata.latlng[1]);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: storydata.name,
            content: storydata.text,
        });

        var infowindow = new google.maps.InfoWindow();

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(this.title + this.content);
            infowindow.open(map, this);
        });
    }

So far all this works fine. There is very likely a smarter or more efficient way to do this but as I said i'm completely new to javascript of any kind.

Categorisation: The Problem

What i'd now like to do is change the icon based on the stories.type. I've been playing around with the following based on some other stackoverflow threads (can't seem to find the links) but I have no idea where to insert the code to make it work or if i'm even really in the right ball park. 

for (var item in stories) {
    if (stories[i].type == 'Agrifood') iconString = 'http://maps.google.com/mapfiles/ms/icons/green-dot.png';
    else if (stories[i].type == 'Biotechnology') iconString = 'http://maps.google.com/mapfiles/ms/icons/pink-dot.png';
    else if (stories[i].type == 'BuiltEnvironment') iconString = 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png';
    else if (stories[i].type == 'Energy') iconString = 'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png';
    else if (stories[i].type == 'Engineering') iconString = 'http://maps.google.com/mapfiles/ms/icons/purple-dot.png';
    else if (stories[i].type == 'ICT') iconString = 'http://maps.google.com/mapfiles/ms/icons/ltblue-dot.png';
    else if (stories[i].type == 'Manufacturing') iconString = 'http://maps.google.com/mapfiles/ms/icons/orange-dot.png';
    else if (stories[i].type == 'Mining') iconString = 'http://maps.google.com/mapfiles/ms/icons/red-dot.png';
    else iconString = 'http://maps.google.com/mapfiles/ms/icons/green-dot.png';
}

Many thanks for any help you can provide.

解决方案

You need to modify a little bit your code, this should do the trick:

for (var i = 0; i < stories.length; i++) {
    var storydata = stories[i];
    var iconString = '';
    switch (storydata.type) {
        case 'Agrifood':
            iconString = 'http://maps.google.com/mapfiles/ms/icons/green-dot.png';
            break;
        case 'Biotechnology':
            iconString = 'http://maps.google.com/mapfiles/ms/icons/pink-dot.png';
            break;
        case 'BuiltEnvironment':
            iconString = 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png';
            break;
        case 'Energy':
            iconString = 'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png';
            break
        case 'Engineering':
            iconString = 'http://maps.google.com/mapfiles/ms/icons/purple-dot.png';
            break;
        case 'ICT':
            iconString = 'http://maps.google.com/mapfiles/ms/icons/ltblue-dot.png';
            break;
        case 'Manufacturing':
            iconString = 'http://maps.google.com/mapfiles/ms/icons/orange-dot.png';
            break;
        case 'Mining':
            iconString = 'http://maps.google.com/mapfiles/ms/icons/red-dot.png';
            break;
        default:
            iconString = 'http://maps.google.com/mapfiles/ms/icons/green-dot.png';
    }

    var myLatLng = new google.maps.LatLng(storydata.latlng[0], storydata.latlng[1]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: iconString,
        title: storydata.name,
        content: storydata.text
    });

    var infowindow = new google.maps.InfoWindow();

    google.maps.event.addListener(marker, 'click', function () {
        infowindow.setContent(this.title + this.content);
        infowindow.open(map, this);
    });
}

这篇关于按阵列数据键入动态更改Google地图图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆