百度地图

数字化转型的浪潮风起云涌，如何联合新政策、新场景、新趋势进行供应链翻新，未然成为越来越多企业关注的焦点。11月25日， 中国供应链高层峰会（CSCE 2021）在上海召开，百度地图受邀缺席峰会并发表演讲。会上，百度地图分享了以后供应链物流的数字化发展趋势，并展现了智能物流解决方案及其在细分行业的翻新实际，助力企业晋升供应链自主可控能力。 会议现场图 作为亚太地区最具影响力的供应链年度盛会之一，“中国供应链高层峰会2021”以中国视线为终点，聚焦全行业的供应链物流倒退新动静，并邀请来自泛滥畛域的专家展开讨论互动。 古代物流体系的放慢构建与供应链翻新，是“双循环”新倒退格局的重要撑持。面向物流行业，百度地图智能物流解决方案量身打造了一整套外围场景利用技术体系，集位置服务+AI+流量入口为一体，可针对客户下单、物流分单、运输配送、经营剖析等不同场景，提供包含物流服务引擎、物流服务零碎、推广营销零碎等业余服务。凭借组件化、智能化、场景化的三大突出劣势，百度地图智能物流解决方案已成为物流行业的信息化基础设施和降本增效利器。 百度地图智能物流解决方案 百度地图智能物流解决方案在“技术+运力”双引擎策略的驱动下，百度地图智能物流解决方案已深刻利用于医药物流、汽车物流、快消品物流、危化品物流、超长超大件物流、网络货运平台等诸多业务场景，帮忙企业打造供应链外围竞争力。例如，针对有着更高安全性、合规性、时效性等要求的医药物流场景，百度地图从运输平安、经营效率、智能利用等行业关注热点切入，提供路线布局、调度算法优化、运输流向监管及异样被动监督等全链路的智能化产品服务，促成医药物流行业晋升自主可控程度。 近日，百度地图也与国药团体医药物流有限公司达成单干共识，携手共建，深刻摸索医药物流供应链的智能化降级。 作为中国当先的智能化地位服务平台，百度地图已服务超220万开发者，日均位置服务申请超过1200亿次，展现出高度行业化的发展趋势。将来，百度地图将持续立足产业生态，施展本身AI技术和大数据劣势，助力更多生态合作伙伴在数字化转型之路上稳步前行。点击进入取得更多技术信息~~

