地图开发
地图开发
朝阳39
钟爱编程,偏前端开发,欢迎私信我加入EC尽享编程俱乐部共同学习,交流成长!
展开
-
百度地图开发 —— 获取百度地图开发的 AK
1.在百度地图开放平台注册为开发者http://lbsyun.baidu.com/apiconsole/key2.创建应用3.复制AK提交后,在应用列表中,即可一键复制 AK原创 2021-09-16 18:21:00 · 590 阅读 · 0 评论 -
vue 使用 vue-jsonp 解决跨域请求问题(访问百度地图API)
目录vue-jsonp的跨域请求原理1. 安装vue-jsonp2. 在 main.js中导入vue-jsonp3. 在 .vue 文件中使用vue-jsonp的官网https://www.npmjs.com/package/vue-jsonpvue-jsonp的跨域请求原理ajax请求受同源策略影响,不允许进行跨域请求( 当服务器网络受限时,通过配置 ajax 代理实现的跨域方案,在本地运行时ok,但在项目打包部署后会失效!)script标签src属性中的...原创 2021-02-08 16:48:09 · 2739 阅读 · 1 评论 -
vue 百度地图开发【教程】3. 自定义百度地图主题
目录1. data 中定义地图和样式2. mounted 中设置样式 setMapStyle3. 最终效果以下操作,都基于【教程】1 中绘制的百度地图https://blog.csdn.net/weixin_41192489/article/details/113742927<div id="myMap" style="height: 400px"></div>1. data 中定义地图和样式样式可以参考链接获取 https://blog.csd..原创 2021-02-08 11:25:06 · 876 阅读 · 0 评论 -
vue 百度地图开发【教程】2. 百度地图的常用配置和操作
目录关闭地图默认的可点击功能设置地图中心点和缩放比例启用滚轮放大缩小地图拖拽移动地图创建坐标点添加覆盖物 —— 点添加覆盖物 —— 文字标签创建矩形区域限定地图显示范围(拖出该区域后会重新弹回)获取百度地图的坐标范围,四个顶点坐标更多操作参考官网以下操作,都基于【教程】1 中绘制的百度地图https://blog.csdn.net/weixin_41192489/article/details/113742927<div id="...原创 2021-02-08 08:50:21 · 1724 阅读 · 0 评论 -
vue 百度地图开发【教程】1. 绘制百度地图(不使用 vue-baidu-map,解决 BMap is undefined)
1. 在public/index.html 中引入百度地图 <!--引入百度地图--> <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=你的百度ak"></script>2. 在vue.config.js 中配置 BMapmodule.exports = { configureWebpack: { externals:...原创 2021-02-07 16:23:03 · 773 阅读 · 0 评论 -
高德地图开发 —— 获取高德地图开发的 key
1. 打开高德地图官网,注册账号https://developer.amap.com/ 个人开发,则选择个人开发者2. 使用注册的账号登录后,进入控制台,创建应用https://console.amap.com/dev/index3. 添加 key (根据需要,配置对应服务的key)...原创 2021-02-05 20:52:49 · 1401 阅读 · 2 评论 -
vue-baidu-map 综合案例 | 绘制行政区划轮廓,缩放切换市、区视图、点击高亮行政区划,搜索标记目标点,自定义地图样式等——vue百度地图开发
目录最终效果完整代码接口配置最终效果完整代码需安装依赖 "element-ui": "^2.4.5", "vue-baidu-map": "^0.21.22", "axios": "^0.19.2",<template> <div style="position: relative"> <el-autocomplete class="searchBar"...原创 2021-01-25 22:18:21 · 1871 阅读 · 0 评论 -
vue-baidu-map 绘制行政区划的轮廓,添加行政区划名称(含给覆盖物添加点击事件)——vue 百度地图开发
最终效果完整代码<template> <div> <baidu-map @ready="initMap" :zoom="12" center="北京市丰台区" style="height: 100vh;width: 100%" :scroll-wheel-zoom="true.原创 2021-01-25 21:51:16 · 2623 阅读 · 2 评论 -
百度地图主题编辑器使用教程
目录使用流程1. 打开官网2. 添加样式规则(默认有一条样式规则)3. 选择元素4. 选择属性5. 勾选要修改的样式,并设置为目标值6. 获取样式的JSON数据使用流程1. 打开官网百度地图主题编辑器【官网】https://developer.baidu.com/map/custom/2. 添加样式规则(默认有一条样式规则)3. 选择元素在元素框中,展开树形列表,点击选择要修改样式的元素4. 选择属性5. 勾选要修改的样式,并设..原创 2021-01-23 11:54:24 · 13190 阅读 · 0 评论 -
vue-baidu-map 报错 | map is undefined
报错描述给 <baidu-map></baidu-map> 绑定了地图初始化事件@ready="initMap"在方法 initMap({BMap, map}) {} 中map 可以正常使用 在其他方法/生命周期中,一旦使用map,便报错提示map is undefined解决方案1. 在data() 中定义map变量 data() { return { map: '...原创 2021-01-24 11:11:01 · 1188 阅读 · 0 评论 -
vue-baidu-map 报错 | BMap is undefined
报错描述给 <baidu-map></baidu-map> 绑定了地图初始化事件@ready="initMap"在方法 initMap({BMap, map}) {} 中BMap 可以正常使用 在其他方法/生命周期中,一旦使用BMap ,便报错提示BMap is undefined解决方案1. 全局安装ESlint (任意目录下的命令行中执行)npm install eslint -g2. 在项目文件夹下新建文件.eslintr...原创 2021-01-24 11:05:32 · 1007 阅读 · 2 评论 -
百度地图开发 —— 去除百度地图左下角Logo
添加以下css样式即可:/* 隐藏百度图片Logo */.BMap_cpyCtrl { display:none;} /* 隐藏文字信息 */.anchorBL{ display:none;}原创 2021-01-23 14:35:50 · 594 阅读 · 0 评论