Skip to content

Instantly share code, notes, and snippets.

@dz1984
Created August 3, 2014 04:06
Show Gist options
  • Save dz1984/0851dd5a9f5ad32139ed to your computer and use it in GitHub Desktop.
Save dz1984/0851dd5a9f5ad32139ed to your computer and use it in GitHub Desktop.
天龍國公有地,顯示地圖片斷程式碼。
var taipei =
{
"中正區": {
"lat": 25.0293008,
"lng": 121.5205833
},
"大同區": {
"lat": 25.0645027,
"lng": 121.513314
},
"中山區": {
"lat": 25.0685028,
"lng": 121.5456014
},
"萬華區": {
"lat": 25.0294936,
"lng": 121.4978838
},
"信義區": {
"lat": 25.0287142,
"lng": 121.5723162
},
"松山區": {
"lat": 25.0601727,
"lng": 121.5593073
},
"大安區": {
"lat": 25.0263074,
"lng": 121.543846
},
"南港區": {
"lat": 25.038392,
"lng": 121.6219879
},
"北投區": {
"lat": 25.1531486,
"lng": 121.5174287
},
"內湖區": {
"lat": 25.0835016,
"lng": 121.5903754
},
"士林區": {
"lat": 25.1347802,
"lng": 121.5324453
},
"文山區": {
"lat": 24.9880073,
"lng": 121.5752716
}
};
var showMap = function(area) {
var lat = taipei[area].lat;
var lng = taipei[area].lng;
var popinfo = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 15,
scrollwheel: false,
center: {lat: lat, lng: lng}
});
map.data.loadGeoJson('http://poponfire.herokuapp.com/api/taipei/' + area);
var featureStyle = {
fillColor: 'red',
strokeWeight: 1
};
map.data.setStyle(featureStyle);
map.data.addListener('click', function(event) {
var properties = ['面積', '路段', '地號', '管理者', '使用分區'];
var content = "<table class='ui table segment'>";
properties.forEach(function(element, index, array){
content += "<tr><td>"+ element + "</td><td>" + event.feature.getProperty(element) + "</td></tr>";
});
content += "</table>";
popinfo.close();
popinfo.setContent(content);
popinfo.setPosition(event.latLng);
popinfo.open(map);
});
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment