【分享】高德地图的调用例子

负暄

论坛上用百度地图的大侠比较多，高德地图很少有人讨论。现将我参考外卖案例开发的高德地图调用功能分享出来，希望对用到高德地图的兄弟们有所帮助。
我做了一个w文件和一个html文件，html文件调用高德地图，以iFrame的方式嵌入w文件，主要功能如下：
1、w文件中有一个data组件，保存需要显示位置的个体信息，包括ID，名称，地址等；
2、当w文件打开html文件时，将个体的地址信息传入；
3、html获得w文件传来的地址信息，调用高德api，将其解析为经纬度信息，在地图上显示标记，同时显示地址和经纬度；
4、当用户在地图上任意位置点击鼠标时，获得新的经纬度，在地图上重新标记，并显示新的经纬度；
5、html文件调用w文件中的函数，修改data中的经纬度字段为新的经纬度坐标。

具体源代码如下：
w文件：
=========================================================================================
<?xml version="1.0" encoding="UTF-8"?>


<div xmlns="http://www.w3.org/1999/xhtml" xid="window" class="window" component="$UI/system/components/justep/window/window" design="device:m;">  
  <div component="$UI/system/components/justep/model/model" xid="model" style="height:auto;top:40px;left:335px;">
  <div component="$UI/system/components/justep/data/baasData" autoLoad="true" xid="orgData" queryAction="queryMc_org" saveAction="saveMc_org" url="/summer/classes" tableName="mc_org" idColumn="fID"><column label="ID" name="fID" type="String" xid="default1"></column>
  <column label="名称" name="fName" type="String" xid="default2"></column>
  <column label="星级" name="fStar" type="Integer" xid="default3"></column>
  <column label="浏览量" name="fVisitors" type="Integer" xid="default4"></column>
  <column label="LOGO" name="fLogo" type="String" xid="default5"></column>
  <column label="地址" name="fAddress" type="String" xid="default6"></column>
  <column label="电话" name="fTelphone" type="String" xid="default7"></column>
  <column label="简介" name="fDescription" type="String" xid="default8"></column>
  <column label="经度" name="fLongitude" type="Double" xid="default9"></column>
  <column label="维度" name="fLatitude" type="Double" xid="default10"></column></div></div>
<div component="$UI/system/components/justep/panel/panel" class="x-panel x-full" xid="mapPanel" style="z-index:1;">
   <div class="x-panel-top" xid="top3">
    <div component="$UI/system/components/justep/titleBar/titleBar" class="x-titlebar" xid="titleBar2" title="机构位置（鼠标点击地图可直接修改位置）">
     <div class="x-titlebar-left" xid="hideMapPanel">
      <a component="$UI/system/components/justep/button/button" class="btn btn-link btn-only-icon" label="返回" xid="hideMapBtn" icon="icon-chevron-left">
       <i xid="i16" class="icon-chevron-left"></i>
       <span xid="span23"></span></a> </div>
     <div class="x-titlebar-title" xid="div12">机构位置（鼠标点击地图可直接修改位置）</div>
     <div id="ContextForId" xid="div1"></div>
     <div class="x-titlebar-right reverse" xid="div13"></div></div> </div>
   <div class="x-panel-content" xid="mapArea" style="font-size:0">
    <iframe style="width:100%;height:100%;border:0;" src="./amapFindAddress.html" xid="iframe1"></iframe></div> </div>
  </div>



w文件js代码：
=====================================================================================
define(function(require) {
        var justep = require("$UI/system/lib/justep");
        require("res!$UI/system/lib/jquery/jquery-1.11.1.js");
        
        var Model = function() {
                this.callParent();               
                this._orgID = '';
        };               
        
        Model.prototype.modelLoad = function(event){               
                this._orgID = sessionStorage.getItem("currentOrgId");                        
                if((!this._orgID)||(this._orgID==='')){
                        justep.Util.hint('请先选择教育机构！');
                        justep.Shell.closePage('aMapFindAddress');        
                        return ;
                }
               
                var orgData = this.comp("orgData");
                orgData.clear();                        
                orgData.setFilter("Idfilter", "fID='"+this._orgID+"'");
                orgData.refreshData();               
                if(orgData.getCount()>0){        
                        var fAddress = orgData.val("fAddress");
                        var mapPanelId = $(this.getElementByXid("mapPanel")).attr('id');
                        var $mapFrame = $('#' + mapPanelId + ' iframe');
                        var mapFrame = $mapFrame.get(0);
                        $mapFrame.on('load',function(){
                                mapFrame.contentWindow.postMessage(fAddress, "*");
                        });               
                }        
        };        
        
        //保存位置 本函数将被iFrame中嵌入的html文件调用
        Model.prototype.setPosition = function(position){
                var orgData = this.comp("orgData");
                orgData.setValue('fLongitude',position.fLgn);
                orgData.setValue('fLatitude',position.fLat);        
                orgData.saveData();        
        };        
        
        return Model;
});

