大学专业为软件工程，现在涉及Web GIS开发。对地理信息专业基本知识了解相当薄弱，学习几天Arcgis JavaScript API加载地图，并在地图上做标记。点击标记能够弹出气泡框，以显示详细信息。
实现效果如下图所示：
实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>picture marker</title>
<style>
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<link rel="stylesheet" href="../../static/thirdparty/agsapi/3.14/esri/css/esri.css">
<script src="../../static/thirdparty/agsapi/3.14/init.js"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 100%;"></div>
<script>
var map;
require([
"esri/map",
"esri/symbols/PictureMarkerSymbol",
"esri/geometry/Point",
"esri/SpatialReference",
"esri/graphic",
"esri/InfoTemplate"
],function (Map,PictureMarkerSymbol,
Point,SpatialReference,Graphic,InfoTemplate) {
map = new Map("map",{
zoom:8,
center: [120.01876831051501, 32.52459158998377],
basemap: "osm"
});
map.on("load",function () {
var newPoint = new Point(120.01876831051501,32.52459158998377, new SpatialReference({ wkid: 4326 }));
var picSymbol = new PictureMarkerSymbol("../../static/img/tree.png", 20, 20);
var picGraphic = new Graphic(newPoint, picSymbol);
var infoTemplate = new InfoTemplate();
infoTemplate.setTitle("今天天气真晴朗");
infoTemplate.setContent('<div><img src="../../static/img/tree.png">一颗绿油油的树</div>');
picGraphic.setInfoTemplate(infoTemplate);
map.graphics.add(picGraphic);
})
})
</script>
</body>
</html>参考博客：
arcgis for js开发， 根据给定的经纬度在地图上进行标注
https://blog.csdn.net/yangsen251024/article/details/22807499