vue项目+高德地图

最近由于项目的需求使用到了高德地图,小编自己在空余时间总结加深一下高德地图方面的知识

一、在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);
          }
        });
      });
}

 如何在项目中有其他需求比如天气、导航、公交路线规划的等等需求其可以查看高德开发平台,如果有说的不太对的地方,欢迎大家指导.