最近由于项目的需求使用到了高德地图,小编自己在空余时间总结加深一下高德地图方面的知识
一、在vue项目中使用高德地图首先我们要注册一个账户,然后需要在-应用管理-我的应用,创建一个新应用会生成key和秘钥(如下图)
二、做完以上的步骤接下来需要在vue项目使用它,获取高德地图 API,JS通过标签引入和JSAPI loader二种方式.那么小编使用的是第二种方式(JSAPI loader)
cnpm i @amap/amap-jsapi-loader --save
三、完成是初始化地图
<scrirpt>
//引入
import AMapLoader from "@amap/amap-jsapi-loader";
// 设置安全密钥
window._AMapSecurityConfig = {
securityJsCode: '用自己的秘钥',
}
exprot default{
data() {
return{}
},
mounted(){
AMapLoader.load({
"key": "自己生成的key",
"version": "2.0", // 指定要加载的 JSAPI 的版本
"plugins": [] // 需要使用的的插件列表
}).then((AMap) => {
// 初始化地图
this.map = new AMap.Map('gaode-map', {
viewMode: "2D", // 是否为3D地图模式
zoom: 12, // 初始化地图级别
center: this.lnglat, //中心点坐标深圳
resizeEnable: true,
lang: 'en'
})
}
</script>
四、实现一个窗口功能
mounted(){
//我就不初始化地图了,接着写
//添加标记
let marker = new AMap.Marker({
position: this.lnglat
});
marker.setMap(this.map);
//信息窗口(这里设置立即执行函数,是因为进入这个页面信息窗口就打开)
(function() {
var infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
content: that.createHtml(), //传入 dom 对象,或者 html 字符串(如下图)
offset: new AMap.Pixel(16, -50)
});
infoWindow.open(that.map, that.lnglat);//第一个参数是地图象 第二个经纬度
})()
}).catch(e => {
console.log(e);
})
})
},
methods:{
createHtml(){
let markerContent=''
//样式我就不写了
markerContent=<div class='custom-content-marker'></div>
//这里就是些你的html,记得return
return markerContent
}
}
五.如何通过地址获取该地方的经纬度
mounted(){
AMapLoader.load({
key: "自己的key", //多少?
version: "2.0", // 指定要加载的 JSAPI 的版本
plugins: ["AMap.Geocoder"], // 需要使用的的插件列表
}).then((AMap) => {
let geocoder = new AMap.Geocoder();
let address = "北京天安门";//要查询的地址
geocoder.getLocation(address, function (status, result) {
if (status === "complete" && result.geocodes.length) {
var lnglat = result.geocodes[0].location;
console.log(lnglat);
} else {
console.log(error);
}
});
});
}
如何在项目中有其他需求比如天气、导航、公交路线规划的等等需求其可以查看高德开发平台,如果有说的不太对的地方,欢迎大家指导.