负暄

html文件：
========================================================================================
<!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">
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=1d4adf2a0770814d3b5386dc84eac6c8&plugin=AMap.Geocoder"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
        <script type="text/javascript" src="../system/lib/jquery/jquery-1.11.1.js"></script>        
    <title>机构位置确认</title>   
</head>
<body>
        <div id="container"></div>
        <div id="tip">
                <span id="result" style="font-size: 12px;padding:0px 0 4px 2px; border-bottom:1px solid #C1FFC1;">
                        <span id="adressId"></span>  ：  (<span id="LngId"></span>,<span id="LatId"></span>)
                </span>   
        </div>

<script language="javascript">  
        var map = new AMap.Map("container", {
        resizeEnable: true
        });
         
    //取传进来的地址信息            
    $(window).on('message',function(message){   
                var orgAddress = message.originalEvent.data;        
                var geocoder = new AMap.Geocoder({
            //city: "010", //城市，默认：“全国”
            radius: 1000 //范围，默认：500
        });
        //根据地址获得地理编码
        geocoder.getLocation(orgAddress, function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
                geocoder_CallBack(result);
            }
        });        
        });           

        //地理编码处理函数
    function geocoder_CallBack(data) {
        //地理编码结果数组
        var geocode = data.geocodes;
        for (var i = 0; i < geocode.length; i++) {
                        //一个地址可能会返回多个结果，地图上只显示最后一个
            document.getElementById("adressId").innerHTML = geocode.formattedAddress;
                        document.getElementById("LngId").innerHTML = geocode.location.getLng();
                        document.getElementById("LatId").innerHTML = geocode.location.getLat();
                        //每个结果都画标记
            addMarker(i, geocode);
        }                    
    };


        function addMarker(i, d) {
                map.setZoom(15);
                map.setCenter([ d.location.getLng(),  d.location.getLat()]);
        var marker = new AMap.Marker({
            map: map,
            position: [ d.location.getLng(),  d.location.getLat()]
        });        
    };


        //绑定鼠标点击事件  
        AMap.event.addListener(map,'click',getClickedLnglat);
        
        //鼠标在地图上点击，获取经纬度坐标  
        function getClickedLnglat(e) {

                //清楚原有标记，在鼠标点击的位置画上新标记
                map.clearMap();
                var marker = new AMap.Marker({
            map: map,
            position: [ e.lnglat.getLng(),  e.lnglat.getLat()]
        });
        
                document.getElementById("LngId").innerHTML = e.lnglat.getLng();
                document.getElementById("LatId").innerHTML = e.lnglat.getLat();
        
                var position = {
                        "fLgn": e.lnglat.getLng(),
                        "fLat":e.lnglat.getLat()
                };

            //调用父窗口代码 将用户鼠标点击的位置返回
            var partenW = window.parent;
            var parentDiv = partenW.document.getElementById('ContextForId');            
                var parentModel = partenW.justep.Util.getModel(parentDiv);                    
            parentModel.setPosition(position);
        }            
</script>
</body>
</html>

(完)

闰土

赞 ！！！

googleman

好文章，谢谢分享！

负暄

googleman 发表于 2016-5-19 22:06
好文章，谢谢分享！

终于发现有用高德地图的了。

qq883936

负暄 发表于 2016-5-16 13:23
html文件：
========================================================================================
...

赞

wuya

楼主有高德的定位插件么

负暄

wuya 发表于 2016-8-8 17:15
楼主有高德的定位插件么

定位，我用的就是codorva插件。getLocation