More experiments.
This commit is contained in:
66
index.html
66
index.html
@@ -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');
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user