Javascript：将标记添加到自定义esri web地图

Question

您好我目前正在使用自己的地图来创建一个javascript / html Web应用程序。 到目前为止我所做的是在javascript中引用我的id，遵循本教程ArcGIS：Webmap by ID 。 我的HTML页面上使用以下脚本显示地图

    <script>
    var textSymbol, picSymbol;
    require([
      "dojo/parser",
      "dojo/ready",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dojo/dom",
      "esri/map",
      //// map
      // "esri/graphic",
      //  "esri/symbols/PictureMarkerSymbol",
      //  "esri/symbols/TextSymbol",
      //  "esri/geometry/Point",
      //  "esri/SpatialReference",
      //  "esri/tasks/ProjectParameters",
      //  "esri/tasks/GeometryService",
      ////
      "esri/urlUtils",
      "esri/arcgis/utils",
      "esri/dijit/Legend",
      "esri/dijit/Scalebar",
      "esri/dijit/LocateButton", //
      "esri/layers/FeatureLayer",
      ////
      //"dojo/on",
      ////
      "dojo/domReady!"
    ], function (
      parser,
      ready,
      BorderContainer,
      ContentPane,
      dom,
      Map,
      //
      //Graphic, PictureMarkerSymbol, TextSymbol, Point, SpatialReference, ProjectParameters, GeometryService,
      //
      urlUtils,
      arcgisUtils,
      Legend,
      Scalebar,
      LocateButton, //
      FeatureLayer,
      //
      on
        //
    ) {
        ready(function () {

            parser.parse();

            //if accessing webmap from a portal outside of ArcGIS Online, uncomment and replace path with portal URL
            //arcgisUtils.arcgisUrl = "http://pathto/portal/sharing/content/items";
            arcgisUtils.createMap("7f975854312c4ca9a50aa5933c4a782e", "map").then(function (response) {
                //update the app
                dom.byId("title").innerHTML = response.itemInfo.item.title;
                dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet;

                var map = response.map;

                //// adding in the markers
                //var jsonString = { locations: [{ latitude: 51.6220455, longitude: 4.54404212, textToDisplayOnThePictureMarkerSymbol: 34 }, { latitude: 51.8838877, longitude: 4.7527823578, textToDisplayOnThePictureMarkerSymbol: 50 }] };
                //jsonString = jsonString.locations;
                //picSymbol = new PictureMarkerSymbol('http://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png', 60, 60);
                //map.on("ready", function (evt) {
                //    for (var i = 0; i < jsonString.length; i++) {
                //        var geometryPoint = new Point(jsonString[i].longitude, jsonString[i].latitude, new SpatialReference(4326));
                //        textSymbol = new TextSymbol(jsonString[i].textToDisplayOnThePictureMarkerSymbol).setOffset(0, -4);
                //        map.graphics.add(new Graphic(geometryPoint, picSymbol));
                //        map.graphics.add(new Graphic(geometryPoint, textSymbol));
                //    }
                //});
                //// end marker codes


                //add the scalebar
                var scalebar = new Scalebar({
                    map: map,
                    scalebarUnit: "english"
                });

                // location button
                geoLocate = new LocateButton({
                    map: map
                }, "LocateButton");
                geoLocate.startup();

                //add the legend. Note that we use the utility method getLegendLayers to get
                //the layers to display in the legend from the createMap response.
                var legendLayers = arcgisUtils.getLegendLayers(response);
                var legendDijit = new Legend({
                    map: map,
                    layerInfos: legendLayers
                }, "legend");
                legendDijit.startup();


            });
        });
    });
</script>

如果您注意到已注释掉的区域，我会尝试在地图中添加标记，但它们并不是出于某种奇怪的原因而显示的。 是否存在导致此情况或任何其他因素的地图类型差异？ 或者我是否必须添加新图层？ 我对所有这些和javascript都很新，所以我不确定序列是如何影响代码的 - 我只知道需要脚本和函数必须是相同的序列。 请帮忙！

Answer 1

你在那里遇到了一些问题。 我已经创建了一个jsfiddle，其中包含一个代码的工作示例： http ： //jsfiddle.net/j84bqy4v/以下是我所做的主要更改：

1. 基本上你不需要很多你正在做的事情所以我删除了dojo / ready，map on load等等。
2. 加载地图是一件好事，但我没想到它是因为地图已经在createMap函数返回时加载了。
3. 你也有你的纬度/经度值向后，他们也没有在你的地图居中的地方附近，所以一旦我正确地添加它们，他们就会出现在欧洲附近的某个地方，而不是地图居中的新加坡。 我在地图的可见范围内放置了一些不同的任意点。
4. 此外，您的jsonString不是json字符串，而是javascript对象。 我简化它只是一个对象数组。

这是代码：

使用Javascript

require([
    "dojo/parser",
    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane",
    "dojo/dom",
    "esri/map",
    "esri/graphic",
    "esri/symbols/PictureMarkerSymbol",
    "esri/symbols/TextSymbol",
    "esri/geometry/Point",
    "esri/SpatialReference",
    "esri/tasks/ProjectParameters",
    "esri/tasks/GeometryService",
    "esri/urlUtils",
    "esri/arcgis/utils",
    "esri/dijit/Legend",
    "esri/dijit/Scalebar",
    "esri/dijit/LocateButton",
    "esri/layers/FeatureLayer",
    "dojo/on",
    "dojo/domReady!"], 
function (
    parser, BorderContainer, ContentPane, dom, Map,
    Graphic, PictureMarkerSymbol, TextSymbol, Point, SpatialReference, ProjectParameters, GeometryService,
    urlUtils, arcgisUtils, Legend, Scalebar, LocateButton, FeatureLayer,
    on) {
    parser.parse();

    //if accessing webmap from a portal outside of ArcGIS Online, uncomment and replace path with portal URL
    //arcgisUtils.arcgisUrl = "http://pathto/portal/sharing/content/items";
    arcgisUtils.createMap("7f975854312c4ca9a50aa5933c4a782e", "map").then(function (response) {
        //update the app
        dom.byId("title").innerHTML = response.itemInfo.item.title;
        dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet;

        var map = response.map;

        //// adding in the markers
        var locations = [{
            latitude: 1.382,
            longitude: 103.949,
            text: 34
        }, {
            latitude: 1.380,
            longitude: 103.952,
            text: 50
        }];
        var picSymbol = new PictureMarkerSymbol(
                'http://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png', 60, 60);

            for (var i = 0; i < locations.length; i++) {
                var geometryPoint = new Point(locations[i].longitude, locations[i].latitude);
                var textSymbol = new TextSymbol(locations[i].text).setOffset(0, -4);
                map.graphics.add(new Graphic(geometryPoint, picSymbol));
                map.graphics.add(new Graphic(geometryPoint, textSymbol));
            }
        //// end marker codes

        //add the scalebar
        var scalebar = new Scalebar({
            map: map,
            scalebarUnit: "english"
        });

        // location button
        geoLocate = new LocateButton({
            map: map
        }, "LocateButton");
        geoLocate.startup();

        //add the legend. Note that we use the utility method getLegendLayers to get
        //the layers to display in the legend from the createMap response.
        var legendLayers = arcgisUtils.getLegendLayers(response);
        var legendDijit = new Legend({
            map: map,
            layerInfos: legendLayers
        }, "legend");
        legendDijit.startup(); 
    });
});