高德地圖 氣泡 點(diǎn) 和信息窗

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <title>編輯折線谒获、多邊形圆裕、圓</title>
  <link rel="stylesheet" />
  <script id="mapscript" src="http://webapi.amap.com/maps?v=1.4.4&key=your key&plugin=AMap.PolyEditor,AMap.CircleEditor,AMap.MouseTool,AMap.Autocomplete,AMap.PlaceSearch"></script>
  <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
  <style>

    #main,.tab-content,#content,.row,.col-xs-12{
        width:100%!important;
        height:100%!important;
    }
    .button-group {
        position: absolute;
        top: 0px;
        left: 87px;
        right:auto!important;
        bottom:auto!important;
        font-size: 12px;
        padding: 10px;
    }
    .custom{
        position: relative;

    }
    .custom-content{
        width:300px;
        height:50px;
        padding: 10px;
        width:100%;
        background: #fff;
        border-radius: 10px;
        z-index: 99999;
        position: relative;
    }
    .custom-img{
        width: 30px;
        position: absolute;
        bottom: 0px;
        left: 50%;
        z-index: 99999999;
    }
    .close-btn{
        position: absolute;
        top: 4px;
        right: 8px;
    }
    #myPageTop {
    right:auto;
    left:100px;
    }
  </style>
</head>
<body>

<div id="container"></div>
<!-- 地址搜索 開始 -->
<div id="myPageTop">
<table>
    <tr>
        <td>
            <label>請輸入關(guān)鍵字：</label>
        </td>
    </tr>
    <tr>
        <td>
            <input id="tipinput" placeholder="請輸入關(guān)鍵字" style="width:240px;"/>
        </td>
    </tr>
</table>
</div>
<!-- 地址搜索 結(jié)束 -->
<input type="hidden" value='' />
<script>
    var map = new AMap.Map("container",{
        resizeEnable: true,
        center:[111.666261,40.831684],
        zoom: 14 //地圖顯示的縮放級別
    });

    //輸入提示
    var autoOptions = {
        input: "tipinput"
    };
    var auto = new AMap.Autocomplete(autoOptions);

    //構(gòu)造地點(diǎn)查詢類
    var placeSearch = new AMap.PlaceSearch({
        map: map
    }); 

//注冊監(jiān)聽，當(dāng)選中某條記錄時(shí)會觸發(fā)
    AMap.event.addListener(auto, "select", select);

    var show=false;
    function select(e) {
    /* 通過 搜索的經(jīng)緯度  查詢 是否在電子圍欄中  */
    $.ajax({
        url:'/index.php/admin/findweilan/zuobiaos',
        type:'POST',
        data:{
            lng:e.poi.location.lng,
            lat:e.poi.location.lat
        },
        dataType:'json',
        success:function(res){
            if(res.code==0){
                var points=res.points;
                var arr=[];
                for(var i=0;i<points.length;i++){
                    var arr1=points[i].split(",");
                    arr.push([Number(arr1[0]),Number(arr1[1])])
                }
                /*  繪制電子圍欄  以及 氣泡 */
                var obj={
                    name:res.shuizhan.name,
                    address:res.shuizhan.address,
                    mobile:res.shuizhan.mobile,
                    position:[Number(res.shuizhan.lat), Number(res.shuizhan.lng)]
                }
                huizhidianzhi(arr,obj);
                
            }else{
                alert(res.msg);
            }
          }
      });
    }

/*  繪制電子圍欄  */
function huizhidianzhi (arr,lnglats){
    var map = new AMap.Map("container",{
        resizeEnable: true,
        center:lnglats.position,
        zoom: 14 //地圖顯示的縮放級別
    });
    
    var polygon = new AMap.Polygon({
        path: arr,
        strokeColor: "#FF33FF", 
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillOpacity: 0.4,
        fillColor: '#1791fc',
        zIndex: 50,
     });
    map.add(polygon);
    /* 信息 窗 */
    var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
    var marker = new AMap.Marker({
        position: lnglats.position,
        map: map
    });
     marker.content = '***：'+lnglats.name+'</br> ****：'+lnglats.address+'</br>****：'+lnglats.mobile;
     marker.on('click', markerClick);
     marker.emit('click', {target: marker});
     function markerClick(e) {
         infoWindow.setContent(e.target.content);
         infoWindow.open(map, e.target.getPosition());
     }
     map.setFitView(marker);
}

  </script>
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子牵祟，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
    沈念sama閱讀 219,490評論 6贊 508
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件画株，死亡現(xiàn)場離奇詭異，居然都是意外死亡啦辐，警方通過查閱死者的電腦和手機(jī)谓传，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,581評論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來芹关，“玉大人续挟，你說我怎么就攤上這事〗某模” “怎么了诗祸？”我有些...
    開封第一講書人閱讀 165,830評論 0贊 356
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵跑芳，是天一觀的道長。 經(jīng)常有香客問我直颅，道長博个，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 58,957評論 1贊 295
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任功偿，我火速辦了婚禮盆佣，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘械荷。我一直安慰自己罪塔，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,974評論 6贊 393
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布养葵。 她就那樣靜靜地躺著征堪，像睡著了一般。 火紅的嫁衣襯著肌膚如雪关拒。 梳的紋絲不亂的頭發(fā)上佃蚜，一...
    開封第一講書人閱讀 51,754評論 1贊 307
  • 城市分裂傳說
    那天另假，我揣著相機(jī)與錄音妒貌，去河邊找鬼。 笑死弊仪，一個(gè)胖子當(dāng)著我的面吹牛归露，可吹牛的內(nèi)容都是我干的洲脂。 我是一名探鬼主播，決...
    沈念sama閱讀 40,464評論 3贊 420
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼剧包，長吁一口氣：“原來是場噩夢啊……” “哼恐锦！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起疆液，我...
    開封第一講書人閱讀 39,357評論 0贊 276
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤一铅，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后堕油，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體潘飘，經(jīng)...
    沈念sama閱讀 45,847評論 1贊 317
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,995評論 3贊 338
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年掉缺，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了卜录。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,137評論 1贊 351
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡眶明，死狀恐怖艰毒，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情赘来，我是刑警寧澤现喳，帶...
    沈念sama閱讀 35,819評論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布凯傲，位于F島的核電站，受9級特大地震影響嗦篱，放射性物質(zhì)發(fā)生泄漏冰单。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,482評論 3贊 331
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一灸促、第九天 我趴在偏房一處隱蔽的房頂上張望诫欠。 院中可真熱鬧，春花似錦浴栽、人聲如沸荒叼。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,023評論 0贊 22
  • 一樁弒父案典鸡，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽被廓。三九已至，卻和暖如春萝玷，著一層夾襖步出監(jiān)牢的瞬間嫁乘，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,149評論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來泰國打工球碉， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留蜓斧，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,409評論 3贊 373
  • 代替公主和親
    正文 我出身青樓睁冬，卻偏偏與公主長得像挎春，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子豆拨，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,086評論 2贊 355

推薦閱讀更多精彩內(nèi)容