在 Google 地图中使用 'if' 语句更改图标

Question

我正在为石油和天然气行业编写一个程序，允许您使用现场的远程逻辑板查看抽油机是打开还是关闭，然后通过 4G 互联网中继信息。我正在尝试以一种方式构建它，即地图上的图标将根据板上的警报是否被触发而变为红色或绿色。可以通过静态 IP 访问警报的文件路径，例如：

http://111.111.111.111/var/rmsdata/alarm1

此文件路径给出值 1 或 0

我如何将 0 或 1 的值转换为 if 语句，根据该值更改图标？

这是我为其中一个图标编写的代码：

 function initialize() {


        var map_canvas = document.getElementById('map_canvas');
        var map_options = {
          center: new google.maps.LatLng(50.242913, -111.195383),
          zoom: 14,
          mapTypeId: google.maps.MapTypeId.TERRAIN


        } 
        var map = new google.maps.Map(map_canvas, map_options);

        var point       =       new google.maps.LatLng(47.5, -100); 
        var derrick1    =       new google.maps.Marker ({
            position: new google.maps.LatLng(50.244915, -111.198540),    
            map: map,
            icon: 'on.png',
            size: new google.maps.Size(20, 32),
            title: '1' 

        })



        google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

我正在为给定的 url 做一个简单的 Ajax 请求，并将图标基于响应。此代码未经测试，我可以对其进行大量改进。但它有望为您指明正确的方向。

function initialize() {
    var url = 'http://111.111.111.111/var/rmsdata/alarm1';
    var map_canvas = document.getElementById('map_canvas');
    var map_options = {
        center: new google.maps.LatLng(50.242913, -111.195383),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    var map = new google.maps.Map(map_canvas, map_options);

    // Make an ajax request for the url that you specified above and base your icon on the response.
    $.get(url, function(response) {
        var on = true;

        if (isNaN(response)) {
            // If the response would contain anything else but a number.
            console.log('Response is not a number, defaults to "on"');
        } else {
            // Converts the "0" to "false" and anything else to "true".
            on = !!+response;
        }

        var point = new google.maps.LatLng(47.5, -100);
        var derrick1 = new google.maps.Marker({
            position: new google.maps.LatLng(50.244915, -111.198540),
            map: map,
            icon: (on) ? 'on.png' : 'off.png', // Shorthand if-statement to determine the icon. Also called Ternary Operator.
            size: new google.maps.Size(20, 32),
            title: '1'

        })
    });

    google.maps.event.addDomListener(window, 'load', initialize);
}

在 Google 地图中使用 'if' 语句更改图标

Change an icon using an 'if' statement in Google Maps

javascript

html

google-maps

if-statement

static-ip-address