腾讯地图只显示某一区域，覆盖图，marker自定义图标和文本标注

腾讯地图

index.html 添加如下：（key需要转成你自己申请的key）

<script type="text/javascript" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>

<!DOCTYPE html>
<html lang="en" data-dpr="1"><head><meta charset="utf-8"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title></title><script type="text/javascript" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script></head><body><div id="app"></div></body>
</html>

vue文件

<template><div ref="container" class="container"></div>
</template><script>export default {name: 'qqMap',data() {return {map: '',}},mounted() {this.init()},methods: {init() {/* eslint-disable */this.map = new qq.maps.Map(this.$refs.container, {center: new qq.maps.LatLng(24.493474, 118.148698), // 设置中心点坐标// zoom: 15.5zoom: 16})this.mapPolygon()this.mapGroundOverlay()this.mapMarker()},// 多边形mapPolygon() {var path0 = [new qq.maps.LatLng(-90, 180),new qq.maps.LatLng(-90, -180),new qq.maps.LatLng(90, -180),new qq.maps.LatLng(90, 180),]var path1 = [new qq.maps.LatLng(24.496794, 118.143848),new qq.maps.LatLng(24.496344, 118.143923),new qq.maps.LatLng(24.495417, 118.144224),new qq.maps.LatLng(24.495241, 118.144202),new qq.maps.LatLng(24.493406, 118.145039),new qq.maps.LatLng(24.493406, 118.145211),new qq.maps.LatLng(24.492898, 118.145533),new qq.maps.LatLng(24.492644, 118.145576),new qq.maps.LatLng(24.49198, 118.145544),new qq.maps.LatLng(24.490321, 118.151788),new qq.maps.LatLng(24.494734, 118.153225),new qq.maps.LatLng(24.494763, 118.153236),new qq.maps.LatLng(24.495554, 118.150543),new qq.maps.LatLng(24.495996, 118.148816),new qq.maps.LatLng(24.496426, 118.146917),new qq.maps.LatLng(24.496592, 118.146005),new qq.maps.LatLng(24.496631, 118.145383),new qq.maps.LatLng(24.496758, 118.144396),new qq.maps.LatLng(24.496748, 118.14416),new qq.maps.LatLng(24.496767, 118.14387),]var polygon = new qq.maps.Polygon({map: this.map, // 显示多边形图层的底图// path: path1, // 多边形的路径，以经纬度坐标数组构成。path: [path0, path1],fillColor: new qq.maps.Color(255, 255, 255, 1), // 多边形的填充色，可通过Color对象的alpha属性设置透明度。strokeColor: '#5f9ea0', // 多边形的线条颜色，可通过Color对象的alpha属性设置透明度。strokeDashStyle: 'solid', // 多边形的边框样式。实线是solid，虚线是dash。strokeWeight: 2, // 多边形的边框线宽。cursor: 'crosshair', // 鼠标在多边形内的光标样式。clickable: true, // 多边形是否可点击。editable: false, // 多边形是否可编辑。visible: true, // 多边形是否可见。zIndex: 1000 // 多边形的zIndex值。})},// 创建矩形叠加层mapGroundOverlay() {var groundOverlay = new qq.maps.GroundOverlay({map: this.map,imageUrl: 'https://mapapi.qq.com/web/lbs/javascriptV2/demo/img/pm.jpg',// 设置显示图片的地图上的矩形区域bounds: new qq.maps.LatLngBounds(new qq.maps.LatLng(24.492828, 118.145804), new qq.maps.LatLng(24.495017, 118.151874)),opacity: 1,clickable: true, // 设置地面覆盖层可响应鼠标事件，默认为truevisible: true // 设置覆盖层可见，默认为true})},// 添加markermapMarker() {var path3 = [// {locat: new qq.maps.LatLng(24.493416, 118.150532), title: '金尚小区'},{locat: new qq.maps.LatLng(24.493474, 118.148719), title: '金尚小区（西北门）'},// {locat: new qq.maps.LatLng(24.495017, 118.151874), title: '金尚小区（北二门）'},{locat: new qq.maps.LatLng(24.495778, 118.145834), title: '唐庄'},]// 设置Marker自定义图标的属性，// size是图标尺寸，该尺寸为显示图标的实际尺寸，// origin是切图坐标，该坐标是相对于图片左上角默认为（0,0）的相对像素坐标，// anchor是锚点坐标，描述经纬度点对应图标中的位置let anchor = new qq.maps.Point(6, 6),size = new qq.maps.Size(24, 24),origin = new qq.maps.Point(0, 0),icon = new qq.maps.MarkerImage('https://mapapi.qq.com/web/lbs/javascriptV2/demo/img/center.gif', size, origin, anchor)// icon = new qq.maps.MarkerImage('../assets/address.png', size, origin, anchor)for (let i = 0; i < path3.length; i++) {var marker = new qq.maps.Marker({map: this.map,icon: icon,title: path3[i].title,position: path3[i].locat,})var label = new qq.maps.Label({map: this.map,content: path3[i].title,position: path3[i].locat,// style: {color:"#f00",fontSize:"16px",fontWeight:"bold"},style: {color: '#000', fontSize: '12px', fontWeight: 'normal'},})}},}}
</script><style scoped>.container {margin: 0;height: 100%;}
</style>

效果图如下：

腾讯地图只显示某一区域，覆盖图，marker自定义图标和文本标注相关推荐

vue高德/腾讯地图只显示某一区域的地图，其他地区不显示
一.高德地图 index.html 页面加上<script type="text/javascript" src="https://webapi.amap.com ...
html背景图片只显示一张图片,img只显示图片一部分或 css设置背景图片只显示图片指定区域(示例代码)...
17:14 2016/3/22 img只显示图片一部分或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片 ...
html如何把图片在背景图一半,img只显示图片一部分或 css设置背景图片只显示图片指定区域...
17:14 2016/3/22 img只显示图片一部分或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片 ...
css 设置背景图一半_img只显示图片一部分或 css设置背景图片只显示图片指定区域...
17:14 2016/3/22 img只显示图片一部分或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片 ...
调用百度地图只显示网格的问题
转自:推酷http://www.tuicool.com/articles/biyeY37 关于安卓调用百度地图只显示网格的问题,楼主也曾为此不知所措,曾怀疑是不是百度SDK的bug,在网上也搜了各种答 ...
百度地图Javascript使用海量点加载数据并自定义图标
** 百度地图Javascript使用海量点加载数据并自定义图标由于数据量较大时使用Marker点在地图上标点会造成浏览器卡死,点聚合的形式可以解决数据量大浏览器卡死问题,但是移除点时点聚合不太好用 ...
高德地图只显示一个省_浅谈当下各种导航软件：高德地图、百度地图、腾讯地图...
浅谈当下各种导航软件:高德地图.百度地图.腾讯地图,之前出门找不到路只能靠问路,现在我们生活中出现了各种各样的导航软件,甚至让用户出现了选择困难症,不知道选择哪一款软件比较号,在这里小编就要给大家来分 ...
高德地图只显示部分区域
直接上代码吧高德地图只能到最大到市级,也就是如果只显示一个县或者区的话只有想其他的办法 <div id="mountNode"></div> <sc ...
中高德地图只显示某一城市_Excel实用知识：从零开始，一步步制作属于你自己的三维演示地图...
说明本文是视频内容的图文整理版. 原版视频可以在文末观看三维地图操作详解这是一份原始表格,点击表内任意一个单元格,使用Ctrl和T,将这张表转换为动态表,点击插入,三维地图. 重命名图层为销售 ...

腾讯地图只显示某一区域，覆盖图，marker自定义图标和文本标注

腾讯地图只显示某一区域，覆盖图，marker自定义图标和文本标注相关推荐

最新文章

热门文章