网站登录系统怎么做,第一次跑业务怎么找客户,html个人网页源码,建设工程公司logo设计目录
一、申请密钥
二、安装element-ui
三、安装高德地图依赖
四、完整代码
五、运行截图 一、申请密钥
登录高德开放平台#xff0c;点击我的应用#xff0c;先添加新应用#xff0c;然后再添加Key。 如图所示填写对应的信息#xff0c;系统就会自动生成。 二、安装…目录
一、申请密钥
二、安装element-ui
三、安装高德地图依赖
四、完整代码
五、运行截图 一、申请密钥
登录高德开放平台点击我的应用先添加新应用然后再添加Key。 如图所示填写对应的信息系统就会自动生成。 二、安装element-ui
没安装的看官方文档Element - The worlds most popular Vue UI framework
三、安装高德地图依赖
npm i amap/amap-jsapi-loader --save
四、完整代码
把刚才申请好的安全密钥和Key替换进去。 完整代码
templatediv styledisplay: flexdiv stylemargin-top: 10pxdivspan搜索地址/spanel-autocompletev-modelkeywordsstylewidth: 300px:fetch-suggestionsquerySearchAsyncplaceholder请输入内容selecthandleSelect/el-autocompletespan stylemargin-left: 10pxspan经度{{ form.lng }}/spanspan stylemargin-left: 10px纬度{{ form.lat }}/spanspan地址{{form.address}}/span/spanel-button stylemargin-left: 10px typedanger sizesmall clickreset清空/el-button/divdiv idcontainer classcontainer/div/div/div
/templatescript
import AMapLoader from amap/amap-jsapi-loader;
window._AMapSecurityConfig {// 安全密钥securityJsCode: 安全密钥,
};
export default {name: HomeView,data() {return {// 地图实例map: null,// 标记点marker: ,// 地址逆解析geoCoder: null,// 搜索提示AutoComplete: null,//缩放控件ToolBar:null,//地图放大镜HawkEye:null,// 搜索关键字keywords: ,// 位置信息form: {lng: 119.793098,lat: 31.91243,address:,},// 搜索节流阀loading: false,// 搜索提示信息options: [],};},created() {this.initMap();},methods: {reset(){this.keywords ;this.form {lng: 119.793098,lat: 31.91243,address: ,}// 清除点this.removeMarker();// 标记点this.setMapMarker();},initMap() {AMapLoader.load({// 你申请的Keykey: Key,version: 2.0,// 需要用到的插件plugins: [AMap.Geocoder, AMap.AutoComplete,AMap.ToolBar,AMap.HawkEye],}).then((AMap) {this.map new AMap.Map(container, {viewMode: 3D, //是否为3D地图模式zoom: 23, //初始化地图级别center: [this.form.lng, this.form.lat], //初始化地图中心点位置});//地址逆解析插件this.geoCoder new AMap.Geocoder({city: 010, //城市设为北京默认“全国”radius: 1000, //范围默认500});// 搜索提示插件this.AutoComplete new AMap.AutoComplete({ city: 全国 });this.ToolBar new AMap.ToolBar({position: {bottom: 210px,right: 35px}});this.HawkEye new AMap.HawkEye({position: {bottom: 110px,left: 35px}});this.map.addControl(this.ToolBar);this.map.addControl(this.HawkEye);// 清除点this.removeMarker();// 标记点this.setMapMarker();//点击获取经纬度;this.map.on(click, (e) {// 获取经纬度this.form.lng e.lnglat.lng;this.form.lat e.lnglat.lat;// 清除点this.removeMarker();// 标记点this.setMapMarker();});}).catch((err) {// 错误});},// 标记点setMapMarker() {// 自动适应显示想显示的范围区域this.map.setFitView();this.marker new AMap.Marker({map: this.map,position: [this.form.lng, this.form.lat],});// 逆解析地址this.toGeoCoder();this.map.setFitView();this.map.add(this.marker);},// 清除点removeMarker() {if (this.marker) {this.map.remove(this.marker);}},// 逆解析地址toGeoCoder() {let lnglat [this.form.lng, this.form.lat];this.geoCoder.getAddress(lnglat, (status, result) {if (status complete) {this.form.address result.regeocode.formattedAddress;}else {this.form.address ;}});},querySearchAsync(queryString, cb){if (queryString) {this.AutoComplete.search(queryString, (status, result) {if(status complete){this.options result.tips;for (let i 0; i this.options.length; i) {this.options[i].value this.options[i].name;}}else {this.options [];}cb(this.options);});} else {this.options [];cb(this.options);}},handleSelect(val){// 清空时不执行后面代码if (!val) {return;}this.form {lng: val.location.lng,lat: val.location.lat,};// 清除点this.removeMarker();// 标记点this.setMapMarker();},},mounted() {},
};
/scriptstyle
.container {margin-top: 10px;width: 1280px;height: 720px;
}
/style五、运行截图
直接运行项目效果如下 更多用法请参考官方文档添加地图控件-入门教程-地图 JS API 2.0 | 高德地图API
