国产精品一区二区三区……-大杳蕉伊人欧美一本遒在饯-日本不卡一区免费在线观看-国产亚洲欧美中文字幕

400-800-9385
網(wǎng)站建設(shè)資訊詳細(xì)

網(wǎng)站建設(shè)之高德地圖開發(fā)經(jīng)驗(yàn)簡解

發(fā)表日期:2019-07-12 09:08:48   作者來源:方維網(wǎng)絡(luò)   瀏覽:4169   標(biāo)簽:地圖接口開發(fā)    
隨著時(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
相關(guān)網(wǎng)站設(shè)計(jì)案例
枞阳县| 江津市| 涿州市| 广丰县| 曲阜市| 扎赉特旗| 乾安县| 靖州| 宿州市| 弋阳县| 广宁县| 彝良县| 玛沁县| 花莲县| 留坝县| 拉孜县| 南岸区| 揭阳市| 安义县| 定襄县| 中西区| 称多县| 郁南县| 绥滨县| 贵德县| 泽普县| 海丰县| 冀州市| 达州市| 怀安县| 彭州市| 吴忠市| 泰来县| 京山县| 新龙县| 大名县| 荆门市| 驻马店市| 巴彦淖尔市| 来宾市| 福贡县|