mcattx · November 26, 2015 10:16
diff --git a/amap.html b/amap.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <title>高德地图测试</title>
  <style type="text/css">
    body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    #container {
      width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";
    }
    #mapBox {
      width: 90%;
      height: 90%;
      margin: 20px auto;
    }
    #container {
      border-radius: 15px;
    }
    body {
      background-image: url('symphony.png');
      background-repeat: repeat;
    }

    /* 自定义信息窗口 */
    .info {
      border: 1px solid #ccc;
    }
    .info-top {
      display: none;
      background: none repeat scroll 0 0 #F9F9F9;
      border-bottom: 1px solid #CCC;
      border-radius: 5px 5px 0 0;
    }
    .info-top div {
      display: inline-block;
      color: #333333;
      font-size: 14px;
      font-weight: bold;
      line-height: 31px;
      padding: 0 10px;
    }
    .info-top img {
      position: absolute;
      top: 10px;
      right: 10px;
      transition-duration: 0.25s;
    }
    .info-middle {
      font-size: 12px;
      padding: 6px;
      line-height: 20px;
    }
    .info-middle img {
      float: left;
      margin-right: 6px;
    }
    .info-bottom {
      height: 0px;
      width: 100%;
      clear: both;
      text-align: center;
    }
    .info-bottom img {
      position: relative;
      z-index: 104;
    }
    /*隐藏高德地图logo*/
    .amap-logo {
      display: none;
    }
    #reset {
      position: absolute;
      left: 35px;
      bottom: 100px;
      width: 50px;
      height: 20px;
      background: #0d9bf2;
      color: #fff;
    }
    /*隐藏放大缩小工具条*/
    .amap-toolbar {
      display: none;
    }
    .count {
      display: inline-block;
      width: 22px;
      height: 22px;
      color: #fff;
      font-size: 8px;
      line-height: 3em;
      text-align: center;
      background-image: url("http://s1.yy.com/shenqu_act/images/act/singleDog/single.png");
      background-position: 0 -263px;
      background-size: 34px 374px;
      background-repeat: no-repeat;
    }
    /*修复 marker 的变形问题*/
    .amap-marker {
      width: 22px;
      height: 48px;
    }
  </style>
 </head>
 <body>
  <div id="mapBox">
     <div id="container"></div>
  </div>
  <div id="reset">复位</div>
 </body>
 <script src="api.js"></script>
 <script src="http://s2.yy.com/shenqu_act/js/??act/kingHegemony/yymobile_api.min.js,lib/safeInvokeMethod.js"></script>
 <script src="gdmap.js"></script>
 <script type="text/javascript">
  var map = new AMap.Map('container');
  map.setZoom(5);
  map.setCenter([116.39,39.9]);

  //创建排行榜的点
  var rankMarker = new AMap.Marker({
    icon: 'http://s2.yy.com/shenqu_mobile/images/common/yy-bear.png',
    position: ["91.17211", "29.652491"],
    map: map,
    offset: new AMap.Pixel(-50,-130)
  });

  // 给排行榜那个点加上跳转事件
  AMap.event.addListener(rankMarker, 'click', function(){
    window.location.href = 'http://baidu.com'
  });

  //每个省份加一个 marker
  var pMarkers = [];
  for (var i = 0; i < 500; i += 1) {
    var marker;
    var markerPosition = [Math.random() * (125 - 85) + 85,Math.random() * (45 - 20) + 20];
    var icon = new AMap.Icon({
      image: 'http://www.yy.com/assets/images/favicon.ico',
      size: new AMap.Size(16, 16)
    });
    marker = new AMap.Marker({
      icon: icon,
      position: markerPosition,
      //如果设置了content, icon会失效
      //content: '<i class="count">' + provinces[i].type + '</i><img src="http://www.yy.com/assets/images/favicon.ico">',
      offset: new AMap.Pixel(-10, -60),
      map: map
    });
    marker.setTitle('我是第' + i + '个');
    AMap.event.addListener(marker, 'click', function() {
      var infoWindow = addWindowInfo(9527);
      infoWindow.open(map, this.getPosition());
    });
    pMarkers.push(marker);//这句代码一定要放在 for 循环里，否则点聚合会失效。
  };

  AMap.event.addListener(map, 'zoomchange', function() {
    closeInfoWindow();
  });

  AMap.event.addListener(map, 'click', function() {
    closeInfoWindow();
  });
  
  var cluster;
  addCluster();

  function addWindowInfo(data) {
    var _this = this;
    var content = [];
    var title = 'asdf';
    content.push("<img src='info.jpg'>地址：北京市朝阳区阜通东大街6号院3号楼 东北 8.3 公里");
    content.push("电话：010 64733333");
    content.push("<a href='http://ditu.amap.com/detail/B000A8URXB?citycode=110105' target='_blank'>详细信息" + data + "</a>");
    var infoWindow = new AMap.InfoWindow({
      isCustom: true,
      content: createInfoWindow(title, content.join("<br/>")),
      offset: new AMap.Pixel(0, -65)
    });
    return infoWindow;
  }

  function createInfoWindow(title, content) {
    var info = document.createElement("div");
    info.className = "info";

    //定义顶部标题
    var top = document.createElement('div');
    var titleD = document.createElement('div');
    var closeX = document.createElement('img');
    top.className = 'info-top';
    titleD.innerHTML = title;
    closeX.src = 'http://webapi.amap.com/images/close2.gif';
    closeX.onclick = closeInfoWindow;

    top.appendChild(titleD);
    top.appendChild(closeX);
    info.appendChild(top);

    //定义中部内容
    var middle = document.createElement('div');
    middle.className = "info-middle";
    middle.style.backgroundColor = 'white';
    middle.innerHTML = content;
    info.appendChild(middle);

    // 定义底部内容
    var bottom = document.createElement("div");
    bottom.className = "info-bottom";
    bottom.style.position = 'relative';
    bottom.style.top = '0px';
    bottom.style.margin = '0 auto';
    info.appendChild(bottom);
    return info;
  }

  function closeInfoWindow() {
    map.clearInfoWindow();
  }

  AMap.event.addListener(rankMarker, 'click', function(){
    window.location.href = 'http://baidu.com'
  });

  //给地图加上回到原点的控件
  // AMap.homeControlDiv = function() {

  // };
  // AMap.homeControlDiv.prototype = {
  //   _getHtmlDom: function(map) {
  //     var _this = this;
  //     _this.map = map;
  //     var UI = document.createElement('div');
  //     UI.style.width = '80px';
  //     UI.style.height = '20px';
  //     UI.style.backgroundColor = 'white';
  //     UI.style.borderStyle = 'solid';
  //     UI.style.borderWidth = '2px';
  //     UI.style.cursor = 'pointer';
  //     UI.style.textAlign = 'center'; 

  //     //设置控件位置
  //     UI.style.position='absolute';
  //     UI.style.left='120px';     //设置控件离地图的左边界的偏移量
  //     UI.style.top='5px';        //设置控件离地图上边界的偏移量
  //     UI.style.zIndex='300';     //设置控件在地图上显示

  //     UI.style.fontFamily='Arial,sens-serif';
  //     UI.style.fontSize='12px';
  //     UI.style.paddingLeft='4px';
  //     UI.style.paddingRight='4px';
  //     UI.innerHTML="返回中心";

  //     // 设置控件响应点击onclick 事件
  //     UI.onclick=function(){
  //       map.setZoom(5);
  //       map.setCenter([116.39,39.9]);
  //     }
  //     return UI;
  //   }
  // };

  // AMap.plugin(['AMap.homeControlDiv'], function() {
  //   var homeControl = new AMap.homeControlDiv()._getHtmlDom(AMap);
  //   map.addControl(homeControl);
  //   console.log(homeControl);
  // });
  // 


 // 添加点聚合


 function addCluster() {
  if (cluster) {
    cluster.setMap(null);
  };
  var sts = [
    {
      url: "http://developer.amap.com/wp-content/uploads/2014/06/1.png",
      size: new AMap.Size(32, 32),
      offset: new AMap.Pixel(-16, -30)
    },{
      url: "http://developer.amap.com/wp-content/uploads/2014/06/2.png",
      size: new AMap.Size(32, 32),
      offset: new AMap.Pixel(-16, -30)
    },{
      url: "http://developer.amap.com/wp-content/uploads/2014/06/3.png",
      size: new AMap.Size(48, 48),
      offset: new AMap.Pixel(-24, -45)
    },{
      url: "http://developer.amap.com/wp-content/uploads/2014/06/3.png",
      size: new AMap.Size(48, 48),
      offset: new AMap.Pixel(-24, -45),
      textColor: '#CC0066'
    }
  ];
  map.plugin(["AMap.MarkerClusterer"], function() {
    cluster = new AMap.MarkerClusterer(map, pMarkers, {
      styles: sts
    });
  });

 };

 //自动定位
 map.plugin('AMap.Geolocation', function() {
  geolocation = new AMap.Geolocation({
    //buttonDom:'',自定义定位按钮的内容
    zoomToAccuracy: true//定位成功且显示精度范围时，是否把地图视野调整到正好显示精度范围
  });
  
  map.addControl(geolocation);
  AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
  AMap.event.addListener(geolocation, 'error', onError);//返回定位出错信息
  //console.log(getCurrentPosition());
  
 });

 function getCurrentPosition () {
  geolocation.getCurrentPosition();
 };

 function onComplete (data) {
  //定位成功的回调
  //http://lbs.amap.com/api/javascript-api/reference/plugin/#m_GeolocationResult
 };

 function onError (data) {
  //定位失败的回调
 };

 var $location = document.getElementById('location');
 var $reset = document.getElementById('reset');
 AMap.event.addDomListener($reset , 'click', function(){
    map.setZoom(5);
  map.setCenter([116.39,39.9]);
  });

 //禁止下拉刷新
 function setPullRefreshEnable() {
  return safeInvokeMethod('ui', 'setPullRefreshEnable', {isRefresh: false});
 };
 setPullRefreshEnable();
 </script>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<title>高德地图测试</title>
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	#container {
	width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";
	}
	#mapBox {
	width: 90%;
	height: 90%;
	margin: 20px auto;
	}
	#container {
	border-radius: 15px;
	}
	body {
	background-image: url('symphony.png');
	background-repeat: repeat;
	}

	/* 自定义信息窗口 */
	.info {
	border: 1px solid #ccc;
	}
	.info-top {
	display: none;
	background: none repeat scroll 0 0 #F9F9F9;
	border-bottom: 1px solid #CCC;
	border-radius: 5px 5px 0 0;
	}
	.info-top div {
	display: inline-block;
	color: #333333;
	font-size: 14px;
	font-weight: bold;
	line-height: 31px;
	padding: 0 10px;
	}
	.info-top img {
	position: absolute;
	top: 10px;
	right: 10px;
	transition-duration: 0.25s;
	}
	.info-middle {
	font-size: 12px;
	padding: 6px;
	line-height: 20px;
	}
	.info-middle img {
	float: left;
	margin-right: 6px;
	}
	.info-bottom {
	height: 0px;
	width: 100%;
	clear: both;
	text-align: center;
	}
	.info-bottom img {
	position: relative;
	z-index: 104;
	}
	/隐藏高德地图logo/
	.amap-logo {
	display: none;
	}
	#reset {
	position: absolute;
	left: 35px;
	bottom: 100px;
	width: 50px;
	height: 20px;
	background: #0d9bf2;
	color: #fff;
	}
	/隐藏放大缩小工具条/
	.amap-toolbar {
	display: none;
	}
	.count {
	display: inline-block;
	width: 22px;
	height: 22px;
	color: #fff;
	font-size: 8px;
	line-height: 3em;
	text-align: center;
	background-image: url("http://s1.yy.com/shenqu_act/images/act/singleDog/single.png");
	background-position: 0 -263px;
	background-size: 34px 374px;
	background-repeat: no-repeat;
	}
	/修复 marker 的变形问题/
	.amap-marker {
	width: 22px;
	height: 48px;
	}
	</style>
	</head>
	<body>
	<div id="mapBox">
	<div id="container"></div>
	</div>
	<div id="reset">复位</div>
	</body>
	<script src="api.js"></script>
	<script src="http://s2.yy.com/shenqu_act/js/??act/kingHegemony/yymobile_api.min.js,lib/safeInvokeMethod.js"></script>
	<script src="gdmap.js"></script>
	<script type="text/javascript">
	var map = new AMap.Map('container');
	map.setZoom(5);
	map.setCenter([116.39,39.9]);

	//创建排行榜的点
	var rankMarker = new AMap.Marker({
	icon: 'http://s2.yy.com/shenqu_mobile/images/common/yy-bear.png',
	position: ["91.17211", "29.652491"],
	map: map,
	offset: new AMap.Pixel(-50,-130)
	});

	// 给排行榜那个点加上跳转事件
	AMap.event.addListener(rankMarker, 'click', function(){
	window.location.href = 'http://baidu.com'
	});

	//每个省份加一个 marker
	var pMarkers = [];
	for (var i = 0; i < 500; i += 1) {
	var marker;
	var markerPosition = [Math.random() * (125 - 85) + 85,Math.random() * (45 - 20) + 20];
	var icon = new AMap.Icon({
	image: 'http://www.yy.com/assets/images/favicon.ico',
	size: new AMap.Size(16, 16)
	});
	marker = new AMap.Marker({
	icon: icon,
	position: markerPosition,
	//如果设置了content, icon会失效
	//content: '<i class="count">' + provinces[i].type + '</i><img src="http://www.yy.com/assets/images/favicon.ico">',
	offset: new AMap.Pixel(-10, -60),
	map: map
	});
	marker.setTitle('我是第' + i + '个');
	AMap.event.addListener(marker, 'click', function() {
	var infoWindow = addWindowInfo(9527);
	infoWindow.open(map, this.getPosition());
	});
	pMarkers.push(marker);//这句代码一定要放在 for 循环里，否则点聚合会失效。
	};

	AMap.event.addListener(map, 'zoomchange', function() {
	closeInfoWindow();
	});

	AMap.event.addListener(map, 'click', function() {
	closeInfoWindow();
	});

	var cluster;
	addCluster();

	function addWindowInfo(data) {
	var _this = this;
	var content = [];
	var title = 'asdf';
	content.push("<img src='info.jpg'>地址：北京市朝阳区阜通东大街6号院3号楼东北 8.3 公里");
	content.push("电话：010 64733333");
	content.push("<a href='http://ditu.amap.com/detail/B000A8URXB?citycode=110105' target='_blank'>详细信息" + data + "</a>");
	var infoWindow = new AMap.InfoWindow({
	isCustom: true,
	content: createInfoWindow(title, content.join("<br/>")),
	offset: new AMap.Pixel(0, -65)
	});
	return infoWindow;
	}

	function createInfoWindow(title, content) {
	var info = document.createElement("div");
	info.className = "info";

	//定义顶部标题
	var top = document.createElement('div');
	var titleD = document.createElement('div');
	var closeX = document.createElement('img');
	top.className = 'info-top';
	titleD.innerHTML = title;
	closeX.src = 'http://webapi.amap.com/images/close2.gif';
	closeX.onclick = closeInfoWindow;

	top.appendChild(titleD);
	top.appendChild(closeX);
	info.appendChild(top);

	//定义中部内容
	var middle = document.createElement('div');
	middle.className = "info-middle";
	middle.style.backgroundColor = 'white';
	middle.innerHTML = content;
	info.appendChild(middle);

	// 定义底部内容
	var bottom = document.createElement("div");
	bottom.className = "info-bottom";
	bottom.style.position = 'relative';
	bottom.style.top = '0px';
	bottom.style.margin = '0 auto';
	info.appendChild(bottom);
	return info;
	}

	function closeInfoWindow() {
	map.clearInfoWindow();
	}

	AMap.event.addListener(rankMarker, 'click', function(){
	window.location.href = 'http://baidu.com'
	});

	//给地图加上回到原点的控件
	// AMap.homeControlDiv = function() {

	// };
	// AMap.homeControlDiv.prototype = {
	// _getHtmlDom: function(map) {
	// var _this = this;
	// _this.map = map;
	// var UI = document.createElement('div');
	// UI.style.width = '80px';
	// UI.style.height = '20px';
	// UI.style.backgroundColor = 'white';
	// UI.style.borderStyle = 'solid';
	// UI.style.borderWidth = '2px';
	// UI.style.cursor = 'pointer';
	// UI.style.textAlign = 'center';

	// //设置控件位置
	// UI.style.position='absolute';
	// UI.style.left='120px'; //设置控件离地图的左边界的偏移量
	// UI.style.top='5px'; //设置控件离地图上边界的偏移量
	// UI.style.zIndex='300'; //设置控件在地图上显示

	// UI.style.fontFamily='Arial,sens-serif';
	// UI.style.fontSize='12px';
	// UI.style.paddingLeft='4px';
	// UI.style.paddingRight='4px';
	// UI.innerHTML="返回中心";

	// // 设置控件响应点击onclick 事件
	// UI.onclick=function(){
	// map.setZoom(5);
	// map.setCenter([116.39,39.9]);
	// }
	// return UI;
	// }
	// };

	// AMap.plugin(['AMap.homeControlDiv'], function() {
	// var homeControl = new AMap.homeControlDiv()._getHtmlDom(AMap);
	// map.addControl(homeControl);
	// console.log(homeControl);
	// });
	//


	// 添加点聚合


	function addCluster() {
	if (cluster) {
	cluster.setMap(null);
	};
	var sts = [
	{
	url: "http://developer.amap.com/wp-content/uploads/2014/06/1.png",
	size: new AMap.Size(32, 32),
	offset: new AMap.Pixel(-16, -30)
	},{
	url: "http://developer.amap.com/wp-content/uploads/2014/06/2.png",
	size: new AMap.Size(32, 32),
	offset: new AMap.Pixel(-16, -30)
	},{
	url: "http://developer.amap.com/wp-content/uploads/2014/06/3.png",
	size: new AMap.Size(48, 48),
	offset: new AMap.Pixel(-24, -45)
	},{
	url: "http://developer.amap.com/wp-content/uploads/2014/06/3.png",
	size: new AMap.Size(48, 48),
	offset: new AMap.Pixel(-24, -45),
	textColor: '#CC0066'
	}
	];
	map.plugin(["AMap.MarkerClusterer"], function() {
	cluster = new AMap.MarkerClusterer(map, pMarkers, {
	styles: sts
	});
	});

	};

	//自动定位
	map.plugin('AMap.Geolocation', function() {
	geolocation = new AMap.Geolocation({
	//buttonDom:'',自定义定位按钮的内容
	zoomToAccuracy: true//定位成功且显示精度范围时，是否把地图视野调整到正好显示精度范围
	});

	map.addControl(geolocation);
	AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
	AMap.event.addListener(geolocation, 'error', onError);//返回定位出错信息
	//console.log(getCurrentPosition());

	});

	function getCurrentPosition () {
	geolocation.getCurrentPosition();
	};

	function onComplete (data) {
	//定位成功的回调
	//http://lbs.amap.com/api/javascript-api/reference/plugin/#m_GeolocationResult
	};

	function onError (data) {
	//定位失败的回调
	};

	var $location = document.getElementById('location');
	var $reset = document.getElementById('reset');
	AMap.event.addDomListener($reset , 'click', function(){
	map.setZoom(5);
	map.setCenter([116.39,39.9]);
	});

	//禁止下拉刷新
	function setPullRefreshEnable() {
	return safeInvokeMethod('ui', 'setPullRefreshEnable', {isRefresh: false});
	};
	setPullRefreshEnable();
	</script>
	</html>