【雲圖】如何製做全國×××查詢系統？

時間  2020-11-01
標籤 javascript php css html java web 數據庫 api 微信 微信開發 欄目 JavaScript 简体版
原文   原文鏈接

摘要：本文以【唱吧】531麥霸音樂節爲案例，詳細解讀了如何導入自有數據到高德雲圖，並進行檢索和展現。最後，調起高德mobile地圖來進行路線規劃和周邊查詢。javascript

本案例能夠應用在微信開發平臺，支付寶公衆服務上，適合餐飲商家，汽車4S店，銀行，停車場等業務。php

因爲使用高德雲圖+URI API的方式實現，開發者無需進行繁瑣的數據庫操做，便可實現自有數據的存儲與檢索。css

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

 

1、數據準備java

從唱吧531麥霸節官網得到數據：http://changba.com/yunying/ktvStaticList.phpweb

拷貝到excel，另存爲CSV格式，並改爲UTF-8或者GBK編碼。數據庫

 

 

2、導入數據api

登陸雲圖：http://yuntu.amap.com/datamanager/index.html微信

點擊新建地圖：微信開發

 

導入剛纔的數據：

 

點擊預覽：

 

出現全國×××分佈圖：

 

3、UE設計圖

一、對於×××的展現，有列表模式和地圖模式2種。

二、按照城市檢索並展現×××數據。

三、點擊某個×××，跳轉到高德mobile地圖，進行路線規劃。

 

4、雲圖展現全國×××

 採用雲圖層的方法，將麻點圖展現出來。

複製代碼

//地圖-雲圖層
    mapObj.plugin('AMap.CloudDataLayer', function () {        var layerOptions = {
            query:{keywords: ''},
            clickable:true
        };
        cloudDataLayer = new AMap.CloudDataLayer('538d71fee4b04192f1f4de77', layerOptions); //實例化雲圖層類
        cloudDataLayer.setMap(mapObj); //疊加雲圖層到地圖    
    });

複製代碼

 

示例圖：

 

5、列表展現北京市×××

用雲檢索，檢索出北京市的×××。

複製代碼

    //列表                 
    mapObj.plugin(["AMap.CloudDataSearch"], function() {       var searchOptions = {  
            keywords:'',  
            orderBy:'_id:ASC'  
        };     
        cloudSearch = new AMap.CloudDataSearch('538d71fee4b04192f1f4de77', searchOptions); //構造雲數據檢索類  
        AMap.event.addListener(cloudSearch, "complete", cloudSearch_CallBack); //查詢成功時的回調函數  
        AMap.event.addListener(cloudSearch, "error", errorInfo); //查詢失敗時的回調函數
        cloudSearch.searchNearBy(iPoint, 30000); //周邊檢索
    });

複製代碼

 

示例圖：

 

6、採用URI API連接到高德mobile地圖

在點擊列表，和點擊麻點圖的時候，採起URI API的方式調取地圖。

這樣咱們只須要知道一個經緯度，就能夠調取地圖。

示例：

http://mo.amap.com/?q=31.234527,121.287689&name=名字

 

列表調取mo的代碼：

複製代碼

//回調函數-成功function cloudSearch_CallBack(data) {   
    var resultStr="";  
    var resultArr = data.datas;  
    var resultNum = resultArr.length;  
    for (var i = 0; i < resultNum; i++) {    
        resultStr += "<div class=\"item\">";
        resultStr += "<a href='http://mo.amap.com/?q=" + resultArr[i]._location.getLat() + "," + resultArr[i]._location.getLng() + "&name=" + resultArr[i]._name + "'><h3>" + (i+1) + "、" + resultArr[i]._name + "</h3></a>";        
        resultStr += "<p>地址：" + resultArr[i]._address + "</p>";        
        resultStr += "<p>電話：" + resultArr[i].tel + "</p>";        
        resultStr += "</div>";        
    }  
    document.getElementById("list").innerHTML = resultStr;  
}

複製代碼

 

點擊麻點圖，出現信息窗口，調取高德mo：

複製代碼

