易时代网站,枸杞网站建设方案,wordpress无法上传png,常州网站推广优化在引入高德地图的时候需要先注册一个账号
登录下面的网站
账号认证 | 高德控制台 (amap.com)
打开首页应用管理#xff0c;我的应用 创建新的应用 根据自己的需求进行选择 创建完成之后#xff0c;点击添加key
不同的服务平台对应不同的可使用服务#xff0c;选择自己适… 在引入高德地图的时候需要先注册一个账号
登录下面的网站
账号认证 | 高德控制台 (amap.com)
打开首页应用管理我的应用 创建新的应用 根据自己的需求进行选择 创建完成之后点击添加key
不同的服务平台对应不同的可使用服务选择自己适合的 提交就行了
就会生成对应的key和安全密钥 这段代码是一个使用 Vue.js 框架结合高德地图 API 来创建地图组件的示例。
首先在模板部分template中有一个包含 id 为 container 的 div 元素用于承载后续创建的地图。
在 script 部分
导入了 AMapLoader 用于加载高德地图的相关资源。定义了组件的一些属性和方法 data 中初始化了一个 map 对象为 null 。methods 中的 initMap 方法用于加载高德地图并进行初始化设置包括指定 key 、版本、插件然后创建地图实例并设置地图的一些属性如视图模式、缩放级别、倾斜角度、旋转角度和中心点位置。在 mounted 钩子函数中调用 initMap 方法在 DOM 初始化完成后进行地图的初始化操作。
在样式部分style
定义了地图容器 #container 的样式包括宽度、高度、外边距和边框。定义了一些其他组件相关的样式如 content 、head 、head_content 、body 、body_table1 、map-content 和 map 等的布局和样式。
/template divdiv idcontainer/div/div
/templatescriptimport AMapLoader from amap/amap-jsapi-loader;export default {name: gaode,data() {return {map: null //初始化 map 对象}},methods: {initMap() {AMapLoader.load({key: 自己的key, //此处填入我们注册账号后获取的Keyversion: 2.0, //指定要加载的 JSAPI 的版本缺省时默认为 1.4.15plugins: [], //需要使用的的插件列表如比例尺AMap.Scale等}).then((AMap) {this.map new AMap.Map(container, { //设置地图容器idviewMode: 3D, //是否为3D地图模式zoom: 17, //初始化地图级别pitch: 50,rotation: -15,center: [114.124776, 32.161415], //初始化地图中心点位置});}).catch(e {console.log(e);})},},mounted() {//DOM初始化完成进行地图初始化this.initMap();}}
/scriptstyle#container {width: 100%;height: 1080px;margin: 10px auto;border: 1px solid red;}
/stylestyle scoped
.content {width: 80%;
}
.head {padding: 10px;height: 80px;display: flex;justify-content: space-around;
}
.head_content {display: flex;flex-direction: column;justify-content: space-between;align-items: center;
}
.body {margin-top: 10px;
}
.body_table1 {display: flex;
}
.map-content {width: 700px;height: 750px;overflow: hidden;
}
.map {width: 80%;height: 80%;
}
/style
