百度地图进阶
BMG-Princess
愿每个人心里的炽热,在妥协后还没有死去。
展开
-
【React16.7+React-Baidu-Map】【一】基础版+react-baidu-map版引入
基础版import React from 'react'import './index.less'export default class Home extends React.Component{ MP(ak) { return new Promise(function(resolve, reject) { var script = document.createElement('script') script.type = 'text/原创 2021-03-02 14:31:16 · 261 阅读 · 0 评论 -
【vue-baidu-map】给点添加信息窗口
目录效果上代码效果使用前的引用前面有说,翻翻博客上代码<bm-info-window :position="{lng: infoWindowContent.longitude, lat: infoWindowContent.latitude}" :width="0" :height="0" :show="infoWindowShow" @close="infoWindowClose" @open="infoWindowOpen"> .原创 2020-11-03 09:16:08 · 973 阅读 · 2 评论 -
【vue-baidu-map + mapv】结合实现动态水流动画
目录实现技术引用此方案对于电脑要求有点高,GPU直接就占满了,没想到好的解决方案,但功能实现了实现技术mapv vue-baidu-map 百度地图 引用固定弹框封装插件引用index.html<script src="https://api.map.baidu.com/api?v=3.0&ak=***"></script><script src="https://unpkg.com/vue-baidu-map">...原创 2020-10-30 10:29:31 · 3163 阅读 · 3 评论 -
【vue-baidu-map】绘制带方向箭头的【多条】折线
目录需求技术说明官方文档地址实现方案啥都不说,上效果图大家就懂了需求点为站点,白框显示名称+报警图标 站点颜色根据参数设置 站点间有河流方向技术说明引用 vue-baidu-map 引用自定义插件,以下会做说明官方文档地址vue-baidu-map 原生JS在折线上添加方向箭头官方案例实现方案原文档是满足不了我们需求的,所以我们需要自己封装。(本来我这边只是CDN加速引用,但是自己封装用到了源文件,所以还是要npm一...原创 2020-10-30 10:20:52 · 1825 阅读 · 1 评论 -
【vue-baidu-map】引用+各种功能的实现
目录引用使用1、Vue Baidu Map关闭左下角的百度logo2、Vue Baidu Map关闭底图点击功能3、Vue Baidu Map鼠标滚动控制缩放4、注意:不要试图在 vue 自身的生命周期中调用BMap类,更不要在这些时机修改 model 层5、带箭头的折线组件6、固定显示 - 框中内容7.offset使用...原创 2020-10-14 11:31:09 · 1202 阅读 · 0 评论 -
百度地图升级7:mapV的引用 - 曲线加流动动画
先上效果图1、引用<scriptsrc="https://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="./static/js/mapv.js"></script><scriptsrc="https://mapv.baidu.com/build/mapv.min.js"></script>...原创 2020-06-23 11:47:57 · 1620 阅读 · 2 评论 -
百度地图升级6:添加百度个性化地图及注意事项!
首先说明一下百度的个性化地图建立百度账号(秘钥啥的就不说了,此文章为升级篇) 打开百度地图开放平台-登录-特色服务平台-个性化地图 点击新建 如下图: 设置成功之后,发布样式(注意:一定要是3.0版本;例:https://api.map.baidu.com/api?v=3.0&ak=你的秘钥) 发布成功之后-点击使用 带入代码(两种方式;一种是引入id,一种是引入样式,样式在地图编辑里有) this.map = new BMap.Map("allmap", {原创 2020-06-23 11:16:30 · 1370 阅读 · 2 评论 -
百度地图升级5:将各个功能集合于一身—批量坐标转换,新增图标,折线图,弹框
见资源原创 2020-05-25 17:35:26 · 279 阅读 · 0 评论 -
百度地图升级4:给点添加弹框
// 设置弹框的格式 var opts = { boxStyle: { width: "280px", height: "120px", }, enableAutoPan: true, }; //根据判断设置图标--排口 ..原创 2020-05-25 17:29:10 · 12217 阅读 · 0 评论 -
百度地图升级3:添加不同的折线及流向
//排污口总处理 for (var i in mapdatas) { //折线 //坐标 var lineData = [] var line1 = new BMap.Point( mapdatas[i].outletLng, mapdatas[i].outletLat .原创 2020-05-25 17:28:20 · 687 阅读 · 0 评论 -
百度地图升级2:给不同类型的点赋不同的图标
//排口总数据 maps: [{ "outletName": "0排口", "outletCode": "0", "outletLng": "114.646861", "outletLat": "38.054677", 'num': "8888884", 'outletTag': ['排放最多', '排口最大'], "endLng": "114.495.原创 2020-05-25 17:26:04 · 376 阅读 · 0 评论 -
百度地图升级1:百度地图自定义icon,定位偏移问题
var myIconInfo = new BMap.Icon("../static/img/grey.png", new BMap.Size(80, 80), { anchor: new BMap.Size(25, 42) });anchor设置的是定位点距离图片左上角的偏移量。如果设置anchor参数的话,API会自动获取图片中心点作为anchor位置。...原创 2020-05-25 17:08:54 · 643 阅读 · 0 评论