1.在目录public/index.html中增加 <script src="http://api.map.baidu.com/api?v=2.0&ak=你的百度地图ak"></script>2.在页面中退出以下代码 <template> <div id="MapChart" ref="MapChart" style="width: 600px;height:400px;"></div></template><script>import * as echarts from 'echarts'require('echarts/extension/bmap/bmap')export default { name: 'MapDemo', components: {}, props: {}, data () { return { } }, computed: {}, watch: {}, created () {}, mounted () { this.$nextTick(() => { setTimeout(() => { this.mapInit() }) }) }, methods: { mapInit () { var MapChart = this.$echarts.init(this.$refs.MapChart) var data = [ { name: '海门', value: 9 }, { name: '鄂尔多斯', value: 12 }, { name: '招远', value: 12 }, { name: '舟山', value: 12 }, { name: '齐齐哈尔', value: 14 }, { name: '盐城', value: 15 }, { name: '赤峰', value: 16 }, { name: '青岛', value: 18 }, { name: '乳山', value: 18 }, { name: '金昌', value: 19 }, { name: '泉州', value: 21 }, { name: '莱西', value: 21 }, { name: '日照', value: 21 }, { name: '胶南', value: 22 }, { name: '南通', value: 23 }, { name: '拉萨', value: 24 }, { name: '云浮', value: 24 }, { name: '梅州', value: 25 }, { name: '文登', value: 25 }, { name: '上海', value: 25 }, { name: '攀枝花', value: 25 }, { name: '威海', value: 25 }, { name: '承德', value: 25 }, { name: '厦门', value: 26 }, { name: '汕尾', value: 26 }, { name: '潮州', value: 26 }, { name: '丹东', value: 27 }, { name: '太仓', value: 27 }, { name: '曲靖', value: 27 }, { name: '烟台', value: 28 }, { name: '福州', value: 29 }, { name: '瓦房店', value: 30 }, { name: '即墨', value: 30 }, { name: '抚顺', value: 31 }, { name: '玉溪', value: 31 }, { name: '张家口', value: 31 }, { name: '阳泉', value: 31 }, { name: '莱州', value: 32 }, { name: '湖州', value: 32 }, { name: '汕头', value: 32 }, { name: '昆山', value: 33 }, { name: '宁波', value: 33 }, { name: '湛江', value: 33 }, { name: '揭阳', value: 34 }, { name: '荣成', value: 34 }, { name: '连云港', value: 35 }, { name: '葫芦岛', value: 35 }, { name: '常熟', value: 36 }, { name: '东莞', value: 36 }, { name: '河源', value: 36 }, { name: '淮安', value: 36 }, { name: '泰州', value: 36 }, { name: '南宁', value: 37 }, { name: '营口', value: 37 }, { name: '惠州', value: 37 }, { name: '江阴', value: 37 }, { name: '蓬莱', value: 37 }, { name: '韶关', value: 38 }, { name: '嘉峪关', value: 38 }, { name: '广州', value: 38 }, { name: '延安', value: 38 }, { name: '太原', value: 39 }, { name: '清远', value: 39 }, { name: '中山', value: 39 }, { name: '昆明', value: 39 }, { name: '寿光', value: 40 }, { name: '盘锦', value: 40 }, { name: '长治', value: 41 }, { name: '深圳', value: 41 }, { name: '珠海', value: 42 }, { name: '宿迁', value: 43 }, { name: '咸阳', value: 43 }, { name: '铜川', value: 44 }, { name: '平度', value: 44 }, { name: '佛山', value: 44 }, { name: '海口', value: 44 }, { name: '江门', value: 45 }, { name: '章丘', value: 45 }, { name: '肇庆', value: 46 }, { name: '大连', value: 47 }, { name: '临汾', value: 47 }, { name: '吴江', value: 47 }, { name: '石嘴山', value: 49 }, { name: '沈阳', value: 50 }, { name: '苏州', value: 50 }, { name: '茂名', value: 50 }, { name: '嘉兴', value: 51 }, { name: '长春', value: 51 }, { name: '胶州', value: 52 }, { name: '银川', value: 52 }, { name: '张家港', value: 52 }, { name: '三门峡', value: 53 }, { name: '锦州', value: 54 }, { name: '南昌', value: 54 }, { name: '柳州', value: 54 }, { name: '三亚', value: 54 }, { name: '自贡', value: 56 }, { name: '吉林', value: 56 }, { name: '阳江', value: 57 }, { name: '泸州', value: 57 }, { name: '西宁', value: 57 }, { name: '宜宾', value: 58 }, { name: '呼和浩特', value: 58 }, { name: '成都', value: 58 }, { name: '大同', value: 58 }, { name: '镇江', value: 59 }, { name: '桂林', value: 59 }, { name: '张家界', value: 59 }, { name: '宜兴', value: 59 }, { name: '北海', value: 60 }, { name: '西安', value: 61 }, { name: '金坛', value: 62 }, { name: '东营', value: 62 }, { name: '牡丹江', value: 63 }, { name: '遵义', value: 63 }, { name: '绍兴', value: 63 }, { name: '扬州', value: 64 }, { name: '常州', value: 64 }, { name: '潍坊', value: 65 }, { name: '重庆', value: 66 }, { name: '台州', value: 67 }, { name: '南京', value: 67 }, { name: '滨州', value: 70 }, { name: '贵阳', value: 71 }, { name: '无锡', value: 71 }, { name: '本溪', value: 71 }, { name: '克拉玛依', value: 72 }, { name: '渭南', value: 72 }, { name: '马鞍山', value: 72 }, { name: '宝鸡', value: 72 }, { name: '焦作', value: 75 }, { name: '句容', value: 75 }, { name: '北京', value: 79 }, { name: '徐州', value: 79 }, { name: '衡水', value: 80 }, { name: '包头', value: 80 }, { name: '绵阳', value: 80 }, { name: '乌鲁木齐', value: 84 }, { name: '枣庄', value: 84 }, { name: '杭州', value: 84 }, { name: '淄博', value: 85 }, { name: '鞍山', value: 86 }, { name: '溧阳', value: 86 }, { name: '库尔勒', value: 86 }, { name: '安阳', value: 90 }, { name: '开封', value: 90 }, { name: '济南', value: 92 }, { name: '德阳', value: 93 }, { name: '温州', value: 95 }, { name: '九江', value: 96 }, { name: '邯郸', value: 98 }, { name: '临安', value: 99 }, { name: '兰州', value: 99 }, { name: '沧州', value: 100 }, { name: '临沂', value: 103 }, { name: '南充', value: 104 }, { name: '天津', value: 105 }, { name: '富阳', value: 106 }, { name: '泰安', value: 112 }, { name: '诸暨', value: 112 }, { name: '郑州', value: 113 }, { name: '哈尔滨', value: 114 }, { name: '聊城', value: 116 }, { name: '芜湖', value: 117 }, { name: '唐山', value: 119 }, { name: '平顶山', value: 119 }, { name: '邢台', value: 119 }, { name: '德州', value: 120 }, { name: '济宁', value: 120 }, { name: '荆州', value: 127 }, { name: '宜昌', value: 130 }, { name: '义乌', value: 132 }, { name: '丽水', value: 133 }, { name: '洛阳', value: 134 }, { name: '秦皇岛', value: 136 }, { name: '株洲', value: 143 }, { name: '石家庄', value: 147 }, { name: '莱芜', value: 148 }, { name: '常德', value: 152 }, { name: '保定', value: 153 }, { name: '湘潭', value: 154 }, { name: '金华', value: 157 }, { name: '岳阳', value: 169 }, { name: '长沙', value: 175 }, { name: '衢州', value: 177 }, { name: '廊坊', value: 193 }, { name: '菏泽', value: 194 }, { name: '合肥', value: 229 }, { name: '武汉', value: 273 }, { name: '大庆', value: 279 } ] var geoCoordMap = { 海门: [121.15, 31.89], 鄂尔多斯: [109.781327, 39.608266], 招远: [120.38, 37.35], 舟山: [122.207216, 29.985295], 齐齐哈尔: [123.97, 47.33], 盐城: [120.13, 33.38], 赤峰: [118.87, 42.28], 青岛: [120.33, 36.07], 乳山: [121.52, 36.89], 金昌: [102.188043, 38.520089], 泉州: [118.58, 24.93], 莱西: [120.53, 36.86], 日照: [119.46, 35.42], 胶南: [119.97, 35.88], 南通: [121.05, 32.08], 拉萨: [91.11, 29.97], 云浮: [112.02, 22.93], 梅州: [116.1, 24.55], 文登: [122.05, 37.2], 上海: [121.48, 31.22], 攀枝花: [101.718637, 26.582347], 威海: [122.1, 37.5], 承德: [117.93, 40.97], 厦门: [118.1, 24.46], 汕尾: [115.375279, 22.786211], 潮州: [116.63, 23.68], 丹东: [124.37, 40.13], 太仓: [121.1, 31.45], 曲靖: [103.79, 25.51], 烟台: [121.39, 37.52], 福州: [119.3, 26.08], 瓦房店: [121.979603, 39.627114], 即墨: [120.45, 36.38], 抚顺: [123.97, 41.97], 玉溪: [102.52, 24.35], 张家口: [114.87, 40.82], 阳泉: [113.57, 37.85], 莱州: [119.942327, 37.177017], 湖州: [120.1, 30.86], 汕头: [116.69, 23.39], 昆山: [120.95, 31.39], 宁波: [121.56, 29.86], 湛江: [110.359377, 21.270708], 揭阳: [116.35, 23.55], 荣成: [122.41, 37.16], 连云港: [119.16, 34.59], 葫芦岛: [120.836932, 40.711052], 常熟: [120.74, 31.64], 东莞: [113.75, 23.04], 河源: [114.68, 23.73], 淮安: [119.15, 33.5], 泰州: [119.9, 32.49], 南宁: [108.33, 22.84], 营口: [122.18, 40.65], 惠州: [114.4, 23.09], 江阴: [120.26, 31.91], 蓬莱: [120.75, 37.8], 韶关: [113.62, 24.84], 嘉峪关: [98.289152, 39.77313], 广州: [113.23, 23.16], 延安: [109.47, 36.6], 太原: [112.53, 37.87], 清远: [113.01, 23.7], 中山: [113.38, 22.52], 昆明: [102.73, 25.04], 寿光: [118.73, 36.86], 盘锦: [122.070714, 41.119997], 长治: [113.08, 36.18], 深圳: [114.07, 22.62], 珠海: [113.52, 22.3], 宿迁: [118.3, 33.96], 咸阳: [108.72, 34.36], 铜川: [109.11, 35.09], 平度: [119.97, 36.77], 佛山: [113.11, 23.05], 海口: [110.35, 20.02], 江门: [113.06, 22.61], 章丘: [117.53, 36.72], 肇庆: [112.44, 23.05], 大连: [121.62, 38.92], 临汾: [111.5, 36.08], 吴江: [120.63, 31.16], 石嘴山: [106.39, 39.04], 沈阳: [123.38, 41.8], 苏州: [120.62, 31.32], 茂名: [110.88, 21.68], 嘉兴: [120.76, 30.77], 长春: [125.35, 43.88], 胶州: [120.03336, 36.264622], 银川: [106.27, 38.47], 张家港: [120.555821, 31.875428], 三门峡: [111.19, 34.76], 锦州: [121.15, 41.13], 南昌: [115.89, 28.68], 柳州: [109.4, 24.33], 三亚: [109.511909, 18.252847], 自贡: [104.778442, 29.33903], 吉林: [126.57, 43.87], 阳江: [111.95, 21.85], 泸州: [105.39, 28.91], 西宁: [101.74, 36.56], 宜宾: [104.56, 29.77], 呼和浩特: [111.65, 40.82], 成都: [104.06, 30.67], 大同: [113.3, 40.12], 镇江: [119.44, 32.2], 桂林: [110.28, 25.29], 张家界: [110.479191, 29.117096], 宜兴: [119.82, 31.36], 北海: [109.12, 21.49], 西安: [108.95, 34.27], 金坛: [119.56, 31.74], 东营: [118.49, 37.46], 牡丹江: [129.58, 44.6], 遵义: [106.9, 27.7], 绍兴: [120.58, 30.01], 扬州: [119.42, 32.39], 常州: [119.95, 31.79], 潍坊: [119.1, 36.62], 重庆: [106.54, 29.59], 台州: [121.420757, 28.656386], 南京: [118.78, 32.04], 滨州: [118.03, 37.36], 贵阳: [106.71, 26.57], 无锡: [120.29, 31.59], 本溪: [123.73, 41.3], 克拉玛依: [84.77, 45.59], 渭南: [109.5, 34.52], 马鞍山: [118.48, 31.56], 宝鸡: [107.15, 34.38], 焦作: [113.21, 35.24], 句容: [119.16, 31.95], 北京: [116.46, 39.92], 徐州: [117.2, 34.26], 衡水: [115.72, 37.72], 包头: [110, 40.58], 绵阳: [104.73, 31.48], 乌鲁木齐: [87.68, 43.77], 枣庄: [117.57, 34.86], 杭州: [120.19, 30.26], 淄博: [118.05, 36.78], 鞍山: [122.85, 41.12], 溧阳: [119.48, 31.43], 库尔勒: [86.06, 41.68], 安阳: [114.35, 36.1], 开封: [114.35, 34.79], 济南: [117, 36.65], 德阳: [104.37, 31.13], 温州: [120.65, 28.01], 九江: [115.97, 29.71], 邯郸: [114.47, 36.6], 临安: [119.72, 30.23], 兰州: [103.73, 36.03], 沧州: [116.83, 38.33], 临沂: [118.35, 35.05], 南充: [106.110698, 30.837793], 天津: [117.2, 39.13], 富阳: [119.95, 30.07], 泰安: [117.13, 36.18], 诸暨: [120.23, 29.71], 郑州: [113.65, 34.76], 哈尔滨: [126.63, 45.75], 聊城: [115.97, 36.45], 芜湖: [118.38, 31.33], 唐山: [118.02, 39.63], 平顶山: [113.29, 33.75], 邢台: [114.48, 37.05], 德州: [116.29, 37.45], 济宁: [116.59, 35.38], 荆州: [112.239741, 30.335165], 宜昌: [111.3, 30.7], 义乌: [120.06, 29.32], 丽水: [119.92, 28.45], 洛阳: [112.44, 34.7], 秦皇岛: [119.57, 39.95], 株洲: [113.16, 27.83], 石家庄: [114.48, 38.03], 莱芜: [117.67, 36.19], 常德: [111.69, 29.05], 保定: [115.48, 38.85], 湘潭: [112.91, 27.87], 金华: [119.64, 29.12], 岳阳: [113.09, 29.37], 长沙: [113, 28.21], 衢州: [118.88, 28.97], 廊坊: [116.7, 39.53], 菏泽: [115.480656, 35.23375], 合肥: [117.27, 31.86], 武汉: [114.31, 30.52], 大庆: [125.03, 46.58] } var convertData = function (data) { var res = [] for (var i = 0; i < data.length; i++) { var geoCoord = geoCoordMap[data[i].name] if (geoCoord) { res.push({ name: data[i].name, value: geoCoord.concat(data[i].value) }) } } return res } var option = { title: { text: '全国次要城市空气质量 - 百度地图', subtext: 'data from PM25.in', sublink: 'http://www.pm25.in', left: 'center' }, tooltip: { trigger: 'item' }, bmap: { center: [104.114129, 37.550339], zoom: 5, roam: true, mapStyle: { styleJson: [{ featureType: 'water', elementType: 'all', stylers: { color: '#d1d1d1' } }, { featureType: 'land', elementType: 'all', stylers: { color: '#f3f3f3' } }] } }, series: [ { name: 'pm2.5', type: 'scatter', coordinateSystem: 'bmap', data: convertData(data), symbolSize: function (val) { return val[2] / 10 }, encode: { value: 2 }, label: { formatter: '{b}', position: 'right', show: false }, emphasis: { label: { show: true } } }, { name: 'Top 5', type: 'effectScatter', coordinateSystem: 'bmap', data: convertData(data.sort(function (a, b) { return b.value - a.value }).slice(0, 6)), symbolSize: function (val) { return val[2] / 10 }, encode: { value: 2 }, showEffectOn: 'render', rippleEffect: { brushType: 'stroke' }, hoverAnimation: true, label: { formatter: '{b}', position: 'right', show: true }, itemStyle: { shadowBlur: 10, shadowColor: '#333' }, zlevel: 1 } ] } MapChart.setOption(option) } }}</script><style lang='scss' scoped></style>

