null - 程序员宅基地

Vue2-腾讯地图--地图标记_vue腾讯地图标点-程序员宅基地

腾讯地图–地图标记

前期准备工作在腾讯地图--地图展示 一文中即可查看

带有显示多个标记与图文标记

<template>
  <div class="container">
    <el-button type="primary" @click="MultipleMark">显示多个标记</el-button>
    <el-button type="primary" @click="text">图文标记</el-button>
    <!-- 地图容器 -->
    <div id="map-mark"></div>
  </div>
</template>

<script>
export default {
    
  data(){
    
    return{
    
      map:null,
      longitude:39.916527,//经度
      latitude:116.397128,//纬度
    }
  },
  created(){
    
    
  },
  mounted(){
    
    this.initMap()
  },
  methods:{
    
    initMap(){
    
      this.map = new window.TMap.Map(document.getElementById('map-mark'), {
    
          center: new window.TMap.LatLng(this.longitude, this.latitude),//设置地图中心点坐标
          zoom: 10,   //设置地图缩放级别
          pitch: 43.5,  //设置俯仰角
          rotation: 45    //设置地图旋转角度
      });
      // 标记
      this.mark()
    },
    // 标记
    mark(arr){
    
      var geo = [
        {
    
          // id: '1',
          styleId: 'myStyle',
          position:new window.TMap.LatLng(this.longitude, this.latitude), // 点标记的坐标位置
        }
      ]
      if(arr){
    
        arr.forEach(item=>{
    
          geo.push({
    
            // id: item.id ? item.id + '' : '1',
            styleId: item.styleId ? item.styleId : 'myStyle',  // 指定样式id
            position: new window.TMap.LatLng(item.longitude, item.latitude),  // 点标记的坐标位置
            content: item.text ? item.text : ''
          })
        })
      }
      // 标记
      new window.TMap.MultiMarker({
    
        // 标记的位置
        map: this.map,
        // 设置点标记样式
        styles:{
    
          'myStyle':new window.TMap.MarkerStyle({
    
            //图片样式配置参数
            // src: require('../../assets/tengxun/定位.png'),  //图片路径
            width: 25, //图片宽度（单位为像素，默认为图片原宽度）
            height: 35, //图片高度（单位为像素，默认为图片原高度）
            opacity: 0.9, //图片透明度（默认为1，保持原透明度）
            // faceTo: 'map', //图片保持贴地（默认图片直立朝向屏幕）
            //文字样式配置参数
            size: 16, //文字大小
            color: '#007ACC', //文字颜色
            strokeWidth: 2, //文字描边宽度
            strokeColor: '#fff', //文字描边颜色
            direction: 'top', //文字相对于图片的位置
          }),
        },
        // 点标记数据数组
        geometries: geo
      })
    },
    // 显示多个标记
    MultipleMark(){
    
      var lang = [  // 再加两个坐标(坐标乱写的)
        {
    id:2,longitude:39.994104,latitude:116.287503},
        {
    id:3,longitude:39.954104,latitude:116.357503}
      ]
      this.mark(lang)
    },
    // 图文标记
    text(){
    
      var lang = [  // 再加两个坐标(坐标乱写的)
        {
    id:2,longitude:39.994104,latitude:116.287503,text:'标记点一'},
        {
    id:3,longitude:39.954104,latitude:116.357503,text:'标记点二'}
      ]
      this.mark(lang)
    },
  }
}
</script>

<style>

</style>

运行展示

本文链接：https://blog.csdn.net/qq_56745273/article/details/130210095

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

高频交易及化资策与区_hudson river trading-程序员宅基地

文章浏览阅读406次。转高频交易及量化投资的策略与误区一、高频交易公司和量化投资公司的区别一般来说，高频交易公司和量化投资公司既有联系，又有区别。在美国，人们常说的高频交易公司一般都是自营交易公司，这些公司主要有Getco、Tower Research、Hudson River Trading、SIG、Virtu Financial、Jump Trading、RGM Advisor、Chopper Tradi..._hudson river trading

C语言文件操作相关的函数_c语言与文件处理有关的函数-程序员宅基地

文章浏览阅读865次。文件的打开和关闭文件在读写之前应该先打开文件，在使用结束之后应该关闭文件。在编写程序的时候，在打开文件的同时，都会返回一个FILE*的指针变量指向该文件，也相当于建立了指针和文件的关系。ANSIC 规定使用fopen函数来打开文件，fclose来关闭文件。FILE * fopen ( const char * filename, const char * mode ); int fcl..._c语言与文件处理有关的函数

java 无法读取文件_java 读取文件，无法显示文件内容，如何解决？谢谢。-程序员宅基地

文章浏览阅读1.1k次。从来没见过进行文件读取写入时，在写入中需要随机数的，你读取文件就是从一个地方获取输入流，然后将这个输入流写到别的地方，根本不要随机数。给你一个示例：//copyafiletoanotherfilebyusingFileReader/FileWriterimportjava.io.*;publicclassTFileRead{publicstaticvoidmain(S..._java复制文件文件没有内容显示

vue引入原生高德地图_前端引入原生地图-程序员宅基地

