腾讯地图绘制外卖配送范围及标注商家地点的绘制及回显，搜索

最新推荐文章于 2024-05-06 08:49:13 发布

吴、柒

最新推荐文章于 2024-05-06 08:49:13 发布

阅读量2.3k

点赞数 1

分类专栏：腾讯地图文章标签：前端

本文链接：https://blog.csdn.net/weixin_44547882/article/details/105625822

版权

腾讯地图专栏收录该内容

1 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title></title>
<style type="text/css">
*{
    margin:0px;
    padding:0px;
}
body, button, input, select, textarea {
    font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
p{
    width:603px;
    padding-top:3px;
    overflow:hidden;
}
#container{
	min-width:600px;
	min-height:767px;
}
</style>
<script charset="utf-8" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=key&libraries=drawing"></script>
<script>
var map,marker,polygon,drawingManager,lngLat; // 地图，坐标点，多边形初始化加载，多边形绘制，多边形每个点的集成数组
var markersArray=[],overlaysArray=[]; //标注点集合,绘制多边形时的集合
/**
 * 初始化地图
*/
function init() {
    map = new qq.maps.Map(document.getElementById('container'), {
        center: new qq.maps.LatLng(30.57447, 103.92377), // 暂时默认成都
        zoom: 8
    })
    // 标注的生成与回显
    addMarker(new qq.maps.LatLng(30.925788712587014,103.8922119140625)) // 初始化回显标注
    markerOnly()
    // 多边形绘制及回显
    //设置多边形路径以便回显
    var path3=[
        new qq.maps.LatLng(30.57447,101.92377),
        new qq.maps.LatLng(30.17447,102.92377),
        new qq.maps.LatLng(31.57447,103.92377),
        new qq.maps.LatLng(30.37447,104.92377),
        new qq.maps.LatLng(30.47447,105.92377)
    ];
    showpolygon(path3)
    // 绘制
    addpolygon()
}
/**
 * 标注
*/
// 添加监听事件 获取鼠标单击事件（仅留一个标注点）
function markerOnly() {
    qq.maps.event.addListener(map, 'click', function(event) {
        addMarker(event.latLng)
        qq.maps.event.addListener(map, 'click', function(event) {
            deleteOverlays()   // 删除原有标注仅留下一个
            marker=new qq.maps.Marker({
                position:event.latLng, 
                map:map
            });
        });
        var gps = event.latLng.getLat() + ',' + event.latLng.getLng() // 解析出来的点方便给后端
    }); 
}
//添加标记
function addMarker(location) {
    deleteOverlays()
    var marker = new qq.maps.Marker({
        position: location,
        map: map
    });
    markersArray.push(marker);
}
//删除标记
function deleteOverlays() {
    if (markersArray) {
        for (i in markersArray) {
            markersArray[i].setMap(null);
        }
        markersArray.length = 0;
    }
    if (marker !== undefined) {
        marker.setMap(null);
    }
}
/**
 * 多边形绘制
*/
// 绘制
function addpolygon() {
    drawingManager = new qq.maps.drawing.DrawingManager({
        drawingMode: qq.maps.drawing.OverlayType.MARKER,
        drawingControl: true,
        drawingControlOptions: {
          position: qq.maps.ControlPosition.TOP_CENTER,
          drawingModes: [
            qq.maps.drawing.OverlayType.POLYGON
          ]
        },
        markerOptions:{
          visible:false
        },
        circleOptions: {
          fillColor: new qq.maps.Color(255, 208, 70, 0.3),
          strokeColor: new qq.maps.Color(88, 88, 88, 1),
          strokeWeight: 3,
          clickable: false
        }
    })
    drawingManager.setMap(map)
    qq.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
        // clearOverlays(overlaysArray)
        lngLat = []
        overlaysArray.push(event.overlay)
        for (const item of event.overlay.getPath().elems) {
          let lng = item.getLng()
          let lat = item.getLat()
          lngLat.push({
            latitude: lat,
            longitude: lng 
          })
        }
        console.log(lngLat)
    })
}
// 初始化回显
function showpolygon(path3) {
    polygon = new qq.maps.Polygon({
        map: map
    });
    polygon.setPath(path3);
}
// 删除初始化多边形
function delpolygon() {
    const a = []
    polygon.setPath(a);
}
// 删除绘制的多边形
function clearOverlays() {
    if (overlaysArray) { // 这个if判断在vue中会报错，不知道是里面的for in 被重写还是咋的，原因还不知道，如果报错可以不要这个if判断，删除标注那个地方跟这个原理是一样的，报错的话也不要，把长度重置为0
        for (i in overlaysArray) {
            overlaysArray[i].setMap(null)
        }
    }
    overlaysArray = [] // 需要重置为空，否则之前的数据还在这个数组里面
}
/**
*需要进行搜索的话加入下面代码
*/
// 搜索
    onSearch(val) { // 自定义的搜索方法名，由事实触发
      var _this = this
      var keyword = val
      var region = ''
      var searchService = new qq.maps.SearchService({
        complete : function(results){
          if (results.detail.pois) {
            _this.pois = results.detail.pois
          } else {
            Message.warning('请输入正确地址，例如成都太古里')
            return false
          }
        }
      })
      searchService.setLocation(region)
      searchService.search(keyword)
    }
</script>
</head>
<body onload="init()">
<div id="container"></div>
<p>给地图绑定了点击事件，当点击地图时，会在点击位置显示Marker。</p>
<button onclick="delpolygon()">删除多边形</button>
<button onclick="clearOverlays()">删除绘制多边形</button>
</body>
</html>

多边形覆盖物按文档应该是下面这个，但没时间去重新改造成我想要的东西了，这儿只是单纯的面向百度写了一个方便在vue里面进行展示

init = function() {
    var center = new qq.maps.LatLng(39.916527, 116.397128);
    var map = new qq.maps.Map(document.getElementById('container'), {
        center: center,
        zoom: 13
    });
    var path = [
        new qq.maps.LatLng(39.930131, 116.395500),
        new qq.maps.LatLng(39.911437, 116.377476),
        new qq.maps.LatLng(39.911305, 116.417301)
    ];
 
    var polygon = new qq.maps.Polygon({
 
        //多边形是否可点击。
        clickable: true,
 
        //鼠标在多边形内的光标样式。
        cursor: 'crosshair',
 
        //多边形是否可编辑。
        editable: true,
 
        //多边形的填充色，可通过Color对象的alpha属性设置透明度。
        fillColor: '#5f9ea0',
        //fillColor: new qq.maps.Color(0, 0, 0, 0.5),
 
        //要显示多边形的地图。
        map: map,
 
        //多边形的路径，以经纬度坐标数组构成。
        path: path,
 
        //多边形的线条颜色，可通过Color对象的alpha属性设置透明度。
        strokeColor: '#000000',
 
        //多边形的边框样式。实线是solid，虚线是dash。
        strokeDashStyle: 'dash',
 
        //多边形的边框线宽。
        strokeWeight: 5,
 
        //多边形是否可见。
        visible: true,
 
        //多边形的zIndex值。
        zIndex: 1000
 
 
    });
};

吴、柒

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
腾讯地图绘制外卖配送范围及标注商家地点的绘制及回显，搜索

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0,...
复制链接

扫一扫