**概括:**示例效果:
一、注册开发者账号并获得Key
1、进入官网https://lbs.amap.com/,注册并登录
2、登陆之后,点击控制台进入 [ 应用管理 ] 页面 [ 创建新应用 ]
3、获得应用 Key值,[ 服务平台 ]一项选择 [ Web 端 ( JSAPI )或 Web 服务 ]
二.安装插件和引入
1.在index.html中引用js文件,在头部引入
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=刚刚申请的key值"></script>
2.命令行:npm install vue-amap --save
在main.js里引入
import AMap from ‘vue-amap’;
Vue.use(AMap);
三.组件使用地图
1.创建div
<div id="all-map" class="map" ></div>
.map{
width: 100%;
height: 600px;
}
2.在methods中定义创建地图的方法
地图样式属性 mapStyle: ‘amap://styles/自定义的()’, //设置地图的显示样式
created(){
this.GaodeMap()
},
GaodeMap() {
var map = new AMap.Map("all-map", {
// mapStyle: "amap://styles/darkblue", //设置地图的显示样式
center: [116.197428, 39.90923], // [纬度,经度]
resizeEnable: true,
zoom: 11,
cursor: "hand" // 鼠标在地图上的表现形式,小手
});
//实时路况图层
var trafficLayer = new AMap.TileLayer.Traffic({
zIndex: 10,
zooms: [7, 22]
});
trafficLayer.setMap(map);
AMap.plugin("AMap.Driving", function() {
var driving = new AMap.Driving({
// 驾车路线规划策略,AMap.DrivingPolicy.LEAST_TIME是最快捷模式
policy: AMap.DrivingPolicy.LEAST_TIME,
// map 指定将路线规划方案绘制到对应的AMap.Map对象上
map: map,
// panel 指定将结构化的路线详情数据显示的对应的DOM上,传入值需是DOM的ID
panel: "panel"
});
var points = [
{ keyword: "北京市地震局(公交站)", city: "北京" },
{ keyword: "亦庄文化园(地铁站)", city: "北京" }
];
// 搜索完成后,将自动绘制路线到地图上
driving.search(points);
});
// var map = new AMap.Driving("all-map",{
// // 驾车路线规划策略,AMap.DrivingPolicy.LEAST_TIME是最快捷模式
// policy: AMap.DrivingPolicy.LEAST_TIME
// })
//精确 街 市 省 国
AMap.plugin(["AMap.ToolBar", "AMap.Scale"], function() {
map.addControl(new AMap.ToolBar());
map.addControl(new AMap.Scale());
});
},