如何使用JSON使用不同颜色的Circles

时间：2015-03-21 14:31:45

标签： javascript google-maps google-maps-api-3

我有一个在地图上添加圆圈的脚本，数据来自JSON。我想添加两种类型的圆圈：

  1. 第一批圈子正在获得财产＆＃39; jstores＆＃39;和红色
  2. 第二个圈子正在获得财产＆＃39; jcarrera＆＃39;和蓝色。

    3. 只有JSON中的最后一个类型才有＆＃39; jcarrera＆＃39;属性。

    请你告诉我如何以正确的方式做到这一点。

    代码如下：

    <!DOCTYPE html>
<html>
<head>
<title>Jewellery distribution, presence</title>
<style>
  html, body, #map-canvas {
    margin: 0;
    padding: 0;
    height: 100%;
  }
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="legend">
Jewellery distribution, boutiques
</div>
<style>
#legend {
    font-family: Arial, sans-serif;
    background: #fff;
    padding: 10px;
    margin: 10px;
    border: 2px solid #000;
  }
</style>
<script>
var map;
var infowindow = new google.maps.InfoWindow({});

function initialize() {
var mapOptions = {
zoom: 2,
center: {lat: 7.275, lng: 12.549},
mapTypeId: google.maps.MapTypeId.TERRAIN
};

 map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);

 // Create a <script> tag and set the USGS URL as the source.
 var script = document.createElement('script');

 script.src = 'http://pastebin.com/raw.php?i=tPRXQQMM';
 document.getElementsByTagName('head')[0].appendChild(script);


 map.data.setStyle(function(feature) {
    var jstores = feature.getProperty('jstores');
    var jcarrera = feature.getProperty('jcarrera');
    var ititle = feature.getProperty('ititle');
return {
  icon: getCircle(jstores),
  title: (ititle)
};
});
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
}
function getCircle(jstores) {
var circle = {
path: google.maps.SymbolPath.CIRCLE,
fillColor: 'red',
fillOpacity: .7,
scale: Math.sqrt(jstores) * 4,
strokeColor: 'white',
strokeWeight: .5
};
return circle;
}
 function getCircle(jcarrera) {
 var circleC = {
 path: google.maps.SymbolPath.CIRCLE,
 fillColor: 'blue',
 fillOpacity: .7,
 scale: Math.sqrt(jcarrera) * 4,
    strokeColor: 'white',
 strokeWeight: .5
 };
return circleC;
}
function jewellery_stores(results) {
map.data.addGeoJson(results);
map.data.addListener('click', function(e) {
infowindow.setPosition(e.latLng);
infowindow.setContent(e.feature.getProperty("text"));
infowindow.open(map);
});
}
google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>

    链接到JSON：
    http://pastebin.com/raw.php?i=tPRXQQMM

    示例JSON：

    jewellery_stores({ "type": "FeatureCollection","features": [
{"type": "Feature","geometry": {"type": "Point", "coordinates": [55.278842, 25.197623]},"properties": {"jstores": 8,"ititle": "Dubai, United Arab Emirates","text": "<p><b>Dubai Mall</b></p>Van Cleef:&nbsp;1<br>Harry Winston:&nbsp;1<br>Graff:&nbsp;1<br>Cartier:&nbsp;1<br>Pomellato:&nbsp;1<br>Chaumet:&nbsp;1<br>BVLGARI:&nbsp;1<br>Damiani:&nbsp;1<br>" }},
{"type": "Feature","geometry": {"type": "Point", "coordinates": [54.389373, 24.501259]},"properties": {"jstores": 6,"ititle": "Abu Dhabi, United Arab Emirates","text": "<p><b>The Galleria at Sowwah Square</b></p>Graff:&nbsp;1<br>Van Cleef:&nbsp;1<br>Pomellato:&nbsp;1<br>Cartier:&nbsp;1<br>BVLGARI:&nbsp;1<br>Chaumet:&nbsp;1<br>" }},
{"type": "Feature","geometry": {"type": "Point", "coordinates": [47.966734, 29.363636]},"properties": {"jstores": 5,"ititle": "Kuwait, Kuwait","text": "<p><b>Salhiya complex</b></p>Cartier:&nbsp;2<br>BVLGARI:&nbsp;1<br>Van Cleef:&nbsp;1<br>de Grisogono:&nbsp;1<br>" }},
{"type": "Feature","geometry": {"type": "Point", "coordinates": [55.200603, 25.118088]},"properties": {"jstores": 5,"ititle": "Dubai, United Arab Emirates","text": "<p><b>Mall of the Emirates</b></p>Roberto Coin:&nbsp;1<br>BVLGARI:&nbsp;1<br>Van Cleef:&nbsp;1<br>Cartier:&nbsp;1<br>Pomellato:&nbsp;1<br>" }},
{"type": "Feature","geometry": {"type": "Point", "coordinates": [47.935659, 29.302827]},"properties": {"jstores": 4,"ititle": "Kuwait, Kuwait","text": "<p><b>al Ostoura</b></p>Roberto Coin:&nbsp;1<br>Pomellato:&nbsp;1<br>Damiani:&nbsp;1<br>Harry Winston:&nbsp;1<br>" }},
{"type": "Feature","geometry": {"type": "Point", "coordinates": [54.321782, 24.458713]},"properties": {"jstores": 4,"ititle": "Abu Dhabi, United Arab Emirates","text": "<p><b>Etihad Towers</b></p>Van Cleef:&nbsp;1<br>de Grisogono:&nbsp;1<br>BVLGARI:&nbsp;1<br>Cartier:&nbsp;1<br>" }},
{"type": "Feature","geometry": {"type": "Point", "coordinates": [35.50555, 33.898988]},"properties": {"jstores": 3,"ititle": "Beirut, Lebanon","text": "<p><b>Beirut souks</b></p>BVLGARI:&nbsp;1<br>Pomellato:&nbsp;1<br>Cartier:&nbsp;1<br>" }},
{"type": "Feature","geometry": {"type": "Point", "coordinates": [51.443095, 25.260314]},"properties": {"jstores": 3,"ititle": "doha, Qatar","text": "<p><b>Villagio Mall</b></p>BVLGARI:&nbsp;1<br>Van Cleef:&nbsp;1<br>Cartier:&nbsp;1<br>" }},
{"type": "Feature","geometry": {"type": "Point", "coordinates": [55.282242, 25.217181]},"properties": {"jstores": 3,"ititle": "Dubai, United Arab Emirates","text": "<p><b>Emirates Towers</b></p>BVLGARI:&nbsp;1<br>Harry Winston:&nbsp;1<br>Cartier:&nbsp;1<br>" }},
{"type": "Feature","geometry": {"type": "Point", "coordinates": [46.683791, 24.697514]},"properties": {"jstores": 3,"ititle": "Riyadh, Saudi Arabia","text": "<p><b>Centira Mall</b></p>Cartier:&nbsp;1<br>Van Cleef:&nbsp;1<br>Chaumet:&nbsp;1<br>" }},
{"type": "Feature","geometry": {"type": "Point", "coordinates": [50.581376, 26.239843]},"properties": {"jstores": 3,"ititle": "Al-Manamah, Bahrain","text": "<p><b>Moda Mall</b></p>BVLGARI:&nbsp;1<br>Van Cleef:&nbsp;1<br>Cartier:&nbsp;1<br>" }},
{"type": "Feature","geometry": {"type": "Point", "coordinates": [55.31919, 25.229147]},"properties": {"jstores": 2,"ititle": "Dubai, United Arab Emirates","text": "<p><b>Wafi Center</b></p>Roberto Coin:&nbsp;1<br>Mikimoto:&nbsp;1<br>" }},
{"type": "Feature","geometry": {"type": "Point", "coordinates": [51.606182, 25.26973]},"properties": {"jstores": 2,"ititle": "doha, Qatar","text": "<p><b>Qatar Duty Free</b></p>BVLGARI:&nbsp;2<br>" }},
{"type": "Feature","geometry": {"type": "Point", "coordinates": [39.15077, 21.548994]},"properties": {"jstores": 2,"ititle": "Jeddah, Saudi Arabia","text": "<p><b>el Khayyat Center</b></p>Chaumet:&nbsp;1<br>Cartier:&nbsp;1<br>" }},
{"type": "Feature","geometry": {"type": "Point", "coordinates": [39.127888, 21.573002]},"properties": {"jstores": 1,"ititle": "Jeddah, Saudi Arabia","text": "<p><b>Am Jad al dar</b></p>Pomellato:&nbsp;1<br>" }},
{"type": "Feature","geometry": {"type": "Point", "coordinates": [55.185453, 25.14133]},"properties": {"jstores": 1,"ititle": "Dubai, United Arab Emirates","text": "<p><b>burj al arab</b></p>Graff:&nbsp;1<br>" }},
{"type": "Feature","geometry": {"type": "Point", "coordinates": [51.501661, 25.281497]},"properties": {"jstores": 1,"ititle": "doha, Qatar","text": "<p><b>Royal Plaza Mall</b></p>Cartier:&nbsp;1<br>" }},
{"type": "Feature","geometry": {"type": "Point", "coordinates": [47.990275, 29.377323]},"properties": {"jstores": 1,"ititle": "Kuwait, Kuwait","text": "<p><b>Arraya complex</b></p>Chaumet:&nbsp;1<br>" }},
{"type": "Feature","geometry": {"type": "Point", "coordinates": [35.874513, 31.967586]},"properties": {"jstores": 1,"ititle": "Amman, Jordan","text": "<p><b>Um-Uthaina Vista Building</b></p>BVLGARI:&nbsp;1<br>" }},
{"type": "Feature","geometry": {"type": "Point", "coordinates": [50.222673, 26.305242]},"properties": {"jstores": 1,"ititle": "Al Khobar, Saudi Arabia","text": "<p><b>al Jumah city Center</b></p>BVLGARI:&nbsp;1<br>" }},
{"type": "Feature","geometry": {"type": "Point", "coordinates": [39.153526, 21.549449]},"properties": {"jstores": 1,"ititle": "Jeddah, Saudi Arabia","text": "<p><b>Jameel Square</b></p>Van Cleef:&nbsp;1<br>" }},
{"type": "Feature","geometry": {"type": "Point", "coordinates": [46.674271, 24.711465]},"properties": {"jstores": 1,"ititle": "Riyadh, Saudi Arabia","text": "<p><b>Saks Fifth Avenue</b></p>Cartier:&nbsp;1<br>" }},
{"type": "Feature","geometry": {"type": "Point", "coordinates": [55.302142, 25.253076]},"properties": {"jstores": 1,"ititle": "Dubai, United Arab Emirates","text": "<p><b>Burjuman Center</b></p>Cartier:&nbsp;1<br>" }},
{"type": "Feature","geometry": {"type": "Point", "coordinates": [51.524687, 25.375654]},"properties": {"jstores": 1,"ititle": "doha, Qatar","text": "<p><b>Lagoona mall</b></p>Pasquale Bruni:&nbsp;1<br>" }},
{"type": "Feature","geometry": {"type": "Point", "coordinates": [50.180663, 26.291106]},"properties": {"jstores": 1,"ititle": "Al Khobar, Saudi Arabia","text": "<p><b>Al Rashid Mall</b></p>Cartier:&nbsp;1<br>" }},
{"type": "Feature","geometry": {"type": "Point", "coordinates": [39.153759, 21.550658]},"properties": {"jstores": 1,"ititle": "Jeddah, Saudi Arabia","text": "<p><b>Basateen Mall</b></p>BVLGARI:&nbsp;1<br>" }},
{"type": "Feature","geometry": {"type": "Point", "coordinates": [46.679091, 24.707793]},"properties": {"jstores": 1,"ititle": "Riyadh, Saudi Arabia","text": "<p><b>al Akaira Plaza</b></p>BVLGARI:&nbsp;1<br>" }},
{"type": "Feature","geometry": {"type": "Point", "coordinates": [55.116936, 25.130337]},"properties": {"jcarrera": 1,"ititle": "Dubai, United Arab Emirates","text": "<p><b>Atlantis the palm</b></p>CYC:&nbsp;1<br>"}}
]});

    提前谢谢。

    安德烈

