网站首页 栏目页 内容页,网站建设及安全管理文档,静态页面做网站,服务器搭建虚拟主机一.、在高德开发平台注册账号 高德开放平台 | 高德地图API (amap.com)
二、我的 管理管理中添加Key 三、安装依赖 npm i amap/amap-jsapi-loader --save 四、创建一个放置地图的容器
templatediv classcontainer/div
/template…一.、在高德开发平台注册账号 高德开放平台 | 高德地图API (amap.com)
二、我的 管理管理中添加Key 三、安装依赖 npm i amap/amap-jsapi-loader --save 四、创建一个放置地图的容器
templatediv classcontainer/div
/templatestyle scoped
.container {width: 400px;height: 400px;
}
/style五、地图的使用
let map null;
window._AMapSecurityConfig {securityJsCode: //申请好的秘钥
}
onMounted(() {AMapLoader.load({key: , // 申请好的Web端开发者Key首次调用 load 时必填version: 2.0, // 指定要加载的 JSAPI 的版本缺省时默认为 1.4.15plugins: [AMap.Geocoder], // 需要使用的的插件列表如比例尺AMap.Scale等}).then((AMap) {var geocoder new AMap.Geocoder({// city: 010 // city 指定进行编码查询的城市支持传入城市名、adcode 和 citycode})geocoder.getLocation(想定位的某个城市, function (status, result) {console.log(status, result);if (status complete result.info OK) {var lnglat result.geocodes[0].locationconsole.log(lnglat);// result中对应详细地理坐标信息map new AMap.Map(container, {// 设置地图容器idviewMode: 3D, // 是否为3D地图模式zoom: 11, // 初始化地图级别center: [lnglat.lng, lnglat.lat], // 初始化地图中心点位置});}})}).catch((e) {console.log(e);});
});onUnmounted(() {map?.destroy();
});
六、总结 高德地图广泛应用于日常出行、旅游规划、商业定位等领域可以为用户提供丰富而全面的地图服务和位置信息。希望此篇文章对您能有所帮助
