【百度地圖API】創建全國銀行位置查詢系統（五）——如何更改百度地圖的信息窗口內容？

時間 2019-11-22

標籤百度地圖API 創建全國位置查詢系統如何更改百度地圖信息窗口內容简体版

原文原文鏈接

原文: 【百度地圖API】創建全國銀行位置查詢系統（五）——如何更改百度地圖的信息窗口內容？

摘要：javascript

酷訊、搜房、去哪兒網等大型房產、旅遊酒店網站，用的是百度的數據庫，卻顯示了自定義的信息窗口內容，這是如何實現的呢？php

------------------------------------------------------------------------------------------------------------------html

零、先來看看百度地圖上的信息窗口長個什麼樣子java

在來看看房產網站的信息窗口是什麼樣子的數據庫

怎麼樣，信息窗口的內容不同吧。api

可是它們都是用的百度地圖的數據庫哦~~~函數

怎麼更改百度地圖默認的信息窗口呢？快來學習吧~~post

1、百度地圖的數據覆蓋率學習

據瞭解，截止到2011年6月底，百度地圖的數據覆蓋率爲80.73%，達到國內第一的水平。網站

因此，使用百度強大的數據庫，對與開發者來講，收益匪淺。

但如何利用百度的數據庫，展示本身的信息窗口內容呢?

2、如何自定義信息窗口內容？

咱們先來看一個簡單的例子：

var infoWindow = new BMap.InfoWindow("World", opts);  // 建立信息窗口對象

例子中，「world」是信息窗口的內容，opts是信息窗口的設置選項。

「」引號中，能夠書寫任意的htm，已達到自定義信息窗口的目的。

opts的屬性見官網的類參考，有以下設置。注意，設置是可選項，能夠不寫。

3、如何將自定義信息窗口與百度的數據庫相聯繫

首先，咱們須要獲取到百度數據庫裏的內容。可使用localsearch來搜索出數據。例如，我建立了一個搜索對象，搜索「招商銀行」。

var local = new BMap.LocalSearch(map,{onSearchComplete: searchComplete});   //構造一個查詢
local.search('招商銀行');

看了我上一篇文章的朋友們，應該都知道，如何把那些小紅點變成招商銀行的圖標了吧？

對啦，沒錯，就是修改marker的一個icon屬性，更改圖標便可。

    // 建立招商銀行的標註圖標
    var zsIcon = new BMap.Icon("http://ui-love.com/baidumap/bank/marker.gif",   //圖片地址
                 new BMap.Size(40, 64),                // 標註顯示大小
                {
                    offset: new BMap.Size(20, 64),     // 標註底部小尖尖的偏移量
                    imageOffset: new BMap.Size(0, 0)   // 這裏至關於CSS sprites
                });

這時，標註們就是招商銀行（左圖）了，而不是小紅點（右圖）。

對於搜索出來的數據，咱們能夠找到結果（result）的各類屬性，見類參考，選擇一些填入信息窗口，而且，能夠本身修改內容：

好比，我選擇了名稱、地址和電話3個屬性，而後本身寫了幾顆星，以及詳情連接，代碼以下：

var infoWindow = new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>名稱:</b>"+point.title+"</br><b>地址:</b>"+point.address+"</br><b>電話:</b>"+point.phoneNumber+"</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' target='_blank' href='http://www.ui-love.com'>詳情>></a></div>");  // 建立信息窗口對象

4、效果圖和源代碼

看見了麼？數據是真實可靠的，而且我加上了本身的內容在裏面。能夠作評價、詳情連接，甚至價格、圖片等等。

源代碼裏，我加入了其餘兩家銀行，讓你們作個對比。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>三家銀行搜索</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2">
</script>
</head>
<body>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
<input type="button" onclick="milk_zs();" value="招商銀行" />
<input type="button" onclick="milk_zg();" value="中國銀行" />
<input type="button" onclick="milk_js();" value="建設銀行" />

<div style="position:absolute;right:100px;top:10px;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-5845154460812025";
/* 180&#42;150 */
google_ad_slot = "5267666065";
google_ad_width = 180;
google_ad_height = 150;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</body>
</html>
<script type="text/javascript">
//查詢完畢添加自定義標註
function addMarker(results,point, index){
    // 建立招商銀行的標註圖標
    var zsIcon = new BMap.Icon("http://ui-love.com/baidumap/bank/marker.gif",   //圖片地址
                 new BMap.Size(40, 64),                // 標註顯示大小
                {
                    offset: new BMap.Size(20, 64),     // 標註底部小尖尖的偏移量
                    imageOffset: new BMap.Size(0, 0)   // 這裏至關於CSS sprites
                });
    // 建立中國銀行的標註圖標
    var zgIcon = new BMap.Icon("http://ui-love.com/baidumap/bank/marker.gif",   //圖片地址
                 new BMap.Size(40, 64),                // 標註顯示大小
                {
                    offset: new BMap.Size(20, 64),     // 標註底部小尖尖的偏移量
                    imageOffset: new BMap.Size(0, -64)   // 這裏至關於CSS sprites
                });
    // 建立建設銀行的標註圖標
    var jsIcon = new BMap.Icon("http://ui-love.com/baidumap/bank/marker.gif",   //圖片地址
                 new BMap.Size(40, 64),                // 標註顯示大小
                {
                    offset: new BMap.Size(20, 64),     // 標註底部小尖尖的偏移量
                    imageOffset: new BMap.Size(0, -128)   // 這裏至關於CSS sprites
                });
    var myIcon = "";
    if(results.keyword == "招商銀行"){
        myIcon = zsIcon;
    }else if(results.keyword == "中國銀行"){
        myIcon = zgIcon;
    }else if(results.keyword == "建設銀行"){
        myIcon = jsIcon;
    }else{
        myIcon = zsIcon;
    }
    var marker = new BMap.Marker(point.point, {icon: myIcon});

    var infoWindow = new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>名稱:</b>"+point.title+"</br><b>地址:</b>"+point.address+"</br><b>電話:</b>"+point.phoneNumber+"</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' target='_blank' href='http://www.ui-love.com'>詳情>></a></div>");  // 建立信息窗口對象
    marker.addEventListener("click",
        function(){
            marker.openInfoWindow(infoWindow);
        }
    );
    map.addOverlay(marker);
}

//查詢完畢的回調函數
var searchComplete = function (results){   
    if (local.getStatus() != BMAP_STATUS_SUCCESS){
        return ;
    }
    for(var cnt = 0; cnt < results.getCurrentNumPois(); cnt++){
        var point = results.getPoi(cnt);
        addMarker(results,point, cnt);
    }
}

var map = new BMap.Map("container");    //建立地圖容器
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); //初始化地圖
var local = new BMap.LocalSearch(map,{onSearchComplete: searchComplete});   //構造一個查詢

//定義三個不一樣的查詢
function milk_zs(){
    map.clearOverlays();
    local.search('招商銀行');
}
function milk_zg(){
    map.clearOverlays();
    local.search('中國銀行');
}
function milk_js(){
    map.clearOverlays();
    local.search('建設銀行');
}
</script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。