Javascript：向自定义esri web地图添加标记_Javascript_Html_Esri_Arcgis Js Api

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

javascript html

Javascript：向自定义esri web地图添加标记,javascript,html,esri,arcgis-js-api,Javascript,Html,Esri,Arcgis Js Api,您好，我目前正在使用自己的地图创建一个javascript/html web应用程序。到目前为止，我所做的是在本教程之后在javascript中引用我的id。在我的HTML页面上使用以下脚本显示地图 <script> var textSymbol, picSymbol; require([ "dojo/parser", "dojo/ready", "dijit/layout/BorderContainer", "

您好，我目前正在使用自己的地图创建一个javascript/html web应用程序。到目前为止，我所做的是在本教程之后在javascript中引用我的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>


var textSymbol，picSymbol；
要求([
“dojo/parser”，
“dojo/ready”，
“dijit/layout/BorderContainer”，
“dijit/layout/ContentPane”，
“dojo/dom”，
“esri/map”，
////地图
//“esri/图形”，
//“esri/symbols/PictureMarkerSymbol”，
//“esri/symbols/TextSymbol”，
//“esri/几何体/点”，
//“esri/空间参考”，
//“esri/任务/项目参数”，
//“esri/tasks/GeometryService”，
////
“esri/urlUtils”，
“esri/arcgis/utils”，
“esri/dijit/Legend”，
“esri/dijit/Scalebar”，
“esri/dijit/LocateButton”//
“esri/图层/功能图层”，
////
//“dojo/on”，
////
“dojo/domReady！”
]，功能(
解析器，
准备好的
边界容器，
内容窗格，
多姆，
地图，
//
//图形、图片标记符号、文本符号、点、空间参考、项目参数、GeometryService、，
//
urlUtils，
arcgisUtils，
传奇
比例尺，
定位按钮//
特征层，
//
在…上
//
) {
就绪（函数（）{
parser.parse（）；
//如果从ArcGIS Online之外的门户访问webmap，请取消注释并用门户URL替换路径
//arcgisUtils.arcgisUrl=”http://pathto/portal/sharing/content/items";
创建映射（“7F975854312CA9A50AA5933C4A782E”，“映射”）。然后（函数（响应）{
//更新应用程序
dom.byId（“title”）.innerHTML=response.itemInfo.item.title；
dom.byId（“subtitle”）.innerHTML=response.itemInfo.item.snippet；
var-map=response.map；
////添加标记
//var jsonString={位置：[纬度：51.6220455，经度：4.54404212，文本ToDisplaythEpictureMarkerSymbol:34}，{纬度：51.8838877，经度：4.7527823578，文本ToDisplaythEpictureMarkerSymbol:50}；
//jsonString=jsonString.locations；
//picSymbol=新图片标记SYMBOL（'http://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png', 60, 60);
//映射打开（“就绪”，功能（evt）{
//对于（var i=0；i


如果你注意到被注释掉的区域，我正在尝试向我的地图添加标记，但是由于一些奇怪的原因，它们没有显示出来。是否存在导致这种情况或任何其他因素的地图类型差异？或者我必须添加一个新层吗？我对所有这些和javascript都很陌生，所以我也不确定序列会如何影响代码-我只知道需要的脚本和函数必须在同一序列中。请帮忙 你那里的东西有几处不对劲。我创建了一个JSFIDLE，其中包含一个代码的工作示例：
以下是我所做的主要更改：
基本上你不需要做很多事情，所以我删除了dojo/ready、map-on-load等东西
Map-on-load是一个很好的使用方法，但是我认为它没有启动，因为在createMap函数返回时Map已经加载了
你也有你的lat/long值向后，它们也没有靠近地图中心的地方，所以一旦我把它们正确地加起来，它们就会出现在欧洲附近的某个地方，而不是地图中心的新加坡。我在地图的可见范围内放置了一些不同的任意点
此外，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(); 
    });
});

需要([
“dojo/parser”，
“dijit/layout/BorderContainer”，
“dijit/layout/ContentPane”，
“dojo/dom”，
“esri/map”，
“esri/图形”，
“esri/symbols/PictureMarkerSymbol”，
“esri/symbols/TextSymbol”，
“esri/几何体/点”，
“esri/空间参考”，
“esri/任务/项目参数”，
“esri/tasks/GeometryService”，
“esri/urlUtils”，
“esri/arcgis/utils”，
“esri/dijit/Legend”，
“esri/dijit/Scalebar”，
“esri/dijit/LocateButton”，
“esri/图层/功能图层”，
“dojo/on”，
“dojo/domReady！”]，
作用(
解析器、BorderContainer、ContentPane、dom、映射、，
图形