本站消息

站长简介/公众号


站长简介:高级软件工程师,曾在阿里云,每日优鲜从事全栈开发工作,利用周末时间开发出本站,欢迎关注我的微信公众号:程序员总部,程序员的家,探索程序员的人生之路!分享IT最新技术,关注行业最新动向,让你永不落伍。了解同行们的工资,生活工作中的酸甜苦辣,谋求程序员的最终出路!

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2021-05(13)

2021-06(81)

2021-07(13)

2021-08(62)

2021-09(66)

高德地图初体验之不完全指北

发布于2021-06-08 04:30     阅读(95)     评论(0)     点赞(29)     收藏(1)


使用步骤【原生api】

vue中在public/index.html

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> 

基本的步骤文档中写的很详细了,这边就不多介绍了。申请应用时请注意所选择的类型(Web JS)

同时需要在vue.config.js中

  1. module.exports = {
  2. configureWebpack: {
  3. // provide the app's title in webpack's name field, so that
  4. // it can be accessed in index.html to inject the correct title.
  5. externals:{
  6. 'AMap':'AMap',
  7. 'AMapUI':'AMapUI',
  8. 'Loca':'Loca'
  9. }
  10. },
  11. }

在使用的到的vue文件中,否则会报AMap is not defined

  1. import AMap from 'AMap';
  2. new AMap.Map("map", {
  3. resizeEnable: true,
  4. rotateEnable: false,
  5. pitchEnable: true,
  6. zoom: 17,//当前缩放的层级
  7. pitch: 60,
  8. rotation: -15,
  9. viewMode: "3D", // 开启3D视图,默认为关闭
  10. buildingAnimation: true, // 楼块出现是否带动画
  11. // 引入地图的key值要和这边的是同个账号下的
  12. // mapStyle: "amap://styles/key值",
  13. expandZoomRange: true,
  14. zooms: [10, 18],
  15. center: [xxx, xxx],
  16. });

启动项目我们就可以看到地图了,但是界面上可能和ui的图不太一样,所以这个时候就需要用到自定义地图样式了。

 

我们只需要拿到相应地图样式的key就可以即时更新地图了,注意地图样式要和创建应用的为同一账号,否则是看不到效果的。

mapStyle: "amap://styles/key值"

高德提供了很多的组件,如果我们要加一个类似陀螺仪的控件,需要在引入的地方添加

plugin=AMap.ControlBar
  1. map.addControl(new AMap.ControlBar({
  2. showZoomBar: false,
  3. showControlButton: true,
  4. position: { //调节位置
  5. right: '10px',
  6. bottom: '50px'
  7. }
  8. }))

这样我们就得到了一个控件

SJI31XI8W02(SKY_$O(U]F6.png

对于这个控件,我们可以通过重写样式的方法去修改,通过调试工具我们是可以直接看到罗盘的类名的,这也意味着我们可以通过这个方法去自定义窗口消息,以及覆盖物等的样式。

VB[1@D`34A6V39L3HO6J{YX.png

原文链接:https://blog.csdn.net/Yuoliku/article/details/117567916




所属网站分类: 技术文章 > 博客

作者:西小口到了吗

链接:http://www.qianduanheidong.com/blog/article/123776/c3bdb00dedeeb56378ac/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

29 0
收藏该文
已收藏

评论内容:(最多支持255个字符)