網(wǎng)站建設(shè)之網(wǎng)站地圖的引入

2023-02-20    分類(lèi): 網(wǎng)站建設(shè)

網(wǎng)站建設(shè)的過(guò)程中,隨著時(shí)間的積累,我們可能會(huì)碰到各種各樣的功能開(kāi)發(fā),畢竟客戶(hù)的需求是無(wú)窮的。說(shuō)到這,我們就想,為什么我們要做網(wǎng)站。在現(xiàn)在網(wǎng)絡(luò)這么發(fā)達(dá)的背景下,為了更好的宣傳自己的企業(yè),一個(gè)漂亮、美觀的網(wǎng)站是必不可少的。既然網(wǎng)站是為了更好的宣傳自己的公司,那么,引入地圖,讓他人更好找到我們公司就顯得至關(guān)重要。廢話(huà)不多說(shuō),現(xiàn)在我就分別介紹一下百度地圖和谷歌地圖的引入方法。具體操作如下:
首先我們講一講百度地圖。
百度地圖還是挺方便的,直接可以在百度生成,生成地址如下:
http://api.map.baidu.com/lbsapi/creatmap/index.html
獲取代碼后,直接把代碼復(fù)制到相關(guān)頁(yè)面就可以了。需要注意的點(diǎn)是:網(wǎng)頁(yè)插入地圖部分代碼:

地圖設(shè)置

中的id屬性要和百度生成的js代碼中的var map = new BMap.Map("gooleMap");一致,這是一種綁定關(guān)系。這里為了以后大家更好的使用,我們封裝一下,所謂的封裝也就是把生成的js代碼放到一個(gè)專(zhuān)門(mén)的js文件里。然后再地圖顯示頁(yè)面直接引入就可以了。具體如下:

這里我們不難發(fā)現(xiàn),我們這里只需要獲得公司地址的經(jīng)緯度就可以生成地圖。方便以后更好的引用。最后網(wǎng)頁(yè)實(shí)現(xiàn)的效果如下:
接著我們來(lái)說(shuō)一說(shuō)谷歌地圖:首先跟百度地圖一樣我們也可以去直接去谷歌地圖生成,地址如下:谷歌官網(wǎng)/maps/;
我們可以獲取如下代碼:,直接插入就行了。
同樣我們也可以封裝成js文件,方便以后引用,如下:我們先要通過(guò)如下地址獲取谷歌地圖的key值:
這個(gè)獲取到以后,然后我們封裝一下方法:
function googleMap(lat,lon){
var myCenter=new google.maps.LatLng(lat,lon);
function initialize()
{
var mapProp = {
center:myCenter,
zoom:18,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker=new google.maps.Marker({
position:myCenter,
icon:Img
});
marker.setMap(map);
}
initialize();
}

網(wǎng)站欄目:網(wǎng)站建設(shè)之網(wǎng)站地圖的引入
分享路徑:http://www.bm7419.com/news/238288.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專(zhuān)注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司;服務(wù)項(xiàng)目有網(wǎng)站建設(shè)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

營(yíng)銷(xiāo)型網(wǎng)站建設(shè)