<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>基本地图展示</title>
<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="http://webapi.amap.com/maps?v=1.3&key=你的key值"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<tr>
<td height="25" align="center" bgcolor="#FFF9DF">经度：</td>
<td colspan="3" align="left" bgcolor="#FFFFFF" class="t5">
<div align="left">
<input name="lon" id="lon" readonly="true" type="number" step=0.0001 value="" size="70" />
</div>
</td>
</tr>
<tr>
<td height="25" align="center" bgcolor="#FFF9DF">纬度：</td>
<td colspan="3" align="left" bgcolor="#FFFFFF" class="t5">
<div align="left">
<input name="lat" id="lat" readonly="true" type="number" step=0.0001 value="" size="70" />
</div>
</td>
</tr>
<!---->
<tr>
<td height="25" align="center" bgcolor="#FFF9DF">选取经纬度：</td>
<td colspan="3" align="left" class="t5">
<div style="width:100%;height:500px;" id="container"></div>
</td>
</tr>
<tr>
</body>
<script>
var map = new AMap.Map("container", {
resizeEnable: true,
zoom:15,
//center: [116.397428, 39.90923]
});
var marker = new AMap.Marker({
position: map.getCenter(),
//draggable: true,
cursor: 'move',
raiseOnDrag: true
});
marker.setMap(map);
//为地图注册click事件获取鼠标点击出的经纬度坐标
var clickEventListener = map.on('click', function(e) {
//alert(e.lnglat.getLng());
document.getElementById("lon").value = e.lnglat.getLng();
document.getElementById("lat").value = e.lnglat.getLat();
marker.setPosition([e.lnglat.getLng(), e.lnglat.getLat()]); //
});
var auto = new AMap.Autocomplete({
input: "tipinput"
});
AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
function select(e) {
if (e.poi && e.poi.location) {
map.setZoom(15);
map.setCenter(e.poi.location);
}
}
</script>
</html>
2208
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
