将搜索结果标记图标更改为自定义答案

【问题标题】：Change search result marker icon to a custom将搜索结果标记图标更改为自定义
【发布时间】：2021-10-16 06:29:10
【问题描述】：

我有以下正在运行的代码。我一直在寻找，找不到如何从默认位置的小点更改图标方式。下面的代码在页面加载时设置为特定地址。我已经尝试过 PictureMarkerSymbol，你会看到我已经将它加载到函数中，但我没有得到正确的逻辑。

我认为这将是使用 arcgis 的简单部分，但事实证明这很困难。

谢谢！

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <title>ArcGIS API for JavaScript</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.20/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.20/"></script>

<script>
      require([
        'esri/config',
        'esri/Map',
        'esri/views/MapView',
        'esri/symbols/PictureMarkerSymbol',
        'esri/widgets/Search',
        'esri/layers/FeatureLayer',
      ], function (
        esriConfig,
        Map,
        MapView,
        PictureMarkerSymbol,
        Search,
        FeatureLayer
      ) {
        esriConfig.apiKey =
          'API-KEY';

        const map = new Map({
          basemap: 'arcgis-navigation',
        });

        const view = new MapView({
          container: 'viewDiv',
          map: map,
          center: [-77.050636, 38.889248],
          zoom: 13,
        });

        const search = new Search({
          //Add Search widget
          view: view,
        });

        view.ui.add(search, 'top-right'); //Add to the map

        searchWidget = new Search({
          view: view,
          searchTerm: '43 Valley Oak Ct',
          popupEnabled: false,
      
        });

        view.ui.add(searchWidget, 'bottom-right');

        view.when(() => {
          searchWidget.search();
        });

      });
    </script>

【问题讨论】：

标签： arcgis arcgis-js-api

【解决方案1】：

看起来搜索小部件resultGraphic 是只读的，但看起来您可以指定SearchSource 的集合并为其提供symbol。您几乎可以使用文档中sources 下示例中提供的默认设置。下面是一个例子。您可以将此工具用于creating 符号。

<!--

To run this demo, you need to replace 'YOUR_API_KEY' with an API key from the ArcGIS Developer dashboard.

Sign up for a free account and get an API key.

https://developers.arcgis.com/documentation/mapping-apis-and-services/get-started/

 -->
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Search widget with multiple sources | Sample | ArcGIS API for JavaScript 4.20</title>

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.20/"></script>

    <script>
        require(["esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "esri/widgets/Search", "esri/tasks/Locator", "esri/symbols/SimpleMarkerSymbol"], (
            Map,
            MapView,
            FeatureLayer,
            Search,
            Locator,
            SimpleMarkerSymbol,
        ) => {

            const map = new Map({
                basemap: "dark-gray-vector"
            });

            const view = new MapView({
                container: "viewDiv",
                map: map,
                center: [-97, 38], // lon, lat
                scale: 10000000
            });

            var marker = new SimpleMarkerSymbol({ color: [203, 52, 52, 0.93] });

            const searchWidget = new Search({
                view: view,
                searchTerm: '43 Valley Oak Ct',
                popupEnabled: false,
                sources: [
                    {
                        locator: new Locator("//geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"),
                        singleLineFieldName: "SingleLine",
                        outFields: ["Addr_type", "Match_addr", "StAddr", "City"],
                        name: "ArcGIS World Geocoding Service",
                        placeholder: "Find address or place",
                        resultSymbol: marker,
                    }
                ]
            });
            searchWidget.viewModel.includeDefaultSources = false;

            // Add the search widget to the top left corner of the view
            view.ui.add(searchWidget, {
                position: "top-right"
            });

            view.when(() => {
                searchWidget.search();
            });
        });
    </script>
</head>

<body>
    <div id="viewDiv"></div>
</body>

</html>

【讨论】：