近日，自然语言解决畛域权威排行榜——GLUE（通用语言了解评估基准）新排名出炉。百度自研的语义了解技术与平台文心（ERNIE）以90.9的分数再登榜首，当先微软DeBERTa/TuringNLRv4，谷歌T5以及阿里巴巴、华为等研发的其余同类别技术。 在技术产业落地的过程中，文心也在一直发力，将最新的世界级技术冲破转化为易用的产品工具，携手EasyDL平台提供了一整套简略高效的NLP开发能力，无效晋升模型开发与利用效率。 针对用户文本信息抽取的需要，文心上线了“文本实体抽取”和“文本实体关系抽取”性能，反对从海量信息源中抽取出特定的实体，并定义实体间的关系。如抽取保险合同中的投保人、投保年限等信息，并建设两者间的关系，辅助保险经理人分析判断。 那如何疾速给数据打标签？ 怎么达到高精度的模型成果？ 如何从简略信息抽取到构建常识图谱？ 零深度学习教训能轻松上手吗？ … 针对以上问题，3月25日，百度EasyDL-NLP专场直播课“从技术解析到实战演练，文本信息抽取模型精讲”来袭，从数据处理到模型训练，全程0代码可视化操作，教你疾速把握“信息抽取”技能。 课程亮点，先睹为快！ 实体抽取与实体关系抽取，高效获取常识 “文本实体抽取”作为文本开掘和信息抽取的外围工作，反对从海量信息源中抽取出特定的事实信息，是信息检索、智能问答、智能对话等人工智能利用的重要根底；“文本实体关系抽取”除了能抽取出预约义的实体类型，还能抽取出实体间的关系类型，失去蕴含语义信息的实体关系三元组，可用于构建和裁减常识图谱。例如：“王雪纯是87版《红楼梦》中晴雯的配音者。”能够抽取出“王雪纯-配音-红楼梦”这一组关系。 在线智能标注，节约老本 为晋升该项能力的易用性，文心还针对数据筹备难题，公布了基于2项工作的数据标注工具，反对在文本中间接划选进行标注，给标注人员带来极佳的标注体验和更高的标注效率。如下图所示，能够通过可视化的操作间接对指标信息进行标注，抽取金融类合同中的企业主体、注册资本，并间接建设两者间的关系。 除了上述新性能的介绍，课程还将率领大家全流程实际操作，从理解原理到定制模型，从追随操作到独立实现，疾速买通文本信息开掘的任督二脉。 百度工程师手把手教学案例实现 本次公开课，百度工程师将从创立模型、筹备数据、训练模型、校验模型、公布模型全流程进行实操演练，率领大家基于样例数据三步定制一个实体关系抽取模型。还在等什么，速速报名吧，让咱们一起见证文本智能化的神奇魅力！ 工夫：3月25日20:00-21:00 报名形式：扫描海报中的二维码，增加小助手微信，备注“NLP”，获取专属报名通道。参加课程，还有爱奇艺VIP黄金会员月卡、百度大脑定制马克杯等惊喜礼品等你拿！ 更多“课程介绍”及“课程亮点”见下图！

