隨著時代的發展,互聯網技術日新月異。在網站建設過程中,越來越多的應用應用到
網站開發中。有第三方的百度分享、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,//地圖層級
ang:en//地圖語言});
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、最后我們也可以通過下面地址快速生面地圖