騰訊地圖，矢量、衛(wèi)星和路況底圖，獲取經(jīng)緯度，mark

騰訊地圖，矢量、衛(wèi)星和路況底圖，獲取經(jīng)緯度，marker軌跡回放

明

先看效果，再看源碼~

地圖：矢量底圖、衛(wèi)星底圖、路況底圖

<!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>創(chuàng)建地圖</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", {
                // 設(shè)置地圖縮放級(jí)別
                zoom: 11, 
                rotation: 353,
                pitch: 73,
                // 地圖底圖，BaseMap目前只支持矢量底圖 （VectorBaseMap） 、衛(wèi)星底圖 （SatelliteBaseMap） 、路況底圖 （TrafficBaseMap） 
                // 可以使用數(shù)組形式實(shí)現(xiàn)多種底圖疊加
                // 默認(rèn)為 VectorBaseMap ，
                baseMap:{
                    //type: "vector"
                    type: "satellite"
                    //type: "traffic"
                },
                // 3D / 2D 顯示模式控制
                viewMode:'2D',
                //設(shè)置地圖中心點(diǎn)坐標(biāo)
                center: new TMap.LatLng(37.87, 112.53),
                adcode: 110101   //  市區(qū)縣級(jí)行政區(qū)劃代碼
            });
        }
    </script>
</body>

</html>

單擊事件獲取經(jīng)緯度

<!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>單擊事件獲取經(jīng)緯度</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", {
                // 設(shè)置地圖縮放級(jí)別
                zoom: 11, 
                rotation: 353,
                pitch: 73,
                baseMap:{
                    //type: "vector"
                    type: "satellite"
                    //type: "traffic"
                },
                // 3D / 2D 顯示模式控制
                viewMode:'2D',
                //設(shè)置地圖中心點(diǎn)坐標(biāo)
                center: new TMap.LatLng(37.87, 112.53),
                adcode: 110101   //  市區(qū)縣級(jí)行政區(qū)劃代碼
            });
            //初始化marker
            var marker=new TMap.MultiMarker({
                map: map,
                styles: {
                // 點(diǎn)標(biāo)記樣式
                marker: new TMap.MarkerStyle({
                    width: 20, // 樣式寬
                    height: 30, // 樣式高
                    anchor: { x: 10, y: 30 }, // 描點(diǎn)位置
                    src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png', // 標(biāo)記路徑
                }),
                },
                geometries: [
                    // 點(diǎn)標(biāo)記數(shù)據(jù)數(shù)組
                    {
                        // 標(biāo)記位置(經(jīng)度，緯度，高度)
                        position: new TMap.LatLng(37.87, 112.53, 134),
                    },
                ],
            });

            //綁定點(diǎn)擊事件
            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軌跡回放

天給大家分享一款超不錯(cuò)的 vue3.js 高性能騰訊地圖組件Vue3Tmap。

vue3-tmap 一個(gè)基于騰訊地圖 JavaScript API GL、TypeScript 封裝適用于 Vue3 的高性能地圖組件庫(kù)。

快速安裝

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 為響應(yīng)式組件，無需關(guān)心復(fù)雜的地圖 api，只需要操作數(shù)據(jù)即可
多框架：包含 react-tmap 和 vue-tmap，且共享同一套類型定義
Type-safe：補(bǔ)充了騰訊地圖 sdk 的類型聲明，組件也使用 TypeScript 開發(fā)，更好的開發(fā)體驗(yàn)
自定義組件：提供開放地圖實(shí)例，可編寫自定義組件或直接調(diào)用地圖原生 api
性能優(yōu)化：統(tǒng)一地圖 api 調(diào)用方式和數(shù)據(jù)監(jiān)聽，防止誤用地圖 api 引起性能問題

非常實(shí)用的一款vue3地圖組件，感興趣的可以去看一看。

最后附上文檔及項(xiàng)目地址

# 文檔地址
https://didi.github.io/vue-tmap/
# 倉(cāng)庫(kù)地址
https://github.com/didi/vue-tmap

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

款生活服務(wù)導(dǎo)航軟件，這款軟件是很多用微信和QQ的用戶能使用的非常便利的導(dǎo)航軟件，能直接跟好友們分享自己的位置，以及規(guī)劃到達(dá)約定地點(diǎn)的最佳路線。免費(fèi)語音導(dǎo)航，為上億用戶提供完美出行服務(wù)。首創(chuàng)步行街景導(dǎo)航，預(yù)覽到真實(shí)的路線，讓用戶們從此不用擔(dān)心道路復(fù)雜、不認(rèn)識(shí)路等問題。

快來體驗(yàn)吧：http://www.downxia.com/downinfo/17375.html

在線咨詢

上一篇：CDR制作鉆石車胎標(biāo)志教程
下一篇：深入Spring Boot (八)：模板引擎使用詳解

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商