网上曾经有很多引入离线地址有教程和办法，所以我就以上面的网址，再进行阐明： 离线地址demo下载：https://blog.csdn.net/wml00000/article/details/82219015 下载实现demo构造： 双击关上demo01.html，能够看到有局部地区离线瓦片能够拜访： 下载地图能够应用《全能电子地图下载器》，下载免费版的地图瓦片，替换demo的tiles目录即可。百度地图级别：1~18 近程服务器瓦片地址批改在map_load.js中批改tiles_dir读取瓦片目录变量即可; 留神：tiles_dir是读取瓦片地址，默认是本地根门路，也就是demo01.html目录；由下图可看到，近程服务动态目录为Map（tiles），本地要目录为tiles。

在百度地图上自定义打点款式和自定义音讯图实现成果如下： 思路刚开始想通过批改infowindow款式，可是发现十分艰难，于是思考通过marker将自定义图和canvas图间接笼罩到地图上。 因为带音讯广内容是变动的，所以须要每次打点前应用canvas,将UI提供的切图作为canvas画布的背景，而后将数据作为文字填充到画布上，最初返回一个canvas；通过new BMap.Icon创立一个icon实例,最初map.addOverlay(Icon)笼罩到地图上 具体代码如下：创立canvas, 并在画布上画图和文字` /** * * @param file * @param name * @param value * file 背景图片 * name value 显示的文字和值 */export const canvasPngAddTxt = (file: any, name: string, value: string) => { const cvs: any = document.createElement('canvas') const ctx: any = cvs.getContext('2d') cvs.width = 260 cvs.height = 70 const imgWidth = cvs.width const imgHeight = cvs.height ctx.rect(0, 0, imgWidth, imgHeight) ctx.fillStyle = 'rgba(255,255,255,0)'; ctx.fill() const img = new Image() img.src = file img.crossOrigin = 'Anonumous' img.onload = () => { ctx.drawImage(img, 0, 0, cvs.width, cvs.height, 0, 0, cvs.width, cvs.height) ctx.font = '18px bold sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'bottom'; ctx.fillStyle = '#fff'; const left = cvs.width*0.78; const top = cvs.height*0.066; ctx.fillText('react大厦', 52, 37); ctx.fillText('90%', 125, 37); } return cvs}` ...

