地图
文章平均质量分 64
花铛
这个作者很懒,什么都没留下…
展开
-
百度地图只显示行政区划轮廓
//整个地图设置一个多边形遮罩var EN_JW = "180, 90;"; //东北角var NW_JW = "-180, 90;"; //西北角var WS_JW = "-180, -90;"; //西南角var SE_JW = "180, -90;"; //东南角var overlay= new BMap.Polygon(SE...原创 2020-04-27 10:02:58 · 3487 阅读 · 0 评论 -
百度地图模拟多边形覆盖物的mouseover、mouseout事件
百度地图v2.0多边形覆盖物的mouseover、mouseout事件存在BUG。经过实际测试发现,只有在多边形边界上时会触发mouseover事件,离开边界,无论是进入多边形里面还是外面,都会触发mouseout事件。模拟思路:监听地图的mousemove鼠标移动事件,获得鼠标移动的点;利用几何算法库的BMapLib.GeoUtils.isPointInPolygon()方法判断点是否在多边形...原创 2020-03-23 16:03:57 · 2683 阅读 · 3 评论 -
百度地图获得多边形覆盖物的中心点
var x = 0, y = 0;var path = ply .getPath();//返回多边型的点数组;ply是多边形覆盖物for(var k = 0;k<path.length;k++){ x=x+ parseFloat(path[k].lng); y=y+ parseFloat(path[k].lat);}x=x/pat...原创 2019-12-02 10:56:49 · 3484 阅读 · 2 评论 -
将百度地图截取成图片
可以使用html2canvas,但由于折线、圆、多边形等是使用svg形成的,html2canvas无法识别svg,所以需要先将svg转成canvas。使用canvg无法将百度地图中的svg转成canvas,会出现一片空白。实际测试时发现删除svg标签上的属性就可以转化成功,但样式会错乱。可以使用rasterizehtml来进行转化。import rasterizeHTML from 'r...原创 2019-11-22 11:09:43 · 2254 阅读 · 0 评论 -
百度地图缩放滚轮,位置出现偏移
向上滚动滚轮,位置向上偏移的;向下滚动滚轮,位置向下偏移。实际测试发现,当地图容器的父元素出现滚动条的时候,就会出现上述情况。<template> <div style="width:100%;height:100%;overflow-y: auto;"> <div style="width:100%;height:1000px;margin-t...原创 2019-11-22 09:36:58 · 2850 阅读 · 1 评论 -
百度地图的鼠标绘制工具
<!--加载鼠标绘制工具--><script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script><link rel="stylesheet" href="http://ap...原创 2019-10-10 17:07:51 · 2807 阅读 · 0 评论 -
百度地图api绘制热力图
生成热力图://判断浏览器是否支持canvasfunction isSupportCanvas(){ var elem = document.createElement('canvas'); return !!(elem.getContext && elem.getContext('2d')); }if(!isSupportCanva...原创 2019-09-25 16:30:43 · 2588 阅读 · 0 评论 -
百度地图已经封装好的覆盖物如何阻止事件冒泡
比如:地图上有一个图标,当点击图标的时候,会执行覆盖物绑定的事件;执行完之后,仍然会触发地图绑定的事件,也就是事件穿透了。bmap进行了封装,将原始的事件放到了domEvent中。marker.addEventListener('click',function(e){ //覆盖物阻止事件冒泡到地图上 e.domEvent.stopPropagation();...原创 2019-09-24 10:51:28 · 1392 阅读 · 0 评论 -
百度地图路线规划重新设置起点、终点图标和路线颜色
重新设置起点、终点图标:var driving = new BMap.DrivingRoute(_this.mapModel, { renderOptions: { map: _this.mapModel, autoViewport: true }});//重新设置起始点,终点图标和偏移var startIcon = new ...原创 2019-09-24 09:35:09 · 10741 阅读 · 4 评论 -
高德(百度)地图驾车路线规划和清除
百度地图:路线规划:var driving = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true //自动调整地图层级} });var start = new BMap.Point(116.310791, 40.003419);var e...原创 2019-08-23 11:41:12 · 5282 阅读 · 4 评论 -
高德地图JavaScript API
初始化地图:var map = new AMap.Map('map', { zoom: 10, //地图显示的缩放级别 center: [116.397428, 39.90923],//中心点坐标});自定义图标的点标记://设置图标var icon = new AMap.Icon({ size: new AMap.Size(40, 40), ...原创 2019-07-09 17:44:20 · 963 阅读 · 0 评论 -
高德地图和百度地图判断一个点是否在一个区域内
高德地图:通过contains()方法。var lnglat = new AMap.LngLat(116.39,39.9);var circle = new AMap.Circle({ center: new AMap.LngLat(116.39,39.6), radius: 200, //半径 zIndex: 50,})var isContai...原创 2019-08-22 15:09:01 · 5400 阅读 · 0 评论 -
百度地图JavaScript API
在使用前,需先申请密钥(ak)。支持PC端和移动端基于浏览器的地图应用开发,且支持HTML5特性的地图开发。为了更好的在手机浏览器上展示地图,建议:将地图容器高设置为100%,使其充满整个屏幕,或者可以计算浏览器窗口的大小并进行设置。添加meta标签: 让页面以正常比例进行显示并且禁止用户缩放页面的操作。支持异步加载,可以在引用脚本的时候添加callback参数,当脚本加载完成...原创 2019-05-05 16:59:14 · 688 阅读 · 0 评论 -
百度地图一加载进来一片空白,需要再次刷新才能正常显示
可能是因为JS的加载速度大于CSS,可以通过setTimeout()延迟JS的加载。原创 2019-08-22 15:38:40 · 5728 阅读 · 2 评论 -
百度地图复杂覆盖物的自定义、删除、移动、以及解决自定义覆盖物的点击事件冒泡到地图的问题
自定义复杂覆盖物://定义构造函数function ComplexCustomOverlay(point, opt, html) { //参数分别为经纬度位置,偏移距离,html this._point = point; this._opt = opt || {}; this._html = html;}//继承OverlayComplexCustomOver...原创 2019-08-22 14:57:39 · 2165 阅读 · 0 评论 -
使用高德(百度)地图API
高德地图API官网介绍申请key;在index.js中引入:在build/webpack.base.conf.js中的module.exports={}中加入以下代码:externals:{ 'AMap': 'AMap'}在自己定义的vue组件中引入AMap:...原创 2019-06-20 15:32:44 · 3784 阅读 · 8 评论