目前开发需要用到地图，所以就简单的玩了几款，我对比了腾讯位置服务跟高德地图，瞬间犯难了，亲们到底是哪一种比较好呢
左边是腾讯位置的实例，右边是高德地图的实例，我是认为左边的看着还行，不过我lp 认为是右边简介明了，那我选。。。。。高德，其实我不选丧德地图还有一个原因就是好几次被坑了气死我了。
我的话还是基本按JS api2.0来玩地图，就想象成打怪升级吧，不断变强吧骚年。
首先跟百度地图一样我们需要注册成为开发者创建key，
注册很简单，或者可以直接短信登录
注册成功登录进入控制台
在应用管理-> 我的应用下面新增key
在首页开发支持里面有很多，可以根据需要选择，这里暂时不使用web服务玩耍开篇来点简单的
好了玩得话也是基于需要以及感兴趣的点来的，如果想具体点还是查阅文档以文档为准。
链接: 地图 JSAPI 2.0.
链接: 文档献上.
创建一个最最基础的地图
3d地图
默认是2D不过不喜欢
重点属性viewMode:'3D'
// pitch 地图俯仰角度，有效范围 0 度- 83 度
// 地图顺时针旋转角度 rotation
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<title>地图显示</title>
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
<div class="input-card" style="width:16rem">
<h4>创建、销毁地图</h4>
<div id="btns">
<div class="input-item">
<button id="create-btn" class="btn" style="margin-right:1rem;">创建地图</button>
<button id="destroy-btn" class="btn">销毁地图</button>
</div>
</div>
</div>
<!-- 加载地图JSAPI脚本 -->
<script src="https://webapi.amap.com/maps?v=2.0&key=自己的key"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script>
var map = new AMap.Map('container', {
viewMode: '3D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
zoom:17.2, //初始化地图层级
center: [117.301252, 31.870344] //初始化地图中心点
});
//map.on("complete")地图加载完成事件
map.on("complete",function() {
log.success("地图加载完成！");
});
</script>
</body>
</html>
销毁地图的话
只展示js部分
<script>
var map = new AMap.Map('container', {
viewMode: '3D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
zoom:17.2, //初始化地图层级
center: [117.301252, 31.870344] //初始化地图中心点
});
map.on("complete",function() {
log.success("地图加载完成！");
});
//销毁map对象
function destroyMap() {
map && map.destroy();
log.info("地图已销毁");
}
//事件绑定
document.querySelector("#destroy-btn").onclick = destroyMap;
</script>
如果涉及异步或者防止重复加载，官方推荐JSAPI 加载器不过这里没用到
入门主要还是说下属性跟一些方法吧
这样至少看着不懵
<script>
var map = new AMap.Map('container', {
viewMode: '3D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
zoom:17.2, //初始化地图层级 我更愿意理解为也就是放大倍数
center: [117.301252, 31.870344] //初始化地图中心点
});
//那么当前地图级别
var zoom = map.getZoom();
//获取当前地图中心点
var center = map.getCenter();
//获取就有设置
//setZoom,setCenter 搭配点击事件
</script>
限制地图的范围
之前有一个需求就是一个旅游景点只需要展示他们景点的周边地图即可，我相信这个比较实用。
<script>
//创建地图
var map = new AMap.Map('container', {
viewMode : '3D',
zoom : 17.2,
center: [117.301252, 31.870344], //初始化地图中心点
//默认显示室内地图
showIndoorMap: false
});
function logMapInfo() {
//限制的坐标 限制的按东北跟西南
var limitBounds = map.getLimitBounds();
if (limitBounds) {
document.querySelector("#ne").innerText = limitBounds.northEast.toString();
document.querySelector("#sw").innerText = limitBounds.southWest.toString();
} else {
document.querySelector("#ne").innerText = document.querySelector("#sw").innerText = "未限定";
}
}
//限制地图显示范围
function lockMapBounds() {
var bounds = map.getBounds();
map.setLimitBounds(bounds);
logMapInfo();
}
//取消地图显示限制
function unlockMapBounds() {
map.clearLimitBounds();
logMapInfo();
}
//启用地图范围限定
lockMapBounds();
logMapInfo();
//绑定按钮事件
document.querySelector("#lock-bounds").onclick = lockMapBounds;
document.querySelector("#unlock-bounds").onclick = unlockMapBounds;
</script>
这样就不能拖动了
通过map.setStatus修改地图状态来初始化地图
<script>
var mapOpts = {
showIndoorMap: true, // 是否在有矢量底图的时候自动展示室内地图，PC默认true,移动端默认false
dragEnable: true, // 地图是否可通过鼠标拖拽平移，默认为true
keyboardEnable: true, //地图是否可通过键盘控制，默认为true
doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图，默认为true
zoomEnable: true, //地图是否可缩放，默认值为true
rotateEnable: true, // 地图是否可旋转，3D视图默认为true，2D视图默认false
}
//创建地图
var map = new AMap.Map('container');
//可以通过map.setStatus方法动态设置地图状态也可以直接在后面加
map.setStatus({
dragEnable: true,
keyboardEnable: true,
doubleClickZoom: true,
zoomEnable: true,
rotateEnable: true
});
var map = new AMap.Map('container',mapOpts );
</script>
不过这里我想说百度地图有一点不错，具体的标记会有信息介绍，不过各家有各家的特色，都玩一玩吧。
后面还会发关于玩地图的文章，看到这大佬们动动小手点点赞吧~~~~~~