1 个答案:

答案 0 :(得分：0)

您有两个具有相同名称的函数，更改其中一个函数的名称，并在适当的位置使用它。

    map.data.setStyle(function (feature) {
        var jstores = feature.getProperty('jstores');
        var jcarrera = feature.getProperty('jcarrera');
        var ititle = feature.getProperty('ititle');
        var retObj = {};
        if (!jcarrera) {
            retObj.icon = getCircle(jstores);
        } else {
            retObj.icon = getBlueCircle(jcarrera);
        }
        retObj.title = ititle;
        retObj.fillColor = 'red';
        return retObj;
    });
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
}

function getCircle(jstores) {
    var circle = {
        path: google.maps.SymbolPath.CIRCLE,
        fillColor: 'red',
        fillOpacity: 0.7,
        scale: Math.sqrt(jstores) * 4,
        strokeColor: 'white',
        strokeWeight: 0.5
    };
    return circle;
}

function getBlueCircle(jcarrera) {
    var circleC = {
        path: google.maps.SymbolPath.CIRCLE,
        fillColor: 'blue',
        fillOpacity: 0.7,
        scale: Math.sqrt(jcarrera) * 4,
        strokeColor: 'white',
        strokeWeight: 0.5
    };
    return circleC;
}

working fiddle

代码段：

