Question

基本上我正在尝试执行搜索，并且从搜索结果中，我缩放到某个地图级别并显示确切的位置。这是我的HTML：

<div id='top-bar'>
        <table>
            <tr>
                <td style='width:90%;'><input placeholder='Enter An Address' id='search-box' type='text'/></td>
                <td id='search-button'><img id='search-icon' src='img/search.png' width='20' height='20' onClick='GetSearchData()'/></td>
            </tr>
        </table>
        <div id='searchResults'></div>
    </div>

我的javaScript：

function setMap()
{
    function init() 
    {
        require(
            [
                "esri/map",
                "dojo/dom-construct",
                "dojo/domReady!"
            ], 
            function
            (
                Map,
                domConstruct
            )
            {
                map = Map("map-canvas",
                {
                });
                map.setZoom(1);
                coreFunctions();
            });

    }
    dojo.ready(init);
}

function GetSearchData() {
    var basicSearch = new BasicSearch;
    var searchText = document.getElementById("search-box").value;
    basicSearch.searchVal = searchText;
    basicSearch.returnGeom = '1';     

    basicSearch.GetSearchResults(displayData);
}

function displayData(resultData){
        var results = resultData.results;
        if (results=='No results'){
            document.getElementById('searchResults').innerHTML = "No result(s) found";
            return false
        }
        else{
            var htmlStr = "<table style='overflow-y: scroll; min-height: 100px;'>";
            for (var i = 0; i < results.length; i++) {
                var row = results[i];
                htmlStr = htmlStr + "<tr>";
                htmlStr = htmlStr + "<td>";
                htmlStr = htmlStr + "<a href='JavaScript:ZoomTo("+ row.X +","+ row.Y +")'>" + row.SEARCHVAL + "</a>";
                htmlStr = htmlStr + "</td>";
                htmlStr = htmlStr + "</tr>";
            }
            htmlStr = htmlStr + "</table>";
            document.getElementById('searchResults').innerHTML = htmlStr;
        }
    }

function ZoomTo(xVal,yVal){
    map.showLocation(xVal,yVal);
}

搜索确实显示了一些结果。但是当我点击其中一个搜索结果时，它不会执行缩放功能。相反，它向我显示了一些错误消息：Uncaught TypeError: Object [object Object] has no method 'showLocation'。

我想知道为什么会这样，因为我遵循了这里的文件：OneMap API

提前致谢。

修改

我认为问题在于空间参考。其中一个坐标是24607.8257,46287.3873。但我记得新加坡地图的纬度和长度是1.352083000000000000,103.819836000000010000。有人知道如何解决这个问题吗？

function ZoomTo(xVal,yVal){
var pt = esri.geometry.geographicToWebMercator(new esri.geometry.Point(xVal, yVal));
map.centerAndZoom(pt, 5);
}

Answer 1

我不会在评论中发布代码，所以这里是我上面提到的例子。

require([
   "esri/map", "esri/geometry/Point", "esri/SpatialReference",
   "esri/symbols/SimpleMarkerSymbol", "esri/Graphic", ... 
    ], function(Map, Point, SpatialReference, SimpleMarkerSymbol, Graphic, ... ) {
    });

    var map = new Map( ... );
    map.on("load", function() { ShowLocation(-81.3765, 28.54175); });

 function ShowLocation(x, y) {
   var point = new Point(x, y, new SpatialReference({wkid:4326}));
   var simpleMarkerSymbol = new SimpleMarkerSymbol();
   var graphic = new Graphic(point, simpleMarkerSymbol);

   map.graphics.add(graphic);
 };

此外，您定义地图的方式似乎也有错误。如果你没有将你的变量定义为全局变量，你必须在开头必须有一个变量和＃34;新地图＆＃34;而不是地图。

 var map = new Map("map-canvas",...

<强>更新

在定义地图时是否设置了空间参考？

喜欢：

var spatialRef = new SpatialReference({wkid:yourSpatialReferenceHere});
 map = new Map("map", {
                    extent: Extent,
                    spatialReference:spatialRef,
                    lods:lods,
                    logo: false,
                    autoResize:true,
                    sliderStyle: "large",
                    displayGraphicsOnPan: false
                });

这应解决不同参考的问题。

Esri和OneMap的空间参考

1 个答案: