2018.11.4 更新:本地图以及描述已经放在了git上,开放大家更新,具体:
———————–
之前问的人比较多,找个机会做了个google地图的版本,分享下我认为不错的好餐厅,基于以下原则:
- 完全根据经历分享,都是我吃过且会经常去的。
- 没上可能因为不好吃,也可能因为我忘记了,欢迎留言推荐、交流。
更新日期:2018.3.3
demo链接:http://code.jing.do/maprepo/maprepo.html
代码:
<div id="map" style="height: 600px; width: 100%;"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDfkA4_C7LmzGzFlPerInt6ndVTyOLpZ8k&libraries=places"></script>
<div><ul id="foodlist"></ul></div>
<script type="text/javascript">
function loadJSON(callback) {
var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
xobj.open('GET', 'dcfood.json', true);
xobj.onreadystatechange = function () {
if (xobj.readyState == 4 && xobj.status == "200") {
callback(xobj.responseText);
}
};
xobj.send(null);
}
loadJSON(function(response) {
var fooddata = JSON.parse(response);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: new google.maps.LatLng(38.8832182, -77.1323203),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var foodlist = document.getElementById('foodlist');
fooddata.data.forEach(function(loc,index){
marker = new google.maps.Marker({
position: new google.maps.LatLng(loc.longitude, loc.latitude),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(loc.longitude);
infowindow.open(map, marker);
}
})(marker, i));
var li = document.createElement("li");
li.innerHTML = "<b>" + loc.name + "</b>" + "<span>(" + loc.address + "): " + loc.description + "</span>";
foodlist.appendChild(li);
});
})
</script>
This site Original article All followed" Attribution—NonCommercial—ShareAlike 4.0 (CC BY-NC-SA 4.0) ”。 Please keep the following marks for sharing and interpretation:
Original author: Jake Tao Source: 「华盛顿特区(北弗吉尼亚)美食地图」
Post a reply