做网站生意多吗,织梦网站系统删除不了,360免费wifi密码,网站模块删除目录
一、申请密钥
二、安装依赖
三、代码实现
四、运行截图
五、官方文档 一、申请密钥
登录高德开放平台#xff0c;点击我的应用#xff0c;先添加新应用#xff0c;然后再添加Key。 如图所示填写对应的信息#xff0c;系统就会自动生成。 二、安装依赖
npm i am…目录
一、申请密钥
二、安装依赖
三、代码实现
四、运行截图
五、官方文档 一、申请密钥
登录高德开放平台点击我的应用先添加新应用然后再添加Key。 如图所示填写对应的信息系统就会自动生成。 二、安装依赖
npm i amap/amap-jsapi-loader --save
三、代码实现
找到public目录下的index.html文件把刚才申请好的2个密钥分别粘贴进去第一个securityJsCode是填入安全密钥第二个红框是填入Key。 完整代码
!DOCTYPE html
html langheadmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width,initial-scale1.0link relicon href% BASE_URL %favicon.icotitle% htmlWebpackPlugin.options.title %/titlescript typetext/javascriptwindow._AMapSecurityConfig {securityJsCode: 申请的安全密钥,}/scriptscript typetext/javascript srchttps://webapi.amap.com/maps?v2.0key申请的KeypluginAMap.Driving/scriptlink relstylesheet hrefhttps://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css /script srchttps://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js/scriptscript typetext/javascript srchttps://cache.amap.com/lbs/static/addToolbar.js/script/headbodynoscriptstrongWere sorry but % htmlWebpackPlugin.options.title % doesnt work properly without JavaScript enabled. Please enable it to continue./strong/noscriptdiv idapp/div!-- built files will be auto injected --/body
/html直接把下面代码完整的拷贝进去修改一下经纬度信息就行了可以当成一个vue组件来使用完整代码
templatedivdiv idcontainer/divdiv idpanel/div/div/templatescriptexport default {name: HomeView,data(){return{//此处不声明 map 对象可以直接使用 this.map赋值或者采用非响应式的普通对象来存储。//map:null,}},mounted(){//DOM初始化完成进行地图初始化this.initMap();},methods:{initMap() {//基本地图加载var map new AMap.Map(container, {resizeEnable: true,center: [ 116.324887,40.003069],//地图中心点zoom: 13 //地图显示的缩放级别});//构造路线导航类var driving new AMap.Driving({map: map,panel: panel});// 根据起终点经纬度规划驾车导航路线driving.search(new AMap.LngLat(116.303073,39.988185), new AMap.LngLat( 116.395204,39.994091), function(status, result) {// result 即是对应的驾车导航信息相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResultif (status complete) {log.success(绘制驾车路线完成)} else {log.error(获取驾车数据失败 result)}});}},
}
/script
style scoped
#container{padding:0px;margin: 0px;width: 100%;height: 800px;
}
#panel {position: fixed;background-color: white;max-height: 90%;overflow-y: auto;top: 10px;right: 10px;width: 280px;
}
#panel .amap-call {background-color: #009cf9;border-top-left-radius: 4px;border-top-right-radius: 4px;
}
#panel .amap-lib-driving {border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;overflow: hidden;
}
/style
四、运行截图
直接运行项目效果如下 大功告成
五、官方文档
还有很多其他的功能可以自行查看官方文档https://lbs.amap.com/api/javascript-api/guide/abc/prepare
