網站建設之高德地圖開發經驗簡解

　　隨著時代的發展，互聯網技術日新月異。在網站建設過程中，越來越多的應用應用到

　　網站開發中。有第三方的百度分享、share分享，可以幫助我們分享我們的網站到各個平臺從而實現推廣網站的作用。也有QQ互聯、百度商橋來幫助我們來實現在線客服的功能，也有百度統計來幫助我們統計網站流量，讓我們知道網站情況，最后，我們

　　也可以通過引用百度地圖、高德地圖來幫助客戶更好的找到我們。

　　1、首先，我們要應用高德地圖的Js文件

　　scripttype=text/javascriptsrc=地圖接口地址？v=

　　1.

　　4.14key=您申請的key值/script

　　2.然后我們要實例化網站地圖

　　varmap=newAMap.Map(container，{

　　resizeEnable：true，

　　center：[11

　　3.925996，2

　　2.51593]，//地圖中心點

　　zoom：18，//地圖層級

　　});

　　3.上面兩步，只能呈現一個光禿禿的地圖，不能讓他人一眼

　　看到我們公司的位置，為了讓他人更好發現我們公司的位置，

　　我們可以標注中心點、信息窗體。如下：

　　//中心點

　　functionaddMarker(){

　　map.clearMap();

　　varmarker=newAMap.Marker({

　　map：map，

　　position：[11

　　3.925996，2

　　2.51593]

　　});

　　//鼠標點擊marker彈出自定義的信息窗體

　　AMap.event.addListener(marker，'click'，function(){

　　infoWindow.open(map，marker.getPosition());

　　});

　　}

　　addMarker();

　　//信息窗體

　　functioncreateInfoWindow(title，content){

　　varinfo=document.createElement(p);

　　info.className=custom-infoinput-cardcontent-window-card;

　　//可以通過下面的方式修改自定義窗體的寬高

　　//info.style.width=400px;

　　//定義頂部標題

　　vartop=document.createElement(p);

　　vartitleD=document.createElement(p);

　　varcloseX=document.createElement(img);

　　top.className=info-top;

　　titleD.innerHTML=title;

　　closeX.src=https：//webapi.amap.com/images/close

　　2.gif;

　　closeX.onclick=closeInfoWindow;

　　top.appendChild(titleD);

　　top.appendChild(closeX);

　　info.appendChild(top);

　　//定義中部內容

　　varmiddle=document.createElement(p);

　　middle.className=info-middle;

　　middle.style.backgroundColor='white';

　　middle.innerHTML=content;

　　info.appendChild(middle);

　　//定義底部內容

　　varbottom=document.createElement(p);

　　bottom.className=info-bottom;

　　bottom.style.position='relative';

　　bottom.style.top='0px';

　　bottom.style.margin='0auto';

　　varsharp=document.createElement(img);

　　sharp.src=https：//webapi.amap.com/images/sharp.png;

　　bottom.appendChild(sharp);

　　info.appendChild(bottom);

　　returninfo;

　　}

　　vartitle='{$config.site_company}'，

　　content=[];

　　content.push({$config.site_address});

　　varinfoWindow=newAMap.InfoWindow({

　　isCustom：true，//使用自定義窗體

　　content：createInfoWindow(title，content.join(br/))，

　　offset：newAMap.Pixel(16，-45)

　　});//實例化窗體

　　infoWindow.open(map，[11

　　3.925996，2

　　2.51593])//直接打開信息窗體

　　4、最后我們也可以通過下面地址快速生面地圖