var map;
var infowindow = new google.maps.InfoWindow({});

function initialize() {
  var mapOptions = {
    zoom: 8,
    center: {
      lat: 25.130337,
      lng: 55.116936
    },
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  // Create a <script> tag and set the USGS URL as the source.
  var script = document.createElement('script');

  // script.src = 'http://pastebin.com/raw.php?i=tPRXQQMM';
  // document.getElementsByTagName('head')[0].appendChild(script);
  jewellery_stores(jsonData);

  map.data.setStyle(function(feature) {
    var jstores = feature.getProperty('jstores');
    var jcarrera = feature.getProperty('jcarrera');
    var ititle = feature.getProperty('ititle');
    var retObj = {};
    if (!jcarrera) {
      retObj.icon = getCircle(jstores);
    } else {
      retObj.icon = getBlueCircle(jcarrera);
    }
    retObj.title = ititle;
    retObj.fillColor = 'red';
    return retObj;
  });
  map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
}

function getCircle(jstores) {
  var circle = {
    path: google.maps.SymbolPath.CIRCLE,
    fillColor: 'red',
    fillOpacity: 0.7,
    scale: Math.sqrt(jstores) * 4,
    strokeColor: 'white',
    strokeWeight: 0.5
  };
  return circle;
}

function getBlueCircle(jcarrera) {
  var circleC = {
    path: google.maps.SymbolPath.CIRCLE,
    fillColor: 'blue',
    fillOpacity: 0.7,
    scale: Math.sqrt(jcarrera) * 4,
    strokeColor: 'white',
    strokeWeight: 0.5
  };
  return circleC;
}

function jewellery_stores(results) {
  map.data.addGeoJson(results);
  map.data.addListener('click', function(e) {
    infowindow.setPosition(e.latLng);
    infowindow.setContent(e.feature.getProperty("text"));
    infowindow.open(map);
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

var jsonData = {
  "type": "FeatureCollection",
  "features": [{
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [55.278842, 25.197623]
      },
      "properties": {
        "jstores": 8,
        "ititle": "Dubai, United Arab Emirates",
        "text": "<p><b>Dubai Mall</b></p>Van Cleef:&nbsp;1<br>Harry Winston:&nbsp;1<br>Graff:&nbsp;1<br>Cartier:&nbsp;1<br>Pomellato:&nbsp;1<br>Chaumet:&nbsp;1<br>BVLGARI:&nbsp;1<br>Damiani:&nbsp;1<br>"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [54.389373, 24.501259]
      },
      "properties": {
        "jstores": 6,
        "ititle": "Abu Dhabi, United Arab Emirates",
        "text": "<p><b>The Galleria at Sowwah Square</b></p>Graff:&nbsp;1<br>Van Cleef:&nbsp;1<br>Pomellato:&nbsp;1<br>Cartier:&nbsp;1<br>BVLGARI:&nbsp;1<br>Chaumet:&nbsp;1<br>"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [47.966734, 29.363636]
      },
      "properties": {
        "jstores": 5,
        "ititle": "Kuwait, Kuwait",
        "text": "<p><b>Salhiya complex</b></p>Cartier:&nbsp;2<br>BVLGARI:&nbsp;1<br>Van Cleef:&nbsp;1<br>de Grisogono:&nbsp;1<br>"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [55.200603, 25.118088]
      },
      "properties": {
        "jstores": 5,
        "ititle": "Dubai, United Arab Emirates",
        "text": "<p><b>Mall of the Emirates</b></p>Roberto Coin:&nbsp;1<br>BVLGARI:&nbsp;1<br>Van Cleef:&nbsp;1<br>Cartier:&nbsp;1<br>Pomellato:&nbsp;1<br>"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [47.935659, 29.302827]
      },
      "properties": {
        "jstores": 4,
        "ititle": "Kuwait, Kuwait",
        "text": "<p><b>al Ostoura</b></p>Roberto Coin:&nbsp;1<br>Pomellato:&nbsp;1<br>Damiani:&nbsp;1<br>Harry Winston:&nbsp;1<br>"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [54.321782, 24.458713]
      },
      "properties": {
        "jstores": 4,
        "ititle": "Abu Dhabi, United Arab Emirates",
        "text": "<p><b>Etihad Towers</b></p>Van Cleef:&nbsp;1<br>de Grisogono:&nbsp;1<br>BVLGARI:&nbsp;1<br>Cartier:&nbsp;1<br>"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [35.50555, 33.898988]
      },
      "properties": {
        "jstores": 3,
        "ititle": "Beirut, Lebanon",
        "text": "<p><b>Beirut souks</b></p>BVLGARI:&nbsp;1<br>Pomellato:&nbsp;1<br>Cartier:&nbsp;1<br>"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [51.443095, 25.260314]
      },
      "properties": {
        "jstores": 3,
        "ititle": "doha, Qatar",
        "text": "<p><b>Villagio Mall</b></p>BVLGARI:&nbsp;1<br>Van Cleef:&nbsp;1<br>Cartier:&nbsp;1<br>"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [55.282242, 25.217181]
      },
      "properties": {
        "jstores": 3,
        "ititle": "Dubai, United Arab Emirates",
        "text": "<p><b>Emirates Towers</b></p>BVLGARI:&nbsp;1<br>Harry Winston:&nbsp;1<br>Cartier:&nbsp;1<br>"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [46.683791, 24.697514]
      },
      "properties": {
        "jstores": 3,
        "ititle": "Riyadh, Saudi Arabia",
        "text": "<p><b>Centira Mall</b></p>Cartier:&nbsp;1<br>Van Cleef:&nbsp;1<br>Chaumet:&nbsp;1<br>"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [50.581376, 26.239843]
      },
      "properties": {
        "jstores": 3,
        "ititle": "Al-Manamah, Bahrain",
        "text": "<p><b>Moda Mall</b></p>BVLGARI:&nbsp;1<br>Van Cleef:&nbsp;1<br>Cartier:&nbsp;1<br>"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [55.31919, 25.229147]
      },
      "properties": {
        "jstores": 2,
        "ititle": "Dubai, United Arab Emirates",
        "text": "<p><b>Wafi Center</b></p>Roberto Coin:&nbsp;1<br>Mikimoto:&nbsp;1<br>"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [51.606182, 25.26973]
      },
      "properties": {
        "jstores": 2,
        "ititle": "doha, Qatar",
        "text": "<p><b>Qatar Duty Free</b></p>BVLGARI:&nbsp;2<br>"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [39.15077, 21.548994]
      },
      "properties": {
        "jstores": 2,
        "ititle": "Jeddah, Saudi Arabia",
        "text": "<p><b>el Khayyat Center</b></p>Chaumet:&nbsp;1<br>Cartier:&nbsp;1<br>"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [39.127888, 21.573002]
      },
      "properties": {
        "jstores": 1,
        "ititle": "Jeddah, Saudi Arabia",
        "text": "<p><b>Am Jad al dar</b></p>Pomellato:&nbsp;1<br>"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [55.185453, 25.14133]
      },
      "properties": {
        "jstores": 1,
        "ititle": "Dubai, United Arab Emirates",
        "text": "<p><b>burj al arab</b></p>Graff:&nbsp;1<br>"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [51.501661, 25.281497]
      },
      "properties": {
        "jstores": 1,
        "ititle": "doha, Qatar",
        "text": "<p><b>Royal Plaza Mall</b></p>Cartier:&nbsp;1<br>"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [47.990275, 29.377323]
      },
      "properties": {
        "jstores": 1,
        "ititle": "Kuwait, Kuwait",
        "text": "<p><b>Arraya complex</b></p>Chaumet:&nbsp;1<br>"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [35.874513, 31.967586]
      },
      "properties": {
        "jstores": 1,
        "ititle": "Amman, Jordan",
        "text": "<p><b>Um-Uthaina Vista Building</b></p>BVLGARI:&nbsp;1<br>"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [50.222673, 26.305242]
      },
      "properties": {
        "jstores": 1,
        "ititle": "Al Khobar, Saudi Arabia",
        "text": "<p><b>al Jumah city Center</b></p>BVLGARI:&nbsp;1<br>"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [39.153526, 21.549449]
      },
      "properties": {
        "jstores": 1,
        "ititle": "Jeddah, Saudi Arabia",
        "text": "<p><b>Jameel Square</b></p>Van Cleef:&nbsp;1<br>"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [46.674271, 24.711465]
      },
      "properties": {
        "jstores": 1,
        "ititle": "Riyadh, Saudi Arabia",
        "text": "<p><b>Saks Fifth Avenue</b></p>Cartier:&nbsp;1<br>"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [55.302142, 25.253076]
      },
      "properties": {
        "jstores": 1,
        "ititle": "Dubai, United Arab Emirates",
        "text": "<p><b>Burjuman Center</b></p>Cartier:&nbsp;1<br>"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [51.524687, 25.375654]
      },
      "properties": {
        "jstores": 1,
        "ititle": "doha, Qatar",
        "text": "<p><b>Lagoona mall</b></p>Pasquale Bruni:&nbsp;1<br>"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [50.180663, 26.291106]
      },
      "properties": {
        "jstores": 1,
        "ititle": "Al Khobar, Saudi Arabia",
        "text": "<p><b>Al Rashid Mall</b></p>Cartier:&nbsp;1<br>"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [39.153759, 21.550658]
      },
      "properties": {
        "jstores": 1,
        "ititle": "Jeddah, Saudi Arabia",
        "text": "<p><b>Basateen Mall</b></p>BVLGARI:&nbsp;1<br>"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [46.679091, 24.707793]
      },
      "properties": {
        "jstores": 1,
        "ititle": "Riyadh, Saudi Arabia",
        "text": "<p><b>al Akaira Plaza</b></p>BVLGARI:&nbsp;1<br>"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [55.116936, 25.130337]
      },
      "properties": {
        "jcarrera": 1,
        "ititle": "Dubai, United Arab Emirates",
        "text": "<p><b>Atlantis the palm</b></p>CYC:&nbsp;1<br>"
      }
    }

  ]
};
html,
body,
#map-canvas {
  margin: 0;
  padding: 0;
  height: 100%;
}
#legend {
  font-family: Arial, sans-serif;
  background: #fff;
  padding: 10px;
  margin: 10px;
  border: 2px solid #000;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="legend">Jewellery distribution, boutiques</div>
<div id="map-canvas"></div>

相关问题
最新问题