腾讯地图，矢量、卫星和路况底图，获取经纬度，mark

腾讯地图，矢量、卫星和路况底图，获取经纬度，marker轨迹回放

明

先看效果，再看源码~

地图：矢量底图、卫星底图、路况底图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>创建地图</title>
    <style type="text/css">
        html, body {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
        #container {
            width: 800px;
            height: 600px;
        }
    </style>
</head>
<script charset="utf-8" src="https://wemapvis.map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<body onload="initMap()">
    <div id="container"></div>
    <script type="text/javascript">
        function initMap() {
            //初始化地图
            var map=new TMap.Map("container", {
                // 设置地图缩放级别
                zoom: 11, 
                rotation: 353,
                pitch: 73,
                // 地图底图，BaseMap目前只支持矢量底图 （VectorBaseMap） 、卫星底图 （SatelliteBaseMap） 、路况底图 （TrafficBaseMap） 
                // 可以使用数组形式实现多种底图叠加
                // 默认为 VectorBaseMap ，
                baseMap:{
                    //type: "vector"
                    type: "satellite"
                    //type: "traffic"
                },
                // 3D / 2D 显示模式控制
                viewMode:'2D',
                //设置地图中心点坐标
                center: new TMap.LatLng(37.87, 112.53),
                adcode: 110101   //  市区县级行政区划代码
            });
        }
    </script>
</body>

</html>

单击事件获取经纬度

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>单击事件获取经纬度</title>
    <style type="text/css">
        html, body {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
        #container {
            width: 800px;
            height: 600px;
        }
    </style>
</head>
<script charset="utf-8" src="https://wemapvis.map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<body onload="initMap()">
    <div id="container"></div>
    <script type="text/javascript">
        function initMap() {
            //初始化地图
            var map=new TMap.Map("container", {
                // 设置地图缩放级别
                zoom: 11, 
                rotation: 353,
                pitch: 73,
                baseMap:{
                    //type: "vector"
                    type: "satellite"
                    //type: "traffic"
                },
                // 3D / 2D 显示模式控制
                viewMode:'2D',
                //设置地图中心点坐标
                center: new TMap.LatLng(37.87, 112.53),
                adcode: 110101   //  市区县级行政区划代码
            });
            //初始化marker
            var marker=new TMap.MultiMarker({
                map: map,
                styles: {
                // 点标记样式
                marker: new TMap.MarkerStyle({
                    width: 20, // 样式宽
                    height: 30, // 样式高
                    anchor: { x: 10, y: 30 }, // 描点位置
                    src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png', // 标记路径
                }),
                },
                geometries: [
                    // 点标记数据数组
                    {
                        // 标记位置(经度，纬度，高度)
                        position: new TMap.LatLng(37.87, 112.53, 134),
                    },
                ],
            });

            //绑定点击事件
            map.on("click",function(evt){
                var lat=evt.latLng.getLat().toFixed(6);
                var lng=evt.latLng.getLng().toFixed(6);
                console.log(lat + "," + lng);
            })
        }
    </script>
</body>

</html>

Marker轨迹回放

天给大家分享一款超不错的 vue3.js 高性能腾讯地图组件Vue3Tmap。

vue3-tmap 一个基于腾讯地图 JavaScript API GL、TypeScript 封装适用于 Vue3 的高性能地图组件库。

快速安装

npm install @map-component/vue-tmap

引入使用

<template>
  <tmap-map
    mapKey="CGABZ-3MH66-6VGST-MEMS3-K6U3V-DGBKA"
    :events="events"
    :center="center"
    :zoom="zoom"
    :doubleClickZoom="doubleClickZoom"
    :control="control"
  >
  </tmap-map>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'Home',
  setup() {
    const center=ref({ lat: 30.290756, lng: 120.074387 });
    const zoom=ref(10);
    const doubleClickZoom=ref(true);
    const print=(e: unknown)=> {
      console.log(e);
    };
    return {
      events: {
        dblclick: print,
      },
      center,
      zoom,
      doubleClickZoom,
      control: {
        scale: {},
        zoom: {
          position: 'bottomRight',
        },
      },
    };
  },
});
</script>

功能特性

文档完善：基于官方文档和框架用法的文档可读性高，组件示例完善
组件化：封装腾讯地图 api 为响应式组件，无需关心复杂的地图 api，只需要操作数据即可
多框架：包含 react-tmap 和 vue-tmap，且共享同一套类型定义
Type-safe：补充了腾讯地图 sdk 的类型声明，组件也使用 TypeScript 开发，更好的开发体验
自定义组件：提供开放地图实例，可编写自定义组件或直接调用地图原生 api
性能优化：统一地图 api 调用方式和数据监听，防止误用地图 api 引起性能问题

非常实用的一款vue3地图组件，感兴趣的可以去看一看。

最后附上文档及项目地址

# 文档地址
https://didi.github.io/vue-tmap/
# 仓库地址
https://github.com/didi/vue-tmap

Okra，今天就先分享到这里了。

款生活服务导航软件，这款软件是很多用微信和QQ的用户能使用的非常便利的导航软件，能直接跟好友们分享自己的位置，以及规划到达约定地点的最佳路线。免费语音导航，为上亿用户提供完美出行服务。首创步行街景导航，预览到真实的路线，让用户们从此不用担心道路复杂、不认识路等问题。

快来体验吧：http://www.downxia.com/downinfo/17375.html

在线咨询

上一篇：CDR制作钻石车胎标志教程
下一篇：深入Spring Boot (八)：模板引擎使用详解

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商