baidu map api note地图级别控制// 百度地图API功能var map = new BMap.Map("allmap", {enableMapClick:false});//构造底图时，关闭底图可点功能 // 初始化地图,设置中心点坐标(城市名)和地图级别map.centerAndZoom("上海",15); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 移动地图到中心点 map.panTo(new BMap.Point(113.262232,23.154345));// 设置缩放级别 map.setZoom(14); // 开启地图缩放 map.enableScrollWheelZoom();// 可以拖拽marker.enableDragging();// 不可以拖拽marker.disableDragging();获取两点之间距离 var pointA = new BMap.Point(106.486654,29.490295); // 创建点坐标A--大渡口区 var pointB = new BMap.Point(106.581515,29.615467); // 创建点坐标B--江北区 alert('从大渡口区到江北区的距离是：'+(map.getDistance(pointA,pointB)).toFixed(2)+' 米。'); //获取两点距离添加 图形，点，线，面 文字// marker是随着地图缩放级别，尺寸变化的var marker = new BMap.Marker(new BMap.Point(116.404, 39.915)); // 创建点// 折线var polyline = new BMap.Polyline([new BMap.Point(116.399, 39.910),new BMap.Point(116.405, 39.920),new BMap.Point(116.425, 39.900)], {strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5}); //创建折线// 创建圆var circle = new BMap.Circle(point, 1500,{strokeColor: "blue", fillColor: "#ccc", strokeWeight: 2, strokeOpacity: 0.5, fillOpacity: 0.7}); // 多边形var polygon = new BMap.Polygon([new BMap.Point(116.387112, 39.920977),new BMap.Point(116.385243, 39.913063),new BMap.Point(116.394226, 39.917988),new BMap.Point(116.401772, 39.921364),new BMap.Point(116.41248, 39.927893)], {strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5}); //创建矩形var pStart = new BMap.Point(116.392214, 39.918985);var pEnd = new BMap.Point(116.41478, 39.911901);var rectangle = new BMap.Polygon([new BMap.Point(pStart.lng, pStart.lat),new BMap.Point(pEnd.lng, pStart.lat),new BMap.Point(pEnd.lng, pEnd.lat),new BMap.Point(pStart.lng, pEnd.lat)], {strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5}); // 开启(关闭)点线面的编辑(可以拖拽，移动点)polygon.enableEditing()polygon.disableEditing()// 文字labelvar opts = { position : new BMap.Point(116.417854,39.921988), // 指定文本标注所在的地理位置 offset : new BMap.Size(30, -30) //设置文本偏移量}var label = new BMap.Label("欢迎使用百度地图，这是一个简单的文本标注哦~", opts); // 创建文本标注对象label.setStyle({ color : "red", fontSize : "12px", height : "20px", lineHeight : "20px", fontFamily:"微软雅黑"}); // 覆盖物显示，隐藏marker.show()marker.hide()// 添加覆盖物 map.addOverlay(marker); // 清除覆盖物map.clearOverlays();删除指定覆盖物getOverlays方法可以获取 覆盖物数组，getLabel方法可以，获取他的labelfunction deletePoint(){ var allOverlay = map.getOverlays(); for (var i = 0; i < allOverlay.length -1; i++){ if(allOverlay[i].getLabel().content == "我是id=1"){ map.removeOverlay(allOverlay[i]); return false; } } }marker 自定义icon// 创建小狐狸iconvar pt = new BMap.Point(116.417, 39.909);var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(300,157));var marker2 = new BMap.Marker(pt,{icon:myIcon}); // 创建标注map.addOverlay(marker2); 加载海量点// data source var data = {"data":[[74.438,39.006,1]]}if (document.createElement('canvas').getContext) { // 判断当前浏览器是否支持绘制海量点 var points = []; // 添加海量点数据 for (var i = 0; i < data.data.length; i++) { points.push(new BMap.Point(data.data[i][0], data.data[i][1])); } var options = { size: BMAP_POINT_SIZE_SMALL, shape: BMAP_POINT_SHAPE_STAR, color: '#d340c3' } var pointCollection = new BMap.PointCollection(points, options); // 初始化PointCollection pointCollection.addEventListener('click', function (e) { alert('单击点的坐标为：' + e.point.lng + ',' + e.point.lat); // 监听点击事件 }); map.addOverlay(pointCollection); // 添加Overlay} else { alert('请在chrome、safari、IE8+以上浏览器查看本示例');}两点之间 画弧线 圆弧// 引入一个库 <script type="text/javascript" src="http://api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js"></script> var points = []points.push( new BMap.Point(116.432045,39.910683) )points.push( new BMap.Point(120.129721,30.314429) )points.push( new BMap.Point(121.491121,25.127053) )var curve = new BMapLib.CurveLine(points, {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5}); //创建弧线对象map.addOverlay(curve); //添加到地图中curve.enableEditing(); //开启编辑功能 // centre:椭圆中心点,X:横向经度,Y:纵向纬度function add_oval(centre,x,y){ var assemble= [] var angle; var dot; var tangent=x/y; for(i=0;i<36;i++) { angle = (2* Math.PI / 36) * i; dot = new BMap.Point(centre.lng+Math.sin(angle)*y*tangent, centre.lat+Math.cos(angle)*y); assemble.push(dot); } return assemble;}var oval = new BMap.Polygon(add_oval(point,0.1,0.3), {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});map.addOverlay(oval); 画行政区function getBoundary(){ var bdary = new BMap.Boundary(); console.log(bdary) bdary.get("上海市徐汇区", function(rs){ //获取行政区域 map.clearOverlays(); //清除地图覆盖物 // rs.boundaries 是一个数组，每个元素，是地理位置的字符串 "12,12;123,23" var count = rs.boundaries.length; if (count === 0) { alert('未能获取当前输入行政区域'); return ; } console.log(rs.boundaries) var pointArray = []; for (var i = 0; i < count; i++) { var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: "#ff0000", fillColor: 'blue' } ); //建立多边形覆盖物 map.addOverlay(ply); //添加覆盖物 pointArray = pointArray.concat(ply.getPath()); console.log(pointArray) } map.setViewport(pointArray); //调整视野 addlabel(); });}自定义覆盖物// 复杂的自定义覆盖物function ComplexCustomOverlay(point, text, mouseoverText){ this._point = point; this._text = text; this._overText = mouseoverText;}ComplexCustomOverlay.prototype = new BMap.Overlay();ComplexCustomOverlay.prototype.initialize = function(map){ this._map = map; var div = this._div = document.createElement("div"); div.style.position = "absolute"; div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat); div.style.backgroundColor = "#EE5D5B"; div.style.border = "1px solid #BC3B3A"; div.style.color = "white"; div.style.height = "18px"; div.style.padding = "2px"; div.style.lineHeight = "18px"; div.style.whiteSpace = "nowrap"; div.style.MozUserSelect = "none"; div.style.fontSize = "12px" var span = this._span = document.createElement("span"); div.appendChild(span); span.appendChild(document.createTextNode(this._text)); var that = this; var arrow = this._arrow = document.createElement("div"); arrow.style.background = "url(http://map.baidu.com/fwmap/upload/r/map/fwmap/static/house/images/label.png) no-repeat"; arrow.style.position = "absolute"; arrow.style.width = "11px"; arrow.style.height = "10px"; arrow.style.top = "22px"; arrow.style.left = "10px"; arrow.style.overflow = "hidden"; div.appendChild(arrow); div.onmouseover = function(){ this.style.backgroundColor = "#6BADCA"; this.style.borderColor = "#0000ff"; this.getElementsByTagName("span")[0].innerHTML = that._overText; arrow.style.backgroundPosition = "0px -20px"; } div.onmouseout = function(){ this.style.backgroundColor = "#EE5D5B"; this.style.borderColor = "#BC3B3A"; this.getElementsByTagName("span")[0].innerHTML = that._text; arrow.style.backgroundPosition = "0px 0px"; } mp.getPanes().labelPane.appendChild(div); return div;}ComplexCustomOverlay.prototype.draw = function(){ var map = this._map; var pixel = map.pointToOverlayPixel(this._point); this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px"; this._div.style.top = pixel.y - 30 + "px";}var txt = "银湖海岸城", mouseoverTxt = txt + " " + parseInt(Math.random() * 1000,10) + "套" ;var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(116.407845,39.914101), "银湖海岸城",mouseoverTxt);mp.addOverlay(myCompOverlay);点聚合(放大缩小)<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script><script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>// markers 是一个marker数组 var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});矢量图 图标var vectorFCArrow = new BMap.Marker(new BMap.Point(point.lng-0.01,point.lat), { // 初始化方向向上的闭合箭头 icon: new BMap.Symbol(BMap_Symbol_SHAPE_FORWARD_CLOSED_ARROW, { scale: 5, strokeWeight: 1, rotation: 0,//顺时针旋转30度 fillColor: 'red', fillOpacity: 0.8 })});var vectorStar = new BMap.Marker(new BMap.Point(point.lng+0.03,point.lat-0.03), { // 初始化五角星symbol icon: new BMap.Symbol(BMap_Symbol_SHAPE_STAR, { scale: 5, fillColor: "pink", fillOpacity: 0.8 })});信息弹窗var infoWindow = new BMap.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", { width : 200, // 信息窗口宽度 height: 100, // 信息窗口高度 title : "海底捞王府井店" , // 信息窗口标题 enableMessage:true,//设置允许信息窗发送短息 message:"亲耐滴，晚上一起吃个饭吧？戳下面的链接看下地址喔~"}); marker.addEventListener("click", function(){ map.openInfoWindow(infoWindow,point); //开启信息窗口});鼠标右键除了地图，marker也支持加右键var menu = new BMap.ContextMenu(); var txtMenuItem = [ { text:'放大', callback:function(){map.zoomIn()} }, { text:'缩小', callback:function(){map.zoomOut()} } ]; for(var i=0; i < txtMenuItem.length; i++){ menu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100)); } map.addContextMenu(menu); 鼠标测距// 引入插件 <script type="text/javascript" src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script>var myDis = new BMapLib.DistanceTool(map);map.addEventListener("load",function(){ myDis.open(); //开启鼠标测距 //myDis.close(); //关闭鼠标测距大}); // 获取点击点坐标 map.addEventListener("click",function(e){ alert(e.point.lng + "," + e.point.lat);});

