<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>基本地图展示</title>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="http://webapi.amap.com/maps?v=1.3&key=06fb75f531ce19fd2af711465487d07a&plugin=AMap.Scale,AMap.OverView,AMap.ToolBar,AMap.Autocomplete"></script>
<style>
#container{
width: 800px;
height: 600px;
margin: auto;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="myPageTop">
<table>
<tr>
<td>
<label>按关键字搜索：</label>
</td>
<td class="column2">
<label>左击获取经纬度：</label>
</td>
</tr>
<tr>
<td>
<input type="text" placeholder="请输入关键字进行搜索" id="tipinput">
</td>
<td class="column2">
<input type="text" readonly="true" id="lnglat">
</td>
</tr>
</table>
</div>
</body>
<script>
var map = new AMap.Map("container", {
resizeEnable: true,
zoom:11,
center: [116.397428, 39.90923]
});
console.log(map);
//设置地图语言 英文：'en' 中英混合 'zh_en' 中文：'zh_cn'
map.setLang("en");
//创建控制控件
// 比例尺
var scale = new AMap.Scale({
visible: true
}),
//工具条
toolBar = new AMap.ToolBar({
visible: true
}),
//鹰眼
overView = new AMap.OverView({
visible: true
});
map.addControl(scale);
map.addControl(toolBar);
map.addControl(overView);
//工具条操作
//方向盘显示隐藏
toolBar.hideDirection();
toolBar.showDirection();
//工具条标尺显示隐藏
toolBar.hideRuler();
// toolBar.showRuler();
//鹰眼操作
//显示隐藏鹰眼按钮
overView.show();
overView.hide();
//打开或者关闭鹰眼
overView.open();
overView.close();
window.map = map;
//使用setCity设置地图中心城市
map.setCity("changchun");
//设置中心和缩放
map.setZoomAndCenter(14, [116.205467, 39.907761]);
map.setZoom(12);
map.setCenter([116.205467, 39.907761]);
//平移像素
map.panBy(200,200);
//平移到某坐标
map.panTo([116.397428, 39.90923]);
//创建自动提示输入框
var auto = new AMap.Autocomplete({
input: "tipinput"
});
AMap.event.addListener(auto, "select", function(e){
if (e.poi && e.poi.location) {
map.setZoom(15);
map.setCenter(e.poi.location);
console.log(e);
var maker = new AMap.Marker({
map: map,
position: e.poi.location,
title: e.poi.name
});
}
});
//创建第一个maker
var maker = new AMap.Marker({
position: [116.397428, 39.90923],
title: "ABC",
map: map
});
</script>
</html>
image.png
