More experiments.

This commit is contained in:
vinjn
2014-05-18 16:13:12 +08:00
parent 1c4773cade
commit b8709e1fe1

View File

@@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>上海艺术地图 - by vinjn</title> <title>上海艺术地图</title>
<link rel="stylesheet" type="text/css" href="http://api.amap.com/Public/css/demo.Default.css"/> <link rel="stylesheet" type="text/css" href="http://api.amap.com/Public/css/demo.Default.css"/>
<style type="text/css"> <style type="text/css">
html, body { html, body {
@@ -32,15 +32,54 @@
// http://api.amap.com/javascript/index // http://api.amap.com/javascript/index
// http://api.amap.com/javascript/example // http://api.amap.com/javascript/example
var mapObj; var mapObj;
function addBuildings(){
if (typeof(Worker) !== "undefined") {
var buildings = new AMap.Buildings(); //实例化3D楼块图层
buildings.setMap(mapObj);//在map中添加3D楼块图层
} else {
// document.getElementById("info").innerHTML="对不起运行该示例需要浏览器支持HTML5";
}
}
//添加带文本的点标记覆盖物
function addMarker(){
//自定义点标记内容
var markerContent = document.createElement("div");
markerContent.className = "markerContentStyle";
//点标记中的图标
var markerImg= document.createElement("img");
markerImg.className="markerlnglat";
markerImg.src="http://webapi.amap.com/images/0.png";
markerContent.appendChild(markerImg);
//点标记中的文本
var markerSpan = document.createElement("span");
markerSpan.innerHTML = "我是自定义样式的点标记哦!";
markerContent.appendChild(markerSpan);
marker = new AMap.Marker({
map:mapObj,
position:new AMap.LngLat(116.389267,39.925601), //基点位置
offset:new AMap.Pixel(-18,-36), //相对于基点的偏移位置
draggable:true, //是否可拖动
content:markerContent //自定义点标记覆盖物内容
});
marker.setMap(mapObj); //在地图上添加点
}
function mapInit(){ function mapInit(){
mapObj = new AMap.Map("iCenter", { mapObj = new AMap.Map("iCenter", {
center: new AMap.LngLat(121.473267,31.222715), center: new AMap.LngLat(121.473267,31.222715),
level: 13 level: 13
}); });
// mapObj.plugin(["AMap.ToolBar"],function(){ // mapObj.plugin(["AMap.ToolBar"],function(){
// toolBar = new AMap.ToolBar(); // toolBar = new AMap.ToolBar();
// mapObj.addControl(toolBar); // mapObj.addControl(toolBar);
// }); // });
// addBuildings();
// https://github.com/unixcrh/DOUBANTONGCHENG/blob/master/DouBanTongCheng/ContentVC.m // https://github.com/unixcrh/DOUBANTONGCHENG/blob/master/DouBanTongCheng/ContentVC.m
var doubanApi = "https://api.douban.com/v2/event/list?loc=shanghai&type=exhibition&max-results=100&callback=?"; var doubanApi = "https://api.douban.com/v2/event/list?loc=shanghai&type=exhibition&max-results=100&callback=?";
@@ -52,15 +91,24 @@ function mapInit(){
for (var i = events.length - 1; i >= 0; i--) { for (var i = events.length - 1; i >= 0; i--) {
var geo = events[i].geo.split(' '); var geo = events[i].geo.split(' ');
var marker = new AMap.Marker({ var marker = new AMap.Marker({
map: mapObj, map: mapObj,
position: new AMap.LngLat(geo[1], geo[0]), position: new AMap.LngLat(geo[1], geo[0]),
title: events[i].title + '\n' + // icon: events[i].owner.alt.match('site') ? new AMap.Icon({
events[i].address + '\n' + events[i].begin_time + ' ~ ' + events[i].end_time, // image: events[i].owner.avatar,
// }) : null,
title: events[i].title + '\n' +
events[i].address.replace(/上海(\s+|市)/g, '') + '\n' +
events[i].begin_time.substring(5, events[i].begin_time.length - 3) + ' ~ ' +
events[i].end_time.substring(5, events[i].end_time.length - 3)
}); });
// var idx = i;
// AMap.event.addListener(marker, 'click', function(e){
// marker.setContent(events[idx].content);
// });
}; };
}) })
.fail(function() { .fail(function() {
alert('脦脼路篓路脙脦脢露鹿掳锚脥卢鲁脟API拢隆'); alert('Can not use douban api');
}); });
} }