Created
August 3, 2014 04:06
-
-
Save dz1984/0851dd5a9f5ad32139ed to your computer and use it in GitHub Desktop.
天龍國公有地,顯示地圖片斷程式碼。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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