隨著時代的發(fā)展,互聯(lián)網(wǎng)技術(shù)日新月異。在網(wǎng)站建設(shè)過程中,越來越多的應(yīng)用應(yīng)用到
網(wǎng)站開發(fā)中。有第三方的百度分享、share分享,可以幫助我們分享我們的網(wǎng)站到各個平臺從而實現(xiàn)推廣網(wǎng)站的作用。也有QQ互聯(lián)、百度商橋來幫助我們來實現(xiàn)在線客服的功能,也有百度統(tǒng)計來幫助我們統(tǒng)計網(wǎng)站流量,讓我們知道網(wǎng)站情況,最后,我們
也可以通過引用百度地圖、高德地圖來幫助客戶更好的找到我們。
1、首先,我們要應(yīng)用高德地圖的Js文件
scripttype=text/javascriptsrc=地圖接口地址?v=
1.
4.14key=您申請的key值/script
2.然后我們要實例化網(wǎng)站地圖
varmap=newAMap.Map(container,{
resizeEnable:true,
center:[11
3.925996,2
2.51593],//地圖中心點
zoom:18,//地圖層級
ang:en//地圖語言});
3.上面兩步,只能呈現(xiàn)一個光禿禿的地圖,不能讓他人一眼
看到我們公司的位置,為了讓他人更好發(fā)現(xiàn)我們公司的位置,
我們可以標(biāo)注中心點、信息窗體。如下:
//中心點
functionaddMarker(){
map.clearMap();
varmarker=newAMap.Marker({
map:map,
position:[11
3.925996,2
2.51593]
});
//鼠標(biāo)點擊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;
//定義頂部標(biāo)題
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);
//定義中部內(nèi)容
varmiddle=document.createElement(p);
middle.className=info-middle;
middle.style.backgroundColor='white';
middle.innerHTML=content;
info.appendChild(middle);
//定義底部內(nèi)容
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、最后我們也可以通過下面地址快速生面地圖