【高德地圖API】從零開始學高德JS API（三）覆蓋物

時間  2019-12-07
標籤 高德地圖API 開始 api 覆蓋物 欄目 JavaScript 简体版
原文   原文鏈接

摘要：覆蓋物，是一張地圖的靈魂。有覆蓋物的地圖，纔是完整的地圖。在一張地圖上，除了底層的底圖（瓦片圖，矢量圖），控件（有功能可操做的工具），最重要最不可缺乏的就是覆蓋物了。覆蓋物有多種，包括，標註、折線、多邊形、信息窗口、聚合marker、麻點圖和圖片覆蓋物。本文會詳細介紹每一種覆蓋物的概念，添加方法，修改方法，移除方法等。最後會提供示例和源代碼下載。javascript

示例demo：http://zhaoziang.com/amap/zero_3_1.htmlcss

1、標註markerhtml

最多見的覆蓋物就是標註（marker），用它能夠標示出店鋪的位置，你所在的位置，連鎖店的分佈圖等，能夠把標註簡單理解爲1個點。html5

在地圖上增長一個標註，又稱之爲在地圖上「打點」。打點工具在上一章《控件》中已經詳細講解，控件：http://www.cnblogs.com/milkmap/p/3707711.html 。java

舒適有愛的小貼士：web

標註marker的圖片能夠是gif圖，讓marker「動」起來。api

一、添加標註——「可愛的趙靈兒」數組

icon是標註的圖片地址，想用什麼圖片，就把圖片地址放在這裏。瀏覽器

position是標註的位置，經緯度。app

//實例化marker  
function addMarker(){  
marker=new AMap.Marker({                    
icon:"zhao.gif",  
position:new AMap.LngLat(116.405467,39.907761)  
});  
marker.setMap(mapObj);  //在地圖上添加點  
}

二、修改標註——「一秒鐘變拓跋玉兒」

setContent是用於改變文字說明，支持html5；

setPosition是用於改變標註的位置。

marker.setContent(markerContent);//更新點標記內容  
marker.setPosition(new AMap.LngLat(116.391467,39.927761)); //更新點標記位置

三、清除覆蓋物

對於制定marker，能夠單獨清除每個覆蓋物：

marker.setMap(null);

清除地圖上所有覆蓋物，用：

mapObj.clearMap();

示例demo：http://zhaoziang.com/amap/zero_3_1.html

2、聚合marker

一、增長一個marker

舒適小貼士：

不如icon的值爲空，就會調用高德默認的marker喲，也蠻漂亮的。

function addMarker2(){
  marker2 = new AMap.Marker({  
     position:(new AMap.LngLat(116.384182,39.916451)),  
     draggable:true, //點標記可拖拽  
     cursor:'move'   //鼠標懸停點標記時的鼠標樣式  
  });  
  marker2.setMap(mapObj);  
}

二、給marker加上動畫

跳動動畫

function marker2Cartoon(){
  marker2.setAnimation('AMAP_ANIMATION_BOUNCE'); //設置點標記的動畫效果，此處爲彈跳效果
}

拖拽動畫

拖拽動畫須要在marker裏面設置。

function addMarker2(){
marker2 = new AMap.Marker({  
    position:(new AMap.LngLat(116.384182,39.916451)),  
    draggable:true,  //點標記可拖拽  
    cursor:'move',  
    raiseOnDrag:true //鼠標拖拽點標記時開啓點標記離開地圖的效果
});  
marker2.setMap(mapObj);

}

三、聚合marker

增長一羣marker，就是聚合marker

舒適小貼士：爲何要使用聚合marker？

當marker大於500的時候，滿屏幕都是密密麻麻的marker了，顯得雜亂無章。

並且因爲瀏覽器性能的關係，特別是IE6瀏覽器，會形成瀏覽器卡死的狀況。

這個時候，使用麻點圖或者聚合marker就能夠輕鬆解決marker數量太多的問題。