跨域问题可参考这篇文章《vue-cli使用webpack代理，解决跨域问题》;如果需要查看多种跨域方法的，可参考这篇文章《九种跨域方式实现原理》 百度地图web服务api调用，出现status: 240问题（注意：如果没做跨域处理，是请求不到数据的，会报错） 调用web服务api，需要创建服务端的应用，再使用该key值；百度授权白名单可以设置0.0.0.0/0，不限制授权域名。

在这之前我们必须已经完成了微信JSSDK的配置 如果还没有配置,请看这篇文章 百度JavaScript API Lite JavaScript API标准版相比，Lite版专门针对移动端H5页面的使用场景，代码体积小，性能更好获取百度KEY1.注册成为百度开发者2.创建一个应用3.获取专属你的KEY 写一个简单的百度地图(JavaScript API Lite )1.在项目index.html 中引入百度JavaScript API Lite <script type="text/javascript" src="//api.map.baidu.com/api?ak=您的密钥&type=lite&v=1.0"></script>2.在需要用到百度地图的组件template中写入 <div id="baiduMap"></div> 3.在需要用到百度地图的组件script-mounted中写入 //创建一个地图实例let map = new BMap.Map("baiduMap"); //创建一个中心点坐标 let point = new BMap.Point(116.404, 39.915); //设置坐标 map.centerAndZoom(point, 15); 此时你就会看到一个简单的百度地图. 你也可以添加链接描述控件 //创建控件 let zoomCtrl = new BMap.ZoomControl(); //添加控件 map.addControl(zoomCtrl); map.addControl(scaleCtrl);JavaScript API Lite 只有一些简单的功能,不得不换JavaScript API v3.0... 使用JavaScript API v3.0百度地图API 3.0 与百度地图lite 使用方法类似,只不过引入的api文件不一样,百度JavaScript API 3.0 文档 <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=obQ9ARXSYP3nswLNHABZopmrIyu2NcRC"></script>使用百度地图碰到的一些坑坑1:微信SDK getLocation获取的位置为gps 定位,需要手动转为百度的BD09坐标;//创建坐标 let point = new BMap.Point(longitude, latitude);//微信获取的坐标 let convertor = new BMap.Convertor();// 创建一个坐标转换的实例 let pointArr = [];//定义存放转换点数组 每次最多10个 pointArr.push(point);//将转换点推入 数组 //转换坐标 convertor.translate(pointArr, 1, 5, function (data) { //转换左边后的回调函数, map.centerAndZoom(data.points[0], 15); if(data.status === 0) { //添加三角坐标 let marker = new BMap.Marker(data.points[0]); map.addOverlay(marker); //添加标签 let label = new BMap.Label("你的位置",{offset:new BMap.Size(20,-10)}); marker.setLabel(label); //添加百度label } })坑2:地图安卓页面显示正常,IOS微信端无显示原因是ios已经要求在APP中的所有对外连接都要使用https，但是我们用的秘钥链接是使用的http因此我们将index.html 中的script 改一下 ...