AMap.event.addListener(cloudDataLayer, 'click', function (result) {            var clouddata = result.data;            
            //雲圖麻點
            var infoWindow = new AMap.InfoWindow({
                content: "<a href='http://mo.amap.com/?q=" + clouddata._location.getLat() + "," + clouddata._location.getLng() + "&name=" + clouddata._name + "'><h3>" + clouddata._name + "</h3></a>" + "<p>地址：" + clouddata._address + "</p>" + "<p>電話：" + clouddata.tel + "</p>",
                size:new AMap.Size(300, 0),
                autoMove:true,
                offset:new AMap.Pixel(0,-5)
            });
            infoWindow.open(mapObj, clouddata._location);            
        });

複製代碼

 

高德mo示意圖：

 

7、城市切換

城市切換的時候，雲圖層展現，和雲檢索list要分開寫。

複製代碼

//索引雲圖function getType(iPrivance){    if(iPrivance=="全國"){
        mapObj.setZoomAndCenter(4,new AMap.LngLat(114.433594,33.651208));
        myCloudList('');        var op={
            query:{keywords:""}
        };
        cloudDataLayer.setOptions(op);
    }else{
        myCloudList(iPrivance);        var op={
            query:{keywords:iPrivance}
        };
        cloudDataLayer.setOptions(op);
        placeSearch(iPrivance);
    }
}

複製代碼

 

地圖展現完畢以後，須要從新設置中心點。

複製代碼