增長一羣marker：

function iJuhe(){
mapObj.clearMap();
// 隨機向地圖添加500個標註點  
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);  

for (var i = 0; i < 500; i ++) {  
    var markerPosition = new AMap.LngLat(sw.lng + lngSpan * (Math.random() * 1),ne.lat - latSpan * (Math.random() * 1));  
    var marker = new AMap.Marker({  
        map:mapObj,  
        position:markerPosition, //基點位置  
        icon:"js_marker.png", //marker圖標，直接傳遞地址url  
        offset:{x:-8,y:-34} //相對於基點的位置  
    });  
    markers.push(marker);  
}  
}

增長marker聚合的功能：

function addCluster(tag)  
{  
if(cluster) {     
    cluster.setMap(null);  
}  
if(tag==1) {  
    var sts=[{url:"js_1.png",size:new AMap.Size(32,32),offset:new AMap.Pixel(-16,-30)},  
               {url:"js_2.png",size:new AMap.Size(32,32),offset:new AMap.Pixel(-16,-30)},  
               {url:"js_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);  
    });  
}  
}

縮小地圖，marker會變得更加集中。

增長一個延時延時的功能，先添加500的marker，一秒鐘後變成聚合marker。

setTimeout(function(){
    addCluster(0); e
},1000);

示例demo：http://zhaoziang.com/amap/zero_3_1.html

3、麻點圖

高德雲圖是實時渲染的，在後臺更改數據後，能在前臺直觀的看到數據展現。

免去了切圖啊，製做瓦片圖，對準經緯度等一系列的麻煩。

一、登陸雲圖，輕鬆製做麻點圖：http://yuntu.amap.com/datamanager/index.html

點擊建立地圖

二、導入數據

手工導入數據，可視化一站式操做，適合少許點：

自動導入數據，適合大批量數據：

舒適小貼士：

第一行必須是字段名，只能是字母、數字和下劃線，而且不能以數字開頭。

經緯度必須分開成2個字段！

文件只支持 .csv 格式、UTF-8編碼，數據量不超過 10,000 條，文件大小不超過10M、字段總數不超過 40 個。

字段命名規則：以英文字母開頭，僅由英文字母、數字、下劃線組成，字段名長度不超過20位。

建立表格數據，能夠打開一個記事本，編碼改成UFT-8模式。而後導入數據。

數據格式舉例：

tag,name,lng,lat,tel,content
免費停車場,免費停車場001,116.430359,39.958175,010-52294832,停過5次沒貼條
免費停車場,免費停車場002,116.279297,40.00132,010-52294832,停過1次沒貼條
免費停車場,免費停車場003,116.202393,39.825413,010-52294832,停過2次沒貼條
免費停車場,免費停車場004,116.564941,39.835959,010-52294832,停過7次沒貼條
免費停車場,免費停車場005,116.437225,39.806426,010-52294832,停過20次沒貼條

數據導入後，就是這樣子的。你們點擊預覽，就能夠獲取一個url了。

而後你們能夠直接用iframe的形式，把標註好的地圖放到本身的網站上。

雲圖實時渲染：

<iframe src="http://yuntu.amap.com/share/MZVB3y"></iframe>

接下來，你們若是要使用雲索引，雲檢索，使用這個教程：

三甲醫院例子：http://www.cnblogs.com/milkmap/p/3637899.html

東莞酒店例子：http://www.cnblogs.com/milkmap/p/3657829.html

貪官羅馬圖：http://www.cnblogs.com/milkmap/p/3678377.html

示例demo：http://zhaoziang.com/amap/zero_3_1.html

4、折線，行車記錄儀，軌跡回放

一、折線