webpack+百度地图创建 script标签进行加载export function MP(ak){ return new Promise(function (resolve, reject){ window.onload = function () { resolve(BMap) } var script = document.createElement(“script”); script.type = “text/javascript”; script.src = “http://api.map.baidu.com/api?v=2.0&ak="+ak+"&callback=init"; script.onerror = reject; document.head.appendChild(script); }); }使用：import {MP} from ‘./map.js’; MP(“your ak”).then(BMap => { // do something}）webpack+百度地图+echart需要1 百度地图2 echart3 bmap.min.js 添加扩展，用于让百度地图支持echart https://github.com/apache/inc...webpack+osm地图+leaflet可能会遇见两个问题：1 地图图片错位 忘记加载leaflet.css2 webpack 中使用leaflet 的一个主要问题是默认图标的加载问题，详见https://segmentfault.com/q/10…另外也可以考虑使用动态创建<script>标签的方法，类似百度地图加载webpack+百度地图+leaflet因为leaflet本身支持的是WGS84的坐标系 ，而百度地图在中国使用的是百度坐标系，所以如果要在百度地图中使用leaflet的话，一是需要绘图数据变更为百度地图的BD09坐标系，二是需要对leaflet添加扩展，使其在进行经纬度坐标转化时使用百度地图的映射系统解决方案： http://tiven.wang/articles/us…以上问题的代码示例 https://gitlab.com/dahou/maps