隨著時(shí)代的發(fā)展,互聯(lián)網(wǎng)技術(shù)日新月異。在網(wǎng)站建設(shè)過程中,越來越多的應(yīng)用應(yīng)用到
網(wǎng)站開發(fā)中。有第三方的百度分享、share分享,可以幫助我們分享我們的網(wǎng)站到各個(gè)平臺從而實(shí)現(xiàn)推廣網(wǎng)站的作用。也有QQ互聯(lián)、百度商橋來幫助我們來實(shí)現(xiàn)在線客服的功能,也有百度統(tǒng)計(jì)來幫助我們統(tǒng)計(jì)網(wǎng)站流量,讓我們知道網(wǎng)站情況,最后,我們
也可以通過引用百度地圖、高德地圖來幫助客戶更好的找到我們。
1、首先,我們要應(yīng)用高德地圖的Js文件
<script type="text/javascript" src="地圖接口地址?v=1.4.14&key=您申請的key值"></script>
2.然后我們要實(shí)例化網(wǎng)站地圖
var map = new AMap.Map("container", {
resizeEnable: true,
center: [113.925996,22.51593], //地圖中心點(diǎn)
zoom: 18, //地圖層級
lang: "en" //地圖語言
});
3.上面兩步,只能呈現(xiàn)一個(gè)光禿禿的地圖,不能讓他人一眼
看到我們公司的位置,為了讓他人更好發(fā)現(xiàn)我們公司的位置,
我們可以標(biāo)注中心點(diǎn)、信息窗體。如下:
//中心點(diǎn)
function addMarker() {
map.clearMap();
var marker = new AMap.Marker({
map: map,
position: [113.925996,22.51593]
});
//鼠標(biāo)點(diǎn)擊marker彈出自定義的信息窗體
AMap.event.addListener(marker, 'click', function () {
infoWindow.open(map, marker.getPosition());
});
}
addMarker();
//信息窗體
function createInfoWindow(title, content) {
var info = document.createElement("div");
info.className = "custom-info input-card content-window-card";
//可以通過下面的方式修改自定義窗體的寬高
//info.style.width = "400px";
// 定義頂部標(biāo)題
var top = document.createElement("div");
var titleD = document.createElement("div");
var closeX = document.createElement("img");
top.className = "info-top";
titleD.innerHTML = title;
closeX.src = "https://webapi.amap.com/images/close2.gif";
closeX.onclick = closeInfoWindow;
top.appendChild(titleD);
top.appendChild(closeX);
info.appendChild(top);
// 定義中部內(nèi)容
var middle = document.createElement("div");
middle.className = "info-middle";
middle.style.backgroundColor = 'white';
middle.innerHTML = content;
info.appendChild(middle);
// 定義底部內(nèi)容
var bottom = document.createElement("div");
bottom.className = "info-bottom";
bottom.style.position = 'relative';
bottom.style.top = '0px';
bottom.style.margin = '0 auto';
var sharp = document.createElement("img");
sharp.src = "https://webapi.amap.com/images/sharp.png";
bottom.appendChild(sharp);
info.appendChild(bottom);
return info;
}
var title = '{$config.site_company}',
content = [];
content.push("{$config.site_address}");
var infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定義窗體
content: createInfoWindow(title, content.join("<br/>")),
offset: new AMap.Pixel(16, -45)
}); //實(shí)例化窗體
infoWindow.open(map,[113.925996,22.51593]) // 直接打開信息窗體
4、最后我們也可以通過下面地址快速生面地圖
如沒特殊注明,文章均為方維網(wǎng)絡(luò)原創(chuàng),轉(zhuǎn)載請注明來自http://pdcharm.com/news/5145.html