Hsu,
Your code:
var pt = new Point(x, y, new SpatialReference({ wkid: 4326 }));
was the way it was done in 3.x API. In the 4.x API you need to provide an object in the Point constructor that specifies the objects property names:
var pt = new Point({x: x, y: y, spatialReference: new SpatialReference({ wkid: 4326 })});
Here is an updated sample:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Find Address</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
#map {
padding: 0;
border: solid 2px #666;
margin: 0 5px 5px 5px;
}
#header {
border: solid 2px #666;
color: #666;
font-family: sans-serif;
font-size: 1.1em;
height: auto;
margin: 5px;
overflow: hidden;
padding: 10px 0 10px 20px;
text-align:left;
}
.roundedCorners {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
</style>
<script src="https://js.arcgis.com/4.8/"></script>
<script>
var map;
require([
"esri/Map", "esri/views/MapView", "esri/tasks/Locator", "esri/Graphic",
"esri/geometry/support/webMercatorUtils",
"esri/PopupTemplate", "esri/geometry/SpatialReference", "esri/geometry/Point",
"dojo/number", "dojo/parser", "dojo/dom", "dojo/on",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
], function(
Map, MapView, Locator, Graphic,
webMercatorUtils,
PopupTemplate, SpatialReference, Point,
number, parser, dom, on
) {
parser.parse();
map = new Map({
basemap: "streets"
});
var view = new MapView({
container: "map",
map: map,
center: [-118.3, 34.2],
zoom: 11
});
var locator = new Locator("https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");
var infoTemplate = new PopupTemplate({
title: "Location",
content: "Address: {Address}"
});
on(dom.byId('btnGo'), 'click', function(){
var lon = dom.byId('Lon').value;
var lat = dom.byId('Lat').value;
var x = parseFloat(lon);
var y = parseFloat(lat);
var pt = new Point({
x: x,
y: y,
spatialReference: new SpatialReference({ wkid: 4326 })
});
locator.locationToAddress(pt, 100).then(function(evt){
if (evt.address) {
var address = {Address: evt.address};
var location = webMercatorUtils.geographicToWebMercator(evt.location);
var graphic = new Graphic({
geometry: location,
symbol: {
type: "simple-marker",
color: "blue",
size: 8,
outline: {
width: 0.5,
color: "darkblue"
}
},
attributes: address,
popupTemplate: infoTemplate
});
view.graphics.add(graphic);
view.popup.open({
features: [graphic],
location: location
});
}
});
});
view.on("click", function(evt) {
view.graphics.removeAll();
console.info(webMercatorUtils.webMercatorToGeographic(evt.mapPoint));
locator.locationToAddress(webMercatorUtils.webMercatorToGeographic(evt.mapPoint), 100).then(function(evt){
if (evt.address) {
var address = {Address: evt.address};
var location = webMercatorUtils.geographicToWebMercator(evt.location);
var graphic = new Graphic({
geometry: location,
symbol: {
type: "simple-marker",
color: "blue",
size: 8,
outline: {
width: 0.5,
color: "darkblue"
}
},
attributes: address,
popupTemplate: infoTemplate
});
view.graphics.add(graphic);
view.popup.open({
features: [graphic],
location: location
});
}
});
});
});
</script>
</head>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline', gutters:false"
style="width:100%; height:100%;">
<div id="header" class="roundedCorners"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'top'">
<span>Click the map to get the address for the input location.</span>
<input type='text' id='Lat' value="34.250812723611325"></input>
<input type='text' id='Lon' value='-118.51732330322035'></input>
<button type="button" id='btnGo'>Locate</button>
</div>
<div id="map" class="roundedCorners"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'">
</div>
</div>
</body>
</html>