function addLine(){  
   var lineArr=new Array();//建立線覆蓋物節點座標數組  
   lineArr.push(new AMap.LngLat("116.368904","39.913423"));   
   lineArr.push(new AMap.LngLat("116.382122","39.901176"));   
   lineArr.push(new AMap.LngLat("116.387271","39.912501"));   
   lineArr.push(new AMap.LngLat("116.398258","39.904600"));   
   polyline=new AMap.Polyline({   
   path:lineArr, //設置線覆蓋物路徑  
   strokeColor:"#3366FF", //線顏色  
   strokeOpacity:1, //線透明度   
   strokeWeight:5, //線寬  
   strokeStyle:"solid", //線樣式  
   strokeDasharray:[10,5] //補充線樣式   
   });   
   polyline.setMap(mapObj);  
 }

二、讓軌跡動起來

marker3.moveAlong(lineArr,80);     //開始軌跡回放

三、讓軌跡暫停

marker3.stopMove();  //暫停軌跡回放

示例demo：http://zhaoziang.com/amap/zero_3_1.html

5、圓形，多邊形

圓形

//添加圓覆蓋物  
function addCircle() {  
   circle = new AMap.Circle({   
   center:new AMap.LngLat("116.403322","39.920255"),// 圓心位置  
   radius:10000, //半徑  
   strokeColor: "#F33", //線顏色  
   strokeOpacity: 1, //線透明度  
   strokeWeight: 3, //線粗細度  
   fillColor: "#ee2200", //填充顏色  
   fillOpacity: 0.35//填充透明度  
   });   
   circle.setMap(mapObj);     
}

多邊形

//添加多邊形覆蓋物  
function addPolygon(){  
   var polygonArr=new Array();//多邊形覆蓋物節點座標數組   
   polygonArr.push(new AMap.LngLat("116.319809","39.956596"));   
   polygonArr.push(new AMap.LngLat("116.556702","39.983434"));   
   polygonArr.push(new AMap.LngLat("116.483917","39.845449"));   
   polygonArr.push(new AMap.LngLat("116.244278","39.848612"));   
   polygon=new AMap.Polygon({     
   path:polygonArr,//設置多邊形邊界路徑  
   strokeColor:"#0000ff", //線顏色  
   strokeOpacity:0.2, //線透明度   
   strokeWeight:3,    //線寬   
   fillColor: "#f5deb3", //填充色  
   fillOpacity: 0.35//填充透明度  
  });   
  polygon.setMap(mapObj);  
 }

示例demo：http://zhaoziang.com/amap/zero_3_1.html

6、信息窗口

一、默認信息窗口

//在指定位置打開默認信息窗體  
function openInfo(){    
    //構建信息窗體中顯示的內容  
    var info = [];   
    info.push("<div><div><img style=\"float:left;\" src=\" http://webapi.amap.com/images/autonavi.png \"/></div> ");   
    info.push("<div style=\"padding:0px 0px 0px 4px;\"><b>高德軟件</b>");    
    info.push("電話 : 010-84107000   郵編 : 100102");    
    info.push("地址 : 北京市望京阜通東大街方恆國際中心A座16層</div></div>");            
    inforWindow = new AMap.InfoWindow({    
        content:info.join("<br/>")  //使用默認信息窗體框樣式，顯示信息內容  
    });   
    inforWindow.open(mapObj,new AMap.LngLat(116.373881,39.907409));  
}

二、自定義信息窗口

//實例化信息窗體  
var infoWindow2 = new AMap.InfoWindow({  
isCustom:true,  //使用自定義窗體  
content:createInfoWindow('方恆假日酒店&nbsp;&nbsp;<span style="font-size:11px;color:#F00;">價格:318</span>',"<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134' style='float:left;margin:0 5px 5px 0;'>地址：北京市朝陽區阜通東大街6號院3號樓 東北 8.3 千米<br/>電話：010 64733333<br/><a href='http://baike.baidu.com/view/6748574.htm'>詳細信息</a>"),  
size:new AMap.Size(300, 0),  
offset:new AMap.Pixel(0, -50)//-113, -140  
}); 

