注：
不介绍 Gist 是什么，只说说使用 Gist 的时候需要注意的地方。
Gist 用于补充说明地图源码（Markdwon 方便书写）
Gist Notes:
https://gist.githubusercontent.com/ + <你的ID> + / + <Gist ID> + /raw/ + <文件名> <script src="https://gist.github.com/district10/16efc4a3e432774f4bfd.js"></script> <script src="https://gist.github.com/district10/16efc4a3e432774f4bfd.js?file=whurs-0101.md"></script>注：
这个目录应当按照 GitCafe 上的源码来更新：README.md
还有一个 index.html 内容差不多。
42768c011cd2f65b4a4bfb43e2c49d52 (old, out of date)3560ea6a52f714e6931546450ddc1095 (new, up to date)1351503202APIs
高德官方工具
从零开始学高德 JS
一些补充
In Git Bash
pandoc.exe --ascii index.md -o index.html
new 一个地图：
var mapObj;
// 初始化地图对象，加载地图
function mapInit() {
mapObj = new AMap.Map("iCenter",{
rotateEnable:true,
dragEnable:true,
zoomEnable:true,
//二维地图显示视口
view: new AMap.View2D({
center:new AMap.LngLat(121.498586,31.239637),//地图中心点: shanghai
zoom:15 //地图显示的缩放级别
})
});
}注意如果不给 new AMap.Map("html-id") 多余参数，会把地图加载到你所在城市。（这个特性不错）
修改标注的语言：（P.S. Google、Apple 的地图服务都用到了高德地图的数据，高德威武）
function en_map(){
mapObj.setLang("en");
}
function zh_en_map(){
mapObj.setLang("zh_en");
}
function zh_map(){
mapObj.setLang("zh_cn");
}哈哈
核心代码就是一个 addBeiJing() 函数：
/*
*叠加云数据图层
*/
function addBeiJing() {
//加载云图层插件
mapObj.plugin('AMap.DistrictSearch', function () {
var opts = {
subdistrict: 1, //返回下一级行政区
extensions: 'all', //返回行政区边界坐标组等具体信息
level:'city' //查询行政级别为 市
};
//实例化DistrictSearch
district = new AMap.DistrictSearch(opts);
//查询成功时的回调函数，定义如何展示请求返回结果
AMap.event.addListener(district, 'complete', function(e){
var bounds = e.districtList[0].boundaries;
var polygons = [];
if(bounds) {
for(var i =0, l = bounds.length;i < l; i++){
//生成行政区划polygon
var polygon = new AMap.Polygon({
map:mapObj,
strokeWeight:1,
path:bounds[i],
fillOpacity:0.7,
fillColor:'#CCF3FF',
strokeColor: 'red',
});
polygons.push(polygon);
}
mapObj.setFitView();//地图自适应
}
});
district.setLevel('district');
district.search('朝阳区'); //行政区查询
});
}这部分比较复杂，先贴出全部代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>城市下拉列表</title>
<link rel="stylesheet" type="text/css" href="http://api.amap.com/Public/css/demo.Default.css" />
<script language="javascript" src="http://webapi.amap.com/maps?v=1.3&key=42768c011cd2f65b4a4bfb43e2c49d52"></script>
</head>
<body onLoad="mapInit()">
<div id="iCenter"></div>
<div>
省：
<select id='province' style="width:100px" onchange='search(this)'></select>
市：
<select id='city' style="width:100px" onchange='search(this)'></select>
区：
<select id='district' style="width:100px" onchange='search(this)'></select>
商圈：
<select id='biz_area' style="width:100px"></select>
</div>
<div>下拉列表选择省-市-区划以后，绘制区划边界</div>
<hr></hr>
<script src="https://gist.github.com/district10/16efc4a3e432774f4bfd.js?file=whurs-0301.md"></script>
</body>
<script language="javascript">
var mapObj, district, polygons=[], citycode;
var citySelect = document.querySelector('#city');
var districtSelect = document.querySelector('#district');
var areaSelect = document.querySelector('#biz_area');;
function mapInit(){
mapObj = new AMap.Map('iCenter',{
layers: [
new AMap.TileLayer()
],
view: new AMap.View2D({
center: new AMap.LngLat(116.30946,39.937629),
zoom: 3
})
});
var provinceList = ['北京市', '天津市', '河北省', '山西省', '内蒙古自治区', '辽宁省', '吉林省','黑龙江省', '上海市', '江苏省', '浙江省', '安徽省', '福建省', '江西省', '山东省','河南省', '湖北省', '湖南省', '广东省', '广西壮族自治区', '海南省', '重庆市','四川省', '贵州省', '云南省', '西藏自治区', '陕西省', '甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔自治区', '台灣', '香港特别行政区', '澳门特别行政区'];
var provinceSelect = document.querySelector('#province');
var content = '<option>--请选择--</option>';
for(var i =0, l = provinceList.length; i < l; i++){
content += '<option value="province">'+provinceList[i]+'</option>';
}
provinceSelect.innerHTML = content;
//行政区划查询
mapObj.plugin(["AMap.DistrictSearch"], function() {
var opts = {
subdistrict: 1, //返回下一级行政区
extensions: 'all', //返回行政区边界坐标组等具体信息
level:'city' //查询行政级别为 市
};
//实例化DistrictSearch
district = new AMap.DistrictSearch(opts);
//查询成功时的回调函数，定义如何展示请求返回结果
AMap.event.addListener(district, 'complete', function(e){
var dList = e.districtList;
for(var m = 0,ml = dList.length; m < ml; m++){
var data = e.districtList[m].level;
var bounds = e.districtList[m].boundaries;
if(data == "district" && dList[m].citycode === citycode){//只绘制 区, 且 本级别行政区划是上一级区划的下级行政区
if(bounds) {
for(var i =0, l = bounds.length; i < l; i++){
//生成行政区划polygon
var polygon = new AMap.Polygon({
map:mapObj,
strokeWeight:1,
strokeColor:'#CC66CC',
fillColor:'#CCF3FF',
fillOpacity:0.7,
path:bounds[i]
});
polygons.push(polygon);
}
mapObj.setFitView();//地图自适应
}
}
var list = e.districtList || [],
subList =[], level, nextLevel;
if(list.length >= 1) {
subList = list[0].districtList;
level = list[0].level;
}
//清空下一级别的下拉列表
if(level === 'province'){
nextLevel = 'city';
citySelect.innerHTML = '';
districtSelect.innerHTML = '';
areaSelect.innerHTML = '';
}else if(level === 'city'){
nextLevel = 'district';
districtSelect.innerHTML = '';
areaSelect.innerHTML = '';
} else if(level === 'district') {
nextLevel = 'biz_area';
areaSelect.innerHTML = '';
}
if(subList){
var contentSub = '<option>--请选择--</option>';
for(var i=0,l=subList.length; i<l; i++){
var name = subList[i].name;
var levelSub = subList[i].level;
var cityCode = subList[i].citycode;
contentSub += '<option value="'+levelSub+'|'+cityCode+'">'+name+'</option>';
document.querySelector('#'+levelSub).innerHTML = contentSub;
}
}
}
});
});
}
function search(obj){
//清除地图上所有覆盖物
for(var i = 0, l = polygons.length; i < l; i ++){
polygons[i].setMap(null);
}
var option = obj[obj.options.selectedIndex];
var arrTemp = option.value.split('|');
var level = arrTemp[0];//行政级别
citycode = arrTemp[1];// 城市编码
var keyword = option.text; //关键字
district.setLevel(level); //行政区级别
district.search(keyword); //行政区查询
}
</script>
</html> 给地图加上插件，然后 var 一个 RoadInfoSearch 变量 MSearch。搜索需要指定城市，
即 city: "city-id" 等信息。这些作为一个 key-value pairs dict 传入 AMap.RoadInfoSearch() 函数。如下：
var MSearch;
mapObj.plugin(["AMap.RoadInfoSearch"], function() {
MSearch = new AMap.RoadInfoSearch({ //构造地点查询类
pageSize:10,
pageIndex:1,
city:"010" //城市
});
AMap.event.addListener(MSearch, "complete", roadSearch_CallBack);//返回地点查询结果
MSearch.roadInfoSearchByRoadName("阜荣街"); //关键字查询
});本地测试了半天街景也没加载出来，原来要放到自己的网站上并去高德官网上设置白名单才行：
其实内容也不多：
//全景地图展示
panorama = new AMap.Panorama('ipano',{
position:position, //全景点位置
systemLabel:false, //不显示系统自带POI标签
pov: { //创建全景视角
heading:0,
pitch:0
}
});
AMap.event.addListener(panorama, 'complete', function() {
AMap.event.addListener(panorama, 'panochange', function() { //点标记和地图随着全景移动
var pano_position = panorama.getPosition();
mapObj.setCenter(pano_position);
marker.setPosition(pano_position);
});
});
//平面地图展示
mapObj = new AMap.Map("imap",{
center:position,
level:18
}); //创建地图实例
panoLayer = new AMap.PanoramaLayer();//创建全景路网
panoLayer.setMap(mapObj); //叠加全景路网
marker = new AMap.Marker({ //在地图上添加点标记
icon:'http://webapi.amap.com/images/marker_sprite.png',
position: position,
offset: new AMap.Pixel(-32,-10),
draggable:true
});
marker.setMap(mapObj);
AMap.event.addListener(marker, 'dragend', function(e) { //街景随着点标记移动
panorama.setPosition(e.lnglat);
});
}把图片按照 groundImageOpts(图片 Options，key-value pairs) 和 bounds（位置，调用 AMap.Bounds()）绑定到地图 mapObj 上。
var mapObj = new AMap.Map('iCenter'),
bounds = new AMap.Bounds(new AMap.LngLat(116.384377, 39.935029), new AMap.LngLat(116.388331, 39.939577)),
groundImageOpts = {
opacity: 0.5, //图片透明度
clickable: true,//图片相应鼠标点击事件，默认：false
map: mapObj //图片叠加的地图对象
}; 刚才只是生成了一个 bounds，并没有指定图片，现在用给 bounds 指定图片，用到的函数是：AMap.GroundImage()，这样处理后的 bounds 才完整。
//实例化一个图片覆盖物对象
groundImage = new AMap.GroundImage('http://api.amap.com/Public/images/js/gwf.png', bounds, groundImageOpts);最后把 bounds 绑定到地图上：
mapObj.setBounds(bounds);可以通过 groundImage（bounds 引用它） 来设置 bounds：
groundImage.setOpacity(opacityValue.value);WhuRS
我们组认为这是高德地图最有意思的一部分。
先从主界面的地图 mapObj 上获得图幅信息，东北、西南位置，东西南北跨度：
var mapBounds = mapObj.getBounds();
var sw = mapBounds.getSouthWest();
var ne = mapBounds.getNorthEast();
var lngSpan = Math.abs(sw.lng - ne.lng); // 其实东北、西南的经纬度大小是显而易见的。。。
var latSpan = Math.abs(ne.lat - sw.lat);随机生成一些点：
var markers = []; // 一个新的空 list。用 new Array() 也可以。
for (var i = 0; i < 500; i ++) {
// 先随机生成一个位置
var markerPosition = new AMap.LngLat(sw.lng + lngSpan * (Math.random() * 1),ne.lat - latSpan * (Math.random() * 1));
// new 一个 Marker
var marker = new AMap.Marker({
//map:mapObj,
position:markerPosition, //基点位置
icon:"http://developer.amap.com/wp-content/uploads/2014/06/marker.png", //marker图标，直接传递地址url
offset:{x:-8,y:-34} // 相对于基点的位置，这个是防止遮盖文字标记
});
markers.push(marker);
}再把这些点加到地图上：
function addCluster(tag)
{
if(cluster) {
cluster.setMap(null); // 如果已经有 cluster 了，先先清空，不然就凌乱了
}
if(tag==1) {
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),textColor:'#CC0066'}];
mapObj.plugin(["AMap.MarkerClusterer"],function(){
cluster = new AMap.MarkerClusterer(mapObj,markers,{styles:sts});
});
}
else {
mapObj.plugin(["AMap.MarkerClusterer"],function(){
cluster = new AMap.MarkerClusterer(mapObj,markers);
});
}
}
addCluster(0); // 这里显效上面用到了 MarkerClusterer 插件。
最后用按钮来控制 Cluster 的类型：
<input type="button" value="自定义样式点聚合" onClick="javascript:addCluster(1)"/>
<input type="button" value="默认样式点聚合" onClick="javascript:addCluster(0)"/>首先：
mapObj = new AMap.Map("iCenter");注意 new AMap.Map("html-id")，之前说过，这样会把地图加载到你所在的城市（我这里是武汉）。
有点累，先去吃饭，把源码先贴上：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>关键字查询</title>
<link rel="stylesheet" type="text/css" href="http://developer.amap.com/Public/css/demo.Default.css" />
<script language="javascript" src="http://webapi.amap.com/maps?v=1.3&key=42768c011cd2f65b4a4bfb43e2c49d52"></script>
<script language="javascript">
var mapObj;
var marker = new Array();
var windowsArr = new Array();
//基本地图加载
function mapInit() {
mapObj = new AMap.Map("iCenter");
}
function placeSearch(p) {
var MSearch;
mapObj.plugin(["AMap.PlaceSearch"], function() {
MSearch = new AMap.PlaceSearch({ //构造地点查询类
pageSize:10,
pageIndex:1,
city:"021" //城市
});
AMap.event.addListener(MSearch, "complete", keywordSearch_CallBack);//返回地点查询结果
MSearch.search(p); //关键字查询
});
}
function placeSearchTwo() {
var p = documment.getElementById("mySearch").value;
alert(p);
}
//添加marker&infowindow
function addmarker(i, d) {
var lngX = d.location.getLng();
var latY = d.location.getLat();
var markerOption = {
map:mapObj,
icon:"http://webapi.amap.com/images/" + (i + 1) + ".png",
position:new AMap.LngLat(lngX, latY),
topWhenClick:true
};
var mar = new AMap.Marker(markerOption);
marker.push(new AMap.LngLat(lngX, latY));
var infoWindow = new AMap.InfoWindow({
content:"<h3><font color=\"#00a6ac\"> " + (i + 1) + ". " + d.name + "</font></h3>" + TipContents(d.type, d.address, d.tel),
size:new AMap.Size(300, 0),
autoMove:true,
offset:new AMap.Pixel(0,-20)
});
windowsArr.push(infoWindow);
var aa = function (e) {infoWindow.open(mapObj, mar.getPosition());};
AMap.event.addListener(mar, "click", aa);
}
//回调函数
function keywordSearch_CallBack(data) {
var resultStr = "";
var poiArr = data.poiList.pois;
var resultCount = poiArr.length;
for (var i = 0; i < resultCount; i++) {
resultStr += "<div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById1(" + i + ",this)' onmouseout='onmouseout_MarkerStyle(" + (i + 1) + ",this)' style=\"font-size: 12px;cursor:pointer;padding:0px 0 4px 2px; border-bottom:1px solid #C1FFC1;\"><table><tr><td><img src=\"http://webapi.amap.com/images/" + (i + 1) + ".png\"></td>" + "<td><h3><font color=\"#00a6ac\">名称: " + poiArr[i].name + "</font></h3>";
resultStr += TipContents(poiArr[i].type, poiArr[i].address, poiArr[i].tel) + "</td></tr></table></div>";
addmarker(i, poiArr[i]);
}
mapObj.setFitView();
document.getElementById("result").innerHTML = resultStr;
}
function TipContents(type, address, tel) { //窗体内容
if (type == "" || type == "undefined" || type == null || type == " undefined" || typeof type == "undefined") {
type = "暂无";
}
if (address == "" || address == "undefined" || address == null || address == " undefined" || typeof address == "undefined") {
address = "暂无";
}
if (tel == "" || tel == "undefined" || tel == null || tel == " undefined" || typeof address == "tel") {
tel = "暂无";
}
var str = " 地址：" + address + "<br /> 电话：" + tel + " <br /> 类型：" + type;
return str;
}
function openMarkerTipById1(pointid, thiss) { //根据id 打开搜索结果点tip
thiss.style.background = '#CAE1FF';
windowsArr[pointid].open(mapObj, marker[pointid]);
}
function onmouseout_MarkerStyle(pointid, thiss) { //鼠标移开后点样式恢复
thiss.style.background = "";
}
</script>
</head>
<body onload="mapInit();">
<div id="iCenter"></div>
<div class="demo_box">
<p><input type="button" value="查询" onclick="placeSearch('东方明珠')"/>
<input id="mySearch" type="text" value="东方明珠"/>
<input type="button" value="查询2" onclick="alert('Test JavaScript')"/>
<input type="button" value="查询3" onclick="placeSearch('" + document.getElementById("mySearch").value() + "')"/>
<input type="button" value="查询4" onclick="placeSearchTwo()"/>
<br />
</p>
<div id="r_title"><b>关键字查询结果:</b></div>
<div id="result"> </div>
</div>
<hr></hr>
<script src="https://gist.github.com/district10/16efc4a3e432774f4bfd.js?file=whurs-0901.md"></script>
</body>
</html>