//城市查詢function placeSearch(id) {  
    var MSearch;  
    mapObj.plugin(["AMap.PlaceSearch"], function() {          
        MSearch = new AMap.PlaceSearch({ //構造地點查詢類  
            pageSize:1,  
            pageIndex:1,  
            city:"" //城市          });   
        AMap.event.addListener(MSearch, "complete", keywordSearch_CallBack);//返回地點查詢結果  
        MSearch.search(id); //關鍵字查詢      });  
}  
//城市查詢後定位  function keywordSearch_CallBack(data) {  
    var iPoint = data.poiList.pois[0].location;
    mapObj.setZoomAndCenter(10,iPoint);
}

複製代碼

 

8、所有源代碼

複製代碼

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>雲圖+mo</title><link rel="stylesheet" type="text/css" href="yuntumo.css" /><script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=【您的key】"></script></head><body onLoad="mapInit()">
    <div id="lnglats">&nbsp;</div>
    <div class="header clearfix">
        <select onchange="getType(this.options[this.selectedIndex].text)" >            
            <option>北京</option>
            <option>天津市</option>
            <option>上海市</option>
            <option>重慶市</option>
            <option>安徽省</option>
            <option>福建省</option>
            <option>廣東省</option>
            <option>浙江省</option>
            <option>黑龍江省</option>
            <option>遼寧省</option>
            <option>吉林省</option>
            <option>河北省</option>
            <option>河南省</option>
            <option>山西省</option>
            <option>陝西省</option>
            <option>湖北省</option>
            <option>湖南省</option>
            <option>江蘇省</option>
            <option>江西省</option>
            <option>四川省</option>
            <option>雲南省</option>
            <option>內蒙古自治區</option>
            <option>全國</option>
        </select>
        <div class="btnChange">
            <a onclick="display('list');" href="javascript:void(0);">列表模式</a>
            <a onclick="display('map');" href="javascript:void(0);">地圖模式</a>
        </div>
    </div>
    <div id="map"></div>
    <div id="list" style="display:none;">正在讀取數據……</div><!-- tongji begin--><script type="text/javascript">var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Faeff88f19045b513af7681b011cea3bd' type='text/javascript'%3E%3C/script%3E"));</script><!-- tongji end --></body><script language="javascript">function display(id){
    document.getElementById('map').style.display = 'none';
    document.getElementById('list').style.display = 'none';
    document.getElementById(id).style.display = 'block';
}var mapObj;var cloudDataLayer;var cloudSearch;var pBeijing = new AMap.LngLat(116.388474,39.934486);//初始化地圖對象，加載地圖function mapInit(){
    mapObj = new AMap.Map("map",{
    center: pBeijing, //地圖中心點    level:11  //地圖顯示的比例尺級別    });
    myCloudMap();
    myCloudList("北京");
    AMap.event.addListener(mapObj,'click',getLnglat); //點擊事件}//雲圖加載地圖function myCloudMap(){    //地圖-雲圖層    mapObj.plugin('AMap.CloudDataLayer', function () {        var layerOptions = {
            query:{keywords: '北京'},
            clickable:true
        };
        cloudDataLayer = new AMap.CloudDataLayer('538d71fee4b04192f1f4de77', layerOptions); //實例化雲圖層類        cloudDataLayer.setMap(mapObj); //疊加雲圖層到地圖
        AMap.event.addListener(cloudDataLayer, 'click', function (result) {            var clouddata = result.data;            //雲圖麻點
            var infoWindow = new AMap.InfoWindow({
                content: "<a href='http://mo.amap.com/?q=" + clouddata._location.getLat() + "," + clouddata._location.getLng() + "&name=" + clouddata._name + "'><h3>" + clouddata._name + "</h3></a>" + "<p>地址：" + clouddata._address + "</p>" + "<p>電話：" + clouddata.tel + "</p>",
                size:new AMap.Size(300, 0),
                autoMove:true,
                offset:new AMap.Pixel(0,-5)
            });
            infoWindow.open(mapObj, clouddata._location);
        });
    });
}//雲圖加載列表function myCloudList(id){    //列表    mapObj.plugin(["AMap.CloudDataSearch"], function() {        //繪製多邊形
        var arr = new Array();
        arr.push(new AMap.LngLat(75.585938,52.696361));
        arr.push(new AMap.LngLat(134.472656,53.956086));
        arr.push(new AMap.LngLat(129.726563,16.467695));
        arr.push(new AMap.LngLat(81.914063,20.13847));
        arr.push(new AMap.LngLat(75.585938,52.696361));        var searchOptions = {
            keywords: id,
            pageSize:100
        };
        cloudSearch = new AMap.CloudDataSearch('538d71fee4b04192f1f4de77', searchOptions); //構造雲數據檢索類        AMap.event.addListener(cloudSearch, "complete", cloudSearch_CallBack); //查詢成功時的回調函數        AMap.event.addListener(cloudSearch, "error", errorInfo); //查詢失敗時的回調函數        cloudSearch.searchInPolygon(arr); //多邊形檢索    });
}//回調函數-成功function cloudSearch_CallBack(data) {    var resultStr="";    var resultArr = data.datas;    var resultNum = resultArr.length;    for (var i = 0; i < resultNum; i++) {
        resultStr += "<div class=\"item\">";
        resultStr += "<a href='http://mo.amap.com/?q=" + resultArr[i]._location.getLat() + "," + resultArr[i]._location.getLng() + "&name=" + resultArr[i]._name + "'><h3>" + (i+1) + "、" + resultArr[i]._name + "</h3></a>";
        resultStr += "<p>地址：" + resultArr[i]._address + "</p>";
        resultStr += "<p>電話：" + resultArr[i].tel + "</p>";
        resultStr += "</div>";
    }
    document.getElementById("list").innerHTML = resultStr;
}//回調函數-失敗function errorInfo(data) {
    resultStr = data.info;
    document.getElementById("list").innerHTML = resultStr;
}//鼠標點擊，獲取經緯度座標function getLnglat(e){    var x = e.lnglat.getLng();    var y = e.lnglat.getLat();
    document.getElementById("lnglats").innerHTML = x + "," + y;
}//清空地圖function clearMap(){
    mapObj.clearMap();
    document.getElementById("list").innerHTML = '正在讀取數據……';
}//索引雲圖function getType(iPrivance){    if(iPrivance=="全國"){
        mapObj.setZoomAndCenter(4,new AMap.LngLat(114.433594,33.651208));
        myCloudList('');        var op={
            query:{keywords:""}
        };
        cloudDataLayer.setOptions(op);
    }else{
        myCloudList(iPrivance);        var op={
            query:{keywords:iPrivance}
        };
        cloudDataLayer.setOptions(op);
        placeSearch(iPrivance);
    }
}//城市查詢function placeSearch(id) {  
    var MSearch;  
    mapObj.plugin(["AMap.PlaceSearch"], function() {          
        MSearch = new AMap.PlaceSearch({ //構造地點查詢類              pageSize:1,  
            pageIndex:1,  
            city:"" //城市          });   
        AMap.event.addListener(MSearch, "complete", keywordSearch_CallBack);//返回地點查詢結果          MSearch.search(id); //關鍵字查詢      });  
}  
//城市查詢後定位  function keywordSearch_CallBack(data) {  
    var iPoint = data.poiList.pois[0].location;
    mapObj.setZoomAndCenter(10,iPoint);
}</script></html>

複製代碼

 

示例demo：http://zhaoziang.com/amap/yuntumo.html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程