//關閉信息窗體  
function closeInfoWindow(){  
mapObj.clearInfoWindow();  
} 
//構建自定義信息窗體   
function createInfoWindow(title,content){  
var info = document.createElement("div");  
info.className = "info";  
// 定義頂部標題  
var top = document.createElement("div");  
top.className = "info-top";  
  var titleD = document.createElement("div");  
  titleD.innerHTML = title;  
  var closeX = document.createElement("img");  
  closeX.src = "close2.gif";  
  closeX.onclick = closeInfoWindow;  

top.appendChild(titleD);  
top.appendChild(closeX);  
info.appendChild(top);  
// 定義中部內容  
var middle = document.createElement("div");  
middle.className = "info-middle";  
middle.innerHTML = content;  
info.appendChild(middle);  

// 定義底部內容  
var bottom = document.createElement("div");  
bottom.className = "info-bottom";  
var sharp = document.createElement("img");  
sharp.src = "sharp.png";  
bottom.appendChild(sharp);    
info.appendChild(bottom);  
return info;  
} 
function myWindow(){
infoWindow2.open(mapObj,new AMap.LngLat(116.373881,39.907409));
}

自定義信息窗口，須要CSS樣式支持

/* 定義自定義信息窗體樣式 */
div.info {position: relative;z-index: 100;border: 1px solid #BCBCBC;box-shadow: 0 0 10px;#B7B6B6;border-radius: 8px;background-color: rgba(255,255,255,0.9);transition-duration: 0.25s;}
div.info:hover {box-shadow: 0px 0px 15px #0CF;}
div.info-top {position: relative;background: none repeat scroll 0 0 #F9F9F9;border-bottom: 1px solid #CCC;border-radius:5px 5px 0 0;}
div.info-top div {display: inline-block;color: #333333;font-size:14px;font-weight:bold;    line-height:31px;padding:0 10px;}
div.info-top img {position: absolute;top: 10px;right: 10px;transition-duration: 0.25s;}
div.info-top img:hover{box-shadow: 0px 0px 5px #000;}
div.info-middle {font-size:12px;padding:10px;line-height:21px;}
div.info-bottom {height:0px;width:100%;clear:both;text-align:center;}
div.info-bottom img{position: relative;z-index:104;}

示例demo：http://zhaoziang.com/amap/zero_3_1.html

7、廈門鼓浪嶼地圖

你們可使用圖片覆蓋物，實現各類園區圖，廠區圖，校園圖，手繪風格地圖等。

在網上找好手繪地圖，我找到的是鼓浪嶼手繪地圖。把它扣空，作成png-24的透明圖片。

而後肯定圖片的左下角和右上角。把圖片貼上去。效果不錯。

function xmMap(){
mapObj.setZoom(15);
var bounds = new AMap.Bounds(new AMap.LngLat(118.055005,24.435624), new AMap.LngLat(118.078351,24.454299)),  
groundImageOpts = {  
    opacity: 1,   //圖片透明度  
    clickable: true,//圖片相應鼠標點擊事件，默認：false  
    map: mapObj     //圖片疊加的地圖對象  
}; 
//實例化一個圖片覆蓋物對象  
var groundImage = new AMap.GroundImage('gly.png', bounds, groundImageOpts);      
mapObj.setCenter(new AMap.LngLat(118.067665,24.443946));
}

示例demo：http://zhaoziang.com/amap/zero_3_1.html

8、源代碼與示例

示例demo：http://zhaoziang.com/amap/zero_3_1.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>地圖覆蓋物</title>
<link rel="stylesheet" type="text/css" href="zero.css" />
<script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=23e8cfe2d8f3ce1e4a4197902d28f445"></script>
</head>
<body onLoad="mapInit()">
<div id="iCenter"></div>
<div id="iControlbox">
    <p>座標：<span id="lnglat">&nbsp;</span></p>
    <ul>
        <li><button onclick="javascript:addMarker();">添加marker</button><button onclick="javascript:updateMarker();">修改marker</button><button onclick="javascript:clearMap();">清空地圖</button></li>
        <li><button onclick="javascript:addMarker2();">普通標註</button><button onclick="javascript:marker2Cartoon();">動畫</button><button onclick="javascript:iJuhe();">聚合marker</button><button onclick="javascript:clearMap();">清空地圖</button></li>
        <li><button onclick="javascript:addCloudLayer();">添加雲圖</button><button onclick="javascript:clearMap();">清空地圖</button></li>
        <li><button onclick="javascript:startRun();">軌跡回放</button><button onclick="javascript:endRun();">中止</button><button onclick="javascript:clearMap();">清空地圖</button></li>
        <li><button onclick="javascript:addCircle();">圓形</button><button onclick="javascript:addPolygon();">多邊形</button><button onclick="javascript:clearMap();">清空地圖</button></li>
        <li><button onclick="javascript:openInfo();">默認信息窗口</button><button onclick="javascript:myWindow();">自定義信息窗口</button><button onclick="javascript:clearMap();">清空地圖</button></li>
        <li><button onclick="javascript:xmMap();">鼓浪嶼地圖</button><button onclick="javascript:clearMap();">清空地圖</button></li>
    </ul>
</div>
</body>
<script language="javascript">
var mapObj;
var marker;  
var marker2;  
var marker3;  
var cluster;  
var markers = []; 
var lineArr;
var cloudDataLayer;
//初始化地圖對象，加載地圖  
function mapInit(){  
mapObj = new AMap.Map("iCenter",{  
center:new AMap.LngLat(116.397428,39.90923), //地圖中心點  
level:11  //地圖顯示的比例尺級別  
//zoomEnable:false
}); 
AMap.event.addListener(mapObj,'click',getLnglat); //點擊事件    
}  
//鼠標點擊，獲取經緯度座標  
function getLnglat(e){    
var x = e.lnglat.getLng();
var y = e.lnglat.getLat(); 
document.getElementById("lnglat").innerHTML = x + "," + y;
}
//清空地圖
function clearMap(){    
mapObj.clearMap();
cloudDataLayer.setMap(null);
}
//實例化marker  
function addMarker(){  
mapObj.clearMap();
marker=new AMap.Marker({                    
icon:"zhao.gif",  
position:new AMap.LngLat(116.405467,39.907761)  
});  
marker.setMap(mapObj);  //在地圖上添加點  
}  
//修改marker
function updateMarker()  
{  
//自定義點標記內容     
var markerContent = document.createElement("div");  
markerContent.className = "markerContentStyle";  

//點標記中的圖標  
var markerImg= document.createElement("img");  
 markerImg.className="markerlnglat";  
 markerImg.src="tuo.gif";     
 markerContent.appendChild(markerImg);  

 //點標記中的文本  
 var markerSpan = document.createElement("span");  
 markerSpan.innerHTML = "一秒鐘變拓跋玉兒";  
 markerContent.appendChild(markerSpan);  

 marker.setContent(markerContent);//更新點標記內容  
 marker.setPosition(new AMap.LngLat(116.368732,39.92514)); //更新點標記位置  
} 
function addMarker2(){
mapObj.clearMap();
marker2 = new AMap.Marker({  
    position:(new AMap.LngLat(116.384182,39.916451)),  
    draggable:true,  //點標記可拖拽  
    cursor:'move',  
    raiseOnDrag:true //鼠標拖拽點標記時開啓點標記離開地圖的效果
});  
marker2.setMap(mapObj);  
}
function marker2Cartoon(){
marker2.setAnimation('AMAP_ANIMATION_BOUNCE'); //設置點標記的動畫效果，此處爲彈跳效果
}
function iJuhe(){
mapObj.clearMap();
// 隨機向地圖添加500個標註點  
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);  

for (var i = 0; i < 500; i ++) {  
    var markerPosition = new AMap.LngLat(sw.lng + lngSpan * (Math.random() * 1),ne.lat - latSpan * (Math.random() * 1));  
    var marker = new AMap.Marker({  
        map:mapObj,  
        position:markerPosition, //基點位置  
        icon:"js_marker.png", //marker圖標，直接傳遞地址url  
        offset:{x:-8,y:-34} //相對於基點的位置  
    });  
    markers.push(marker);  
}  
setTimeout(function(){
    addCluster(0); e
},500);     
}
function addCluster(tag)  
{  
if(cluster) {     
    cluster.setMap(null);  
}  
if(tag==1) {  
    var sts=[{url:"js_1.png",size:new AMap.Size(32,32),offset:new AMap.Pixel(-16,-30)},  
               {url:"js_2.png",size:new AMap.Size(32,32),offset:new AMap.Pixel(-16,-30)},  
               {url:"js_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);  
    });  
}  
}
//添加雲圖
function addCloudLayer() {  
//加載雲圖層插件  
mapObj.plugin('AMap.CloudDataLayer', function () {  
    var layerOptions = {   
        query:{keywords: ''},   
        clickable:true  
    };  
    cloudDataLayer = new AMap.CloudDataLayer('533904fbe4b08ebff7d53895', layerOptions); //實例化雲圖層類  
    cloudDataLayer.setMap(mapObj); //疊加雲圖層到地圖  

    AMap.event.addListener(cloudDataLayer, 'click', function (result) {  
        var clouddata = result.data;  
        var infoWindow = new AMap.InfoWindow({  
            content:"<h3><font face=\"微軟雅黑\"color=\"#3366FF\">"+ clouddata._name +"</font></h3><hr />地址："+ clouddata._address + "<br />" + "電話號碼：" + clouddata.phonenumber+ "<br />" + "郵編：" + clouddata.postalcode+"<br /><strong>" + "擅長專科：" +clouddata.medicalspecialists+  "</strong><br />" + "所在省份：" +clouddata.provinces ,  
            size:new AMap.Size(300, 0),  
            autoMove:true,  
            offset:new AMap.Pixel(0,-5)  
        });                
        infoWindow.open(mapObj, clouddata._location);  
    });  
});

}
function removeCloudLayer(){
cloudDataLayer.setMap(null);
}
//地圖圖塊加載完畢後執行函數
function completeEventHandler(){
marker3 = new AMap.Marker({
map:mapObj,
//draggable:true, //是否可拖動
position:new AMap.LngLat(116.273881,39.807409),//基點位置
icon:"http://code.mapabc.com/images/car_03.png", //marker圖標，直接傳遞地址url
offset:new AMap.Pixel(-26,-13), //相對於基點的位置
autoRotation:true
});
var lngX = 116.273881;
var latY = 39.807409;
lineArr = new Array();
lineArr.push(new AMap.LngLat(lngX,latY));
for (var i = 1; i <30; i++){
lngX = lngX+Math.random()0.05;
if(i%2){
latY = latY+Math.random()0.0001;
}else{
latY = latY+Math.random()*0.06;
}
lineArr.push(new AMap.LngLat(lngX,latY));
}
//繪製軌跡
var polyline = new AMap.Polyline({
map:mapObj,
path:lineArr,
strokeColor:"#00A",//線顏色
strokeOpacity:1,//線透明度
strokeWeight:3,//線寬
strokeStyle:"solid",//線樣式
});
}
function startRun(){ //開始播放動畫
completeEventHandler();
marker3.moveAlong(lineArr,80); //開始軌跡回放
}
function endRun(){ //結束動畫播放
marker3.stopMove(); //暫停軌跡回放
}
//添加圓覆蓋物
function addCircle() {
circle = new AMap.Circle({
center:new AMap.LngLat("116.403322","39.920255"),// 圓心位置
radius:10000, //半徑
strokeColor: "#F33", //線顏色
strokeOpacity: 1, //線透明度
strokeWeight: 3, //線粗細度
fillColor: "#ee2200", //填充顏色
fillOpacity: 0.35//填充透明度
});
circle.setMap(mapObj);
}
//添加多邊形覆蓋物
function addPolygon(){
var polygonArr=new Array();//多邊形覆蓋物節點座標數組
polygonArr.push(new AMap.LngLat("116.319809","39.956596"));
polygonArr.push(new AMap.LngLat("116.556702","39.983434"));
polygonArr.push(new AMap.LngLat("116.483917","39.845449"));
polygonArr.push(new AMap.LngLat("116.244278","39.848612"));
polygon=new AMap.Polygon({
path:polygonArr,//設置多邊形邊界路徑
strokeColor:"#0000ff", //線顏色
strokeOpacity:0.2, //線透明度
strokeWeight:3, //線寬
fillColor: "#f5deb3", //填充色
fillOpacity: 0.35//填充透明度
});
polygon.setMap(mapObj);
}

//在指定位置打開默認信息窗體
function openInfo(){
//構建信息窗體中顯示的內容
var info = [];
info.push("

");
info.push("
高德軟件");
info.push("電話 : 010-84107000 郵編 : 100102");
info.push("地址 : 北京市望京阜通東大街方恆國際中心A座16層
");
inforWindow = new AMap.InfoWindow({
content:info.join("
") //使用默認信息窗體框樣式，顯示信息內容
});
inforWindow.open(mapObj,new AMap.LngLat(116.373881,39.907409));
}

//實例化信息窗體
var infoWindow2 = new AMap.InfoWindow({
isCustom:true, //使用自定義窗體
content:createInfoWindow('方恆假日酒店  價格:318',"地址：北京市朝陽區阜通東大街6號院3號樓 東北 8.3 千米
電話：010 64733333
詳細信息"),
size:new AMap.Size(300, 0),
offset:new AMap.Pixel(0, -50)//-113, -140
});

//關閉信息窗體
function closeInfoWindow(){
mapObj.clearInfoWindow();
}
//構建自定義信息窗體
function createInfoWindow(title,content){
var info = document.createElement("div");
info.className = "info";
// 定義頂部標題
var top = document.createElement("div");
top.className = "info-top";
var titleD = document.createElement("div");
titleD.innerHTML = title;
var closeX = document.createElement("img");
closeX.src = "close2.gif";
closeX.onclick = closeInfoWindow;

top.appendChild(titleD);  
top.appendChild(closeX);  
info.appendChild(top);  
// 定義中部內容  
var middle = document.createElement("div");  
middle.className = "info-middle";  
middle.innerHTML = content;  
info.appendChild(middle);  

// 定義底部內容  
var bottom = document.createElement("div");  
bottom.className = "info-bottom";  
var sharp = document.createElement("img");  
sharp.src = "sharp.png";  
bottom.appendChild(sharp);    
info.appendChild(bottom);  
return info;

}
function myWindow(){
infoWindow2.open(mapObj,new AMap.LngLat(116.373881,39.907409));
}
function xmMap(){
mapObj.setZoom(15);
var bounds = new AMap.Bounds(new AMap.LngLat(118.055005,24.435624), new AMap.LngLat(118.078351,24.454299)),
groundImageOpts = {
opacity: 1, //圖片透明度
clickable: true,//圖片相應鼠標點擊事件，默認：false
map: mapObj //圖片疊加的地圖對象
};
//實例化一個圖片覆蓋物對象
var groundImage = new AMap.GroundImage('gly.png', bounds, groundImageOpts);
setTimeout(function(){
mapObj.setCenter(new AMap.LngLat(118.067665,24.443946));
},500);
//mapObj.setCenter(new AMap.LngLat(118.067665,24.443946));
}
</script>
</html>
複製代碼

原文地址：http://www.cnblogs.com/milkmap/p/3727842.html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程