文章浏览阅读556次，点赞2次，收藏3次。由于工作上的需要，今天捣鼓了半天高德地图。如果定制化开发需求不太高的话，可以用vue-amap，这个我就不多说了，详细就看官网 https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install然而我们公司需要英文版的高德，我看vue-amap中好像没有这方面的配置，而且还有一些其他的定制化开发需求，然后就只用原生的高德。其实原生的引入也不复杂，但是有几个坑要填一下。1. index.html注意，引入的高德js一定要放在头部而_前端引入原生地图

ViewGroup重写大法（一）-程序员宅基地

文章浏览阅读104次。本文介绍ViewGroup重写，我们所熟知的LinearLayout，RelativeLayout，FrameLayout等等，所有的容器类都是ViewGroup的子类，ViewGroup又继承View。我们在熟练应用这些现成的系统布局的时候可能有时候就不能满足我们自己的需求了，这是我们就要自己重写一个容器来实现效果。ViewGroup重写可以达到各种效果，下面写一个简单的重写一个Vi..._viewgroup 重写

Stm32学习笔记，3万字超详细_stm32笔记-程序员宅基地

文章浏览阅读1.8w次，点赞279次，收藏1.5k次。本文章主要记录本人在学习stm32过程中的笔记，也插入了不少的例程代码，方便到时候CV。绝大多数内容为本人手写，小部分来自stm32官方的中文参考手册以及网上其他文章；代码部分大多来自江科大和正点原子的例程，注释是我自己添加；配图来自江科大/正点原子/中文参考手册。笔记内容都是平时自己一点点添加，不知不觉都已经这么长了。其实每一个标题其实都可以发一篇，但是这样搞太琐碎了，所以还是就这样吧。_stm32笔记

随便推点

Java从零开始第10.5讲面向对象的习题课_编写一个测试类booktest,创建几个book对象,并打印它们的字符串表示,同时判断-程序员宅基地

文章浏览阅读197次。面向对象的习题课类的定义员工类Employee求和类Sum类与对象书籍类BookBook类的测试类BookTest异常能扩容的MyList类剪刀石头布转载请注明出处在这一讲中我会给出一些关于面向对象部分的习题，同样希望在不看答案的情况下自己编写，即使看过了答案，也要能够在不看答案的情况下写出来。类的定义员工类Employee定义在同一个公司工作的Employee类，要求其中含有属性：员工的名字，员工的年龄，员工的爱好，员工的公司名（注意当公司更名时，所有员工的公司名都需要更名），工作地点默认为中国（_编写一个测试类booktest,创建几个book对象,并打印它们的字符串表示,同时判断

Spark伪分布安装（依赖Hadoop）_下载spark的hadoop依赖-程序员宅基地

文章浏览阅读6.7k次，点赞7次，收藏14次。一、伪分布安装Spark安装环境：Ubuntu 14.04 LTS 64位+Hadoop2.7.2+Spark2.0.0+jdk1.7.0_761、安装jdk1.7（1）下载jdk-7u76-linux-x64.tar.gz；（2）解压jdk-7u76-linux-x64.tar.gz，并将其移动到/opt/java/jdk路径下（自建）；命令：tar -zxvf jdk-_下载spark的hadoop依赖

TCP/IP 是用于因特网 (Internet) 的通信协议_广泛应用在internet中的tcp/ip的网络管理主要使用的是 ____协议。 (填空题)-程序员宅基地

文章浏览阅读6.7k次。计算机通信协议计算机通信协议是对那些计算机必须遵守以便彼此通信的规则的描述。什么是 TCP/IP？TCP/IP 是供已连接因特网的计算机进行通信的通信协议。TCP/IP 指传输控制协议/网际协议 (Transmission Control Protocol / Internet Protocol)。TCP/IP 定义了电子设备（比如计算机）如何连入因特网，以及数据如何在它们之间传输的标准..._广泛应用在internet中的tcp/ip的网络管理主要使用的是 ____协议。 (填空题)

java中的一些经典算法_java中temsize+=1运算-程序员宅基地

文章浏览阅读360次。转自：落尘曦的博客：http://blog.csdn.net/qq_23994787 原文链接：https://blog.csdn.net/qq_23994787/article/details/77951244#_Toc9101经典算法的Java实现（1）河内塔问题： 42（2）费式数列 43（3）巴斯卡（Pascal）三角形 44（4）蒙地卡罗法求 PI 45（..._java中temsize+=1运算

Linux习题简答题_linux中，第一个普通用户的uid为____。-程序员宅基地

文章浏览阅读3.1k次，点赞6次，收藏27次。第一章Q1 简述Linux系统的应用领域 Linux服务器；嵌入式Linux系统；软件开发平台；桌面应用Q2 简述Linux系统的特点开放性、多用户、多任务、良好的用户界面、设备独立性、丰富的网络功能、可靠的系统安全、良好的可移植性Q3 简述Linux系统的组成内核、shell、文件系统、应用程序Q4 简述主流的Linux发行版本 Redhat SUSE Oracle CentOS Ubuntu Debian Mandriva Gentoo Slackware Fe_linux中，第一个普通用户的uid为____。

【路径规划】基于matlab粒子群算法新型概率密度无人机作战路径规划【含Matlab源码 2620期】_已知目标出现概率热图matlab无人机路径规划-程序员宅基地

文章浏览阅读183次。粒子群算法新型概率密度无人机作战路径规划完整的代码，方可运行；可提供运行操作视频！适合小白！_已知目标出现概率热图matlab无人机路径规划