精华内容
下载资源
问答
  • vue接入腾讯地图
    2021-11-06 15:27:45

      在public文件下index.html 引入

    <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=D5VBZ-C3EHW-L6IRB-OOCSD-5HV3O-MOB2M"></script>

    定义两个对象   

    map: null,
    marker: null,

    地图初始化

        //地图初始化
        initMap() {
            //初始化经纬度
          let local = ["39.98412", "116.307484"];
          let map = new TMap.Map(document.getElementById("container"), {
            center: new TMap.LatLng(local[0], local[1]), //设置地图中心点坐标
            zoom: 13, //设置地图缩放级别
          });
          //地图被点击时调用
          map.on("click", this.clickHandler);
          //标记图标
          this.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(local[0], local[1]),
              },
            ],
          });
    
          this.map = map;
        },
    

    地图点击方法

        clickHandler(evt) {
          var lat = evt.latLng.getLat().toFixed(6);
          var lng = evt.latLng.getLng().toFixed(6);
          if (this.marker) {
            this.marker.setMap(null);
            this.marker = null;
          }
          this.marker = new TMap.MultiMarker({
            map: this.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(lat, lng),
              },
            ],
          });
    
          console.log("您点击的的坐标是:" + lat + "," + lng);
        },

     

    更多相关内容
  • VUE接入腾讯地图

    千次阅读 2022-06-06 17:02:34
    vue接入腾讯地图(一)【点击事件】 - 腾讯位置服务 -

    1.首先去官网申请一个个人使用的key

    腾讯官网地址:腾讯位置服务 - 立足生态,连接未来

     2.

    //先在vue的index.html里面引入腾讯地图包
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=yourkey"></script>
    <template>
        <div>
            <div id="container" style="width:600px;height:500px;"></div>
        </div>
    </template>
    
    <script>
        export default{
            mounted() {
                this.init();
            },
            methods:{
                init() {
                    //步骤:定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
                    //自己设置地图中心点
                    var myLatlng = new qq.maps.LatLng(39.916527,116.397128);
                    //定义工厂模式函数
                    var myOptions = {
                      zoom: 8,               //设置地图缩放级别
                      center: myLatlng,      //设置中心点样式
                      mapTypeId: qq.maps.MapTypeId.ROADMAP  //设置地图样式详情参见MapType
                    }
                    //获取dom元素添加地图信息
                    var map = new qq.maps.Map(document.getElementById("container"), myOptions);
                }
            }
        }
    </script>

    效果图

    3.添加点击事件

    • 添加点击事件 qq.maps.event.addListener(map, 'click', function(event) { alert("你点击了地图"); });

    • 点击事件中获取经度this.longitude = event.latLng.getLat();

    • 点击事件中获取纬度this.latitude = event.latLng.getLng();

    //先在vue的index.html里面引入腾讯地图包
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=yourkey"></script>
    <template>
        <div>
            <div id="container" style="width:600px;height:500px;"></div>
        </div>
    </template>
    
    <script>
    export default{
            name:'news',
            data() {
                return {
                    longitude:39.916527,//经度
                    latitude:116.397128//纬度
                }
            },
            methods:{
                init() {
                    //步骤:定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
                    //设置地图中心点
                    var myLatlng = new qq.maps.LatLng(this.longitude,this.latitude);
                    //定义工厂模式函数
                    var myOptions = {
                      zoom: 8,               //设置地图缩放级别
                      center: myLatlng,      //设置中心点样式
                      mapTypeId: qq.maps.MapTypeId.ROADMAP  //设置地图样式详情参见MapType
                    }
                    //获取dom元素添加地图信息
                    var map = new qq.maps.Map(document.getElementById("container"), myOptions);
                    //给地图添加点击事件
                    //并获取鼠标点击的经纬度
                    qq.maps.event.addListener(map, 'click', function(event) {
                        this.longitude = event.latLng.getLat();
                        this.latitude = event.latLng.getLng();
                        alert("经度:"+this.longitude+","+"纬度:"+this.latitude);
                    });
                }
            },
            mounted() {
                this.init();
            }
        }
    </script>

    效果展示

    如需获取地图图标:如百度地图为例

    点击最下方地图开发平台,选择开发文档,再选择坐标拾取器即可。

     

     转载于:vue接入腾讯地图(一)【点击事件】 - 腾讯位置服务 - 博客园

    以上内容转载自前端来入坑的文章《vue使用腾讯地图(一)》

    链接:https://www.jianshu.com/p/130cdbd07394

    来源:简书

    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    展开全文
  • vue接入腾讯地图 最近在使用vue接入腾讯地图也是饱受折磨,因为本身对vue就不是很会,借此机会能好好学学vue。里面代码可能有的地方会有不妥之处,后面会改进的一、接入腾讯地图首先在马上开始接入 - 入门指南 | ...

    vue接入腾讯地图

    最近在使用vue接入腾讯地图也是饱受折磨,因为本身对vue就不是很会,借此机会能好好学学vue

    里面代码可能有的地方会有不妥之处,后面会改进的

    一、接入腾讯地图

    首先在

    马上开始接入 - 入门指南 | 腾讯位置服务​lbs.qq.com

    ,这里面申请一个key

    效果图如下

    43c422b6741ab61acc5dd1a4100d8b90.png

    1、在vue里面的index.html中引用地图

    <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=你申请的key"></script>
    <!--定位-->
    <script src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>

    2、在vue页面中写如下代码

    里面代码包含了,当前定位信息

    <template>
      <div class="index">
        <div id="container"></div>
      </div>
    </template>
    ​
    <script>
    let map, marker, polygon, drawingManager, lngLat,ap;
    export default {
        name: 'Index',
        data() {
            return {
                position:[
                    { 
                    longitude: 0,//经度
                    latitude:0,//纬度
                    city:''
                    }
                ] 
            };
        },
        methods:{
            /**
             * /定位获得当前位置信息
             */
            getMyLocation() {
                var geolocation = new qq.maps.Geolocation("你申请的key", "名字");
                geolocation.getLocation(this.showPosition, this.showErr);
            },
            showPosition(position) {
                console.log(position);
                this.position.latitude = position.lat;
                this.position.longitude = position.lng;
                this.position.city = position.city;
                this.setMapData();
            },
            //定位失败再请求定位,测试使用
            showErr() {
                console.log("定位失败,请重试!");
                this.getMyLocation();
            },
    ​
            /**
             * 位置信息在地图上展示
             */
            setMapData() {
                var myLatlng = new qq.maps.LatLng(this.position.latitude, this.position.longitude);
                var myOptions = {
                    zoom: 16, 
                    center: myLatlng, 
                    mapTypeId: qq.maps.MapTypeId.ROADMAP  
                }
                //获取dom元素添加地图信息
                map = new qq.maps.Map(document.getElementById("container"), myOptions)
    ​
                //给定位的位置添加图片标注
                marker = new qq.maps.Marker({
                    position: myLatlng,
                    map: map,
                    draggable: true //允许鼠标拖动
                })
    ​
            },
        },
    ​
        mounted() {
            this.getMyLocation();
        }
    }
    </script>
    ​
    <style>
    #container{
        width: 100%;
        height: 100%;
        position: absolute;
    }
    </style>
    

    二、鼠标点击地图,获得相应位置信息

    vuemethods中写入此方法,再在setMapData()方法中调用此方法即可,具体情况可根据自己需求你来写,我这里是需要用这个点击鼠标获取位置信息借此跳转页面来测试其他功能

     methods:{          
        /**
             * 鼠标点击获取标记位置事件
             */
            mouseClick () {
                const _this = this 
                qq.maps.event.addListener(map, 'click', function (event) {
                    if(!marker) {
                        marker=new qq.maps.Marker({
                            position: event.latLng,
                            map:map
                        })
                        return
                    }
                    marker.setPosition(event.latLng) 
                    _this.position.latitude = event.latLng.getLat();
                    _this.position.longitude = event.latLng.getLng();
                })
            },
    },

    三、在地图上搜索地点

    如图

    801f1932438b4ac1b76e76eac28a640f.png

    vue中的index.html中加入

    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=你的key&libraries=place"></script>

    这一步很关键,因为之前我看是加入了这个cdn,但是没注意到后面还拼了个libraries=place这个,导致一直搜索不出来

    然后在vuemethod加入如下代码,再在setMapData()方法中调用此方法即可

    template中加入如下代码

    <el-input v-model="input" type="text" id="place" placeholder="请输入地点"></el-input>
            /**搜索地点 */
            search(){
                ap = new window.qq.maps.place.Autocomplete(document.getElementById('place'));
                var keyword = "";
                //调用Poi检索类。用于进行本地检索、周边检索等服务。
                var searchService = new window.qq.maps.SearchService({
                    complete : function(results){
                    if(results.type === "CITY_LIST") {
                            searchService.setLocation(results.detail.cities[0].cityName);
                            searchService.search(keyword);
                            return;
                        }
                        var pois = results.detail.pois;
                        var latlngBounds = new window.qq.maps.LatLngBounds();
                        for(var i = 0,l = pois.length;i < l; i++){
                            var poi = pois[i];
                            latlngBounds.extend(poi.latLng);  
                            var marker = new window.qq.maps.Marker({
                                map:map,
                                position: poi.latLng
                            });
    ​
                            marker.setTitle(poi.name);
                        }
                        map.fitBounds(latlngBounds);
                    }
                });
                //添加监听事件
                window.qq.maps.event.addListener(ap, "confirm", function(res){
                    keyword = res.value;
                    searchService.search(keyword);
                });
            }

    四、绘制围栏

    这部分借鉴了

    在vue中使用腾讯地图绘制围栏功能_soberbloke的博客-CSDN博客​blog.csdn.net
    e12a049be97b1d053d1dd26a96ff9404.png

    vue中的index.html中加入

    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=你的key&libraries=drawing"></script>

    注意:到后面还拼了个libraries=drawing

    目前此功能正在完善,但是具体的思路有了。代码部分有个问题,就是在drawingManager.setMap(map)这里说我传入的map值或者类型不对,但是我传入的map其实是没有为题的。所有正在完善。提供代码,提供个思路

    这部分在vue中所有代码如下:

    <template>
      <div class="addpolygon">
        <div id="container">
            <!-- <div class="mapBtn">
           <el-button size="small" type="danger" @click="clearOverlays()">清除</el-button>
            <el-button size="small" type="primary" @click="sendLngLat">确认</el-button>
            <el-button size="small" type="primary" @click="sendMsg">返回</el-button>
            </div> -->
        </div>
      </div>
    </template>
    ​
    <script>
    import { Notification } from 'element-ui';
    let  marker, polygon, drawingManager, lngLat,ap, map;
    let path = [];// 设置回显数据参数
    let overlaysArray = []
    import axios from 'axios'
    ​
    export default {
        name: 'addpolygon',
        data() {
            return {
                position:[
                    { 
                    longitude: 0,//经度
                    latitude:0,//纬度
                    city:''
                    }
                ],
                 polygonPath: [
                    {
                    provider: '',
                    polygonsVOS: [
                        {
                            lat: '',
                            lng: '',
                            q: '',
                            p: ''
                        }
                        ]
                    }
                ],
                 lngLatData: [],
                notify:'',
                input:''
            };
        },
        methods:{
            // 子组件给父组件传值(确认按钮)
            sendLngLat() {
                if (lngLat == undefined) {
                    lngLat = path;
                }
                const h = this.$createElement;
            },
    ​
            /**
             * 定位获得当前位置信息
             */
            getMyLocation() {
                var geolocation = new window.qq.maps.Geolocation("你的key", "名字");
                geolocation.getLocation(this.showPosition, this.showErr);
            },
            showPosition(position) {
                console.log(position);
                this.position.latitude = position.lat;
                this.position.longitude = position.lng;
                this.position.city = position.city;
                this.setMapData();
            },
            //定位失败再请求定位,测试使用
            showErr() {
                console.log("定位失败,请重试!");
                this.getMyLocation();
            },
    ​
            /**
             * 位置信息在地图上展示
             */
            setMapData() {
                var myLatlng = new window.qq.maps.LatLng(this.position.latitude, this.position.longitude);
                console.log("当前位置:"+this.position.latitude, this.position.longitude)
                var myOptions = {
                    zoom: 16, 
                    center: myLatlng, 
                    mapTypeId: window.qq.maps.MapTypeId.ROADMAP  
                }
                //获取dom元素添加地图信息
                map = new window.qq.maps.Map(document.getElementById("container"), myOptions)
    ​
                console.log("初始定义map:" + map)
    ​
                //给定位的位置添加图片标注
                marker = new window.qq.maps.Marker({
                    position: myLatlng,
                    map: map
                })
    ​
                /**绘制围栏 */
                this.addpolygon();
            },
            
            /**
             * 绘制地图围栏
             */
            addpolygon() {
                const _this = this
                drawingManager = new window.qq.maps.drawing.DrawingManager({
                    drawingMode: window.qq.maps.drawing.OverlayType.null, // 默认选中绘制方式
                    drawingControl: true,
                    drawingControlOptions: {
                        position: window.qq.maps.ControlPosition.TOP_CENTER,
                        // 表头显示区域
                        drawingModes: [
                            window.qq.maps.drawing.OverlayType.MARKER,
                            window.qq.maps.drawing.OverlayType.CIRCLE,
                            window.qq.maps.drawing.OverlayType.POLYGON,
                            window.qq.maps.drawing.OverlayType.POLYLINE,
                            window.qq.maps.drawing.OverlayType.RECTANGLE
                            ]
                    },
                    markerOptions: {
                        visible: false
                    },
                    // 多边形样式
                    polygonOptions: {
                        editable: true,
                        strokeColor: new window.qq.maps.Color(202, 67, 58, 0.8),
                        fillColor: new window.qq.maps.Color(202, 67, 58, 0.1),
                        clickable: false
                    },
                    // 圆形样式
                    circleOptions: {
                        fillColor: new window.qq.maps.Color(255, 208, 70, 0.3),
                        strokeColor: new window.qq.maps.Color(88, 88, 88, 1),
                        strokeWeight: 3,
                        clickable: false
                    }
                });
    ​
                drawingManager.setMap(map);
                window.qq.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
                    // clearOverlays(overlaysArray)
                    lngLat = [];
                    overlaysArray.push(event.overlay);
                    for (const item of event.overlay.getPath().elems) {
                        const lng = item.getLng();
                        const lat = item.getLat();
    ​
                        lngLat.push({
                        lat: lat,
                        lng: lng
                        });
                    }
    ​
                    console.log("绘图后获得的:"+lngLat); // 获得相应的经纬度值
                });
            },
        },
        mounted() {
            this.getMyLocation()   
        }
    }
    </script>
    ​
    <style>
    #container{
        width: 84%;
        height: 87%;
        position: absolute;
    }
    .mapBtn {
          position: absolute;
          top: 20px;
          right: 500px; 
          z-index: 999;
        }
    #place{
        position: absolute;
        top: 20px;
        width: 40%;
        right:10px;
        z-index:999
    }
    </style>
    

    后面绘制地图的代码部分如果我处理这个部分,应该是可以将绘制好的围栏信息传入后台

    五、显示后台数据库中的所有地图围栏信息

    在显示围栏这部分,出了个失误一直没发现,知道最后整合的时候才发现的问题。就是一开始是在mounted中调用的查询全部围栏的方法getAllPolygons() 第一次加载的时候没有问题,但是我从这个页面出去然后回到这个页面的时候,加载的围栏就会消失。这个问题是vue中加载顺序导致的。

    后来我直接在加载模板的时候就调用这个方法最后成功解决这个办法。

    如图所示

    10b6f5e91b00922a6353c6e20d8d19fb.png

    这部分显示围栏,并不是显示单一围栏。而是显示数据库中存入的所有围栏

    request.js 部分代码如下

    const url = 'http://127.0.0.1:8081'; // 开发
    export default {url}
    

    在显示地图围栏这部分,前提是你的后台提供了这部分的功能接口

    <template>
        <div class="showpolygon">
             <div id="container"></div>
        </div>
    </template>
    ​
    <script>
    import { Notification } from 'element-ui';
    let map, marker, polygon, drawingManager, lngLat,ap;
    let path = [];// 设置回显数据参数
    import url from '@/request';
    import axios from 'axios'
    ​
    export default {
        name: "showpolygon",
            data() {
            return {
                position:[
                    { 
                    longitude: 0,//经度
                    latitude:0,//纬度
                    city:''
                    }
                ],
                 polygonPath: [
                    {
                    provider: '',
                    polygonsVOS: [
                        {
                            lat: '',
                            lng: '',
                            q: '',
                            p: ''
                        }
                        ]
                    }
                ],
                markersArray: [],
                notify:'',
                input:''
            };
        },
        methods:{
            /**
             *定位获得当前位置信息
             */
            getMyLocation() {
                var geolocation = new window.qq.maps.Geolocation("你的key", "名字");
                geolocation.getLocation(this.showPosition, this.showErr);
            },
            showPosition(position) {
                console.log(position);
                this.position.latitude = position.lat;
                this.position.longitude = position.lng;
                this.position.city = position.city;
                this.setMapData();
            },
            //定位失败再请求定位,测试使用
            showErr() {
                console.log("定位失败,请重试!");
                this.getMyLocation();
            },
    ​
            /**
             * 位置信息在地图上展示
             */
            setMapData() {
                var myLatlng = new qq.maps.LatLng(this.position.latitude, this.position.longitude);
                console.log("当前位置:"+this.position.latitude, this.position.longitude)
                var myOptions = {
                    zoom: 16, 
                    center: myLatlng, 
                    mapTypeId: qq.maps.MapTypeId.ROADMAP  
                }
                //获取dom元素添加地图信息
                map = new qq.maps.Map(document.getElementById("container"), myOptions)
    ​
                //给定位的位置添加图片标注
                marker = new qq.maps.Marker({
                    position: myLatlng,
                    map: map,
                })
                
                //查询所有后台围栏
                this.getAllPolygons()
                
            },
    ​
            /** 
             * 获取所有围栏
            */
            getAllPolygons(){
                const _this = this;
                axios.get(url.url + "/v1/polygons/findAll").then(function (response) {
                    _this.polygonPath = response.data
                    _this.showArrayPolygon()
                })
                .catch(function (error) {
                    console.error(error);
                });
            },
    ​
            /**循环调用显示围栏方法 */
            showArrayPolygon(){
                const _this = this
                for (const polygonpath of _this.polygonPath) {
                    path = []
                    for (const polygonsvos of polygonpath.polygonsVOS) {
                        path.push(new qq.maps.LatLng(polygonsvos.lat, polygonsvos.lng))
                    }
                    _this.showpolygons(path)
                }
            },
            /**
             * 显示围栏
             */
            showpolygons(path) {
                const _this = this
                polygon = new qq.maps.Polygon({
                    map: map,
                    strokeColor: new qq.maps.Color(202, 67, 58, 0.8),
                    fillColor: new qq.maps.Color(202, 67, 58, 0.1)
                });
                polygon.setPath(path);
            },
        },
    ​
        mounted() {
            this.getMyLocation();
        }
    }
    </script>
    ​
    <style>
    #container{
        width: 100%;
        height: 100%;
        position: absolute;
    }
    #place{
        position: absolute;
        top: 20px;
        width: 40%;
        right:10px;
        z-index:999
    }
    </style>
    

    六、判断当前位置在不在围栏中

    如图所示

    b37077bfe9cad467d49d689a66d469d0.png

    这部分的功能主要是,获取当前位置并判断当前位置在不在地图中的围栏中,如果在则跳转页面。不在则显示不在围栏中的信息

    request.js 部分代码如下

    const url = 'http://127.0.0.1:8081'; // 开发
    export default {url}
    

    在显示地图围栏这部分,前提是你的后台提供了这部分的功能接口

    <template>
      <div class="index">
        <div id="container"></div>
      </div>
    </template>
    ​
    <script>
    import { Notification } from 'element-ui';
    let map, marker, polygon, drawingManager, lngLat,ap;
    let path = [];// 设置回显数据参数
    import url from '@/request';
    import axios from 'axios'
    ​
    export default {
        name: 'Index',
        data() {
            return {
                position:[
                    { 
                    longitude: 0,//经度
                    latitude:0,//纬度
                    city:''
                    }
                ],
                 polygonPath: [
                    {
                    provider: '',
                    polygonsVOS: [
                        {
                            lat: '',
                            lng: '',
                            q: '',
                            p: ''
                        }
                        ]
                    }
                ],
                lngLatData: [],
                notify:'',
                input:''
            };
        },
        methods:{
    ​
            /**
             * //定位获得当前位置信息
             */
            getMyLocation() {
                var geolocation = new qq.maps.Geolocation("你的key", "名字");
                geolocation.getLocation(this.showPosition, this.showErr);
            },
            showPosition(position) {
                console.log(position);
                this.position.latitude = position.lat;
                this.position.longitude = position.lng;
                this.position.city = position.city;
                this.setMapData();
            },
            //定位失败再请求定位,测试使用
            showErr() {
                console.log("定位失败,请重试!");
                this.getMyLocation();
            },
    ​
            /**
             * 位置信息在地图上展示
             */
            setMapData() {
                var myLatlng = new qq.maps.LatLng(this.position.latitude, this.position.longitude);
                console.log("当前位置:"+this.position.latitude, this.position.longitude)
                var myOptions = {
                    zoom: 16, 
                    center: myLatlng, 
                    mapTypeId: qq.maps.MapTypeId.ROADMAP  
                }
                //获取dom元素添加地图信息
                map = new qq.maps.Map(document.getElementById("container"), myOptions)
    ​
                console.log("初始定义map:" + map)
    ​
                //给定位的位置添加图片标注
                marker = new qq.maps.Marker({
                    position: myLatlng,
                    map: map,
                    draggable: true
                })
                this.mouseClick()
    ​
                //获取围栏信息
                this.getAllPolygons()
                
                this.existsPolygon();
            },
    ​
            /**
             * 鼠标点击获取标记位置事件
             */
            mouseClick () {
                const _this = this 
                qq.maps.event.addListener(map, 'click', function (event) {
                    if(!marker) {
                        marker=new qq.maps.Marker({
                            position: event.latLng,
                            map:map
                        })
                        return
                    }
                    marker.setPosition(event.latLng) 
                    console.log("鼠标点击位置:"+event.latLng)
                    _this.position.latitude = event.latLng.getLat();
                    _this.position.longitude = event.latLng.getLng();
                    _this.existsPolygon();
                })
            },
    ​
            /** 
             * 获取所有围栏
            */
            getAllPolygons(){
                const _this = this;
                axios.get(url.url + "/v1/polygons/findAll").then(function (response) {
                    _this.polygonPath = response.data
                    console.log("获取所有围栏信息:"+_this.polygonPath)
                    _this.showArrayPolygon()
                })
                .catch(function (error) {
                    console.error(error);
                });
            },
    ​
            /**循环调用显示围栏方法 */
            showArrayPolygon(){
                const _this = this
                for (const polygonpath of _this.polygonPath) {
                    path = []
                    for (const polygonsvos of polygonpath.polygonsVOS) {
                        path.push(new qq.maps.LatLng(polygonsvos.lat, polygonsvos.lng))
                    }
                    _this.showpolygons(path)
                }
            },
            /**
             * 显示围栏
             */
            showpolygons(path) {
                const _this = this
                polygon = new qq.maps.Polygon({
                    map: map,
                    strokeColor: new qq.maps.Color(202, 67, 58, 0.8),
                    fillColor: new qq.maps.Color(202, 67, 58, 0.1)
                });
                polygon.setPath(path);
            },
            
            /**
             * 当前位置是否在围栏中
             */
            existsPolygon(){
                const _this = this;
                // console.log("当前位置:"+ _this.position.latitude,_this.position.longitude)
    ​
                axios.post(url.url + "/v1/polygons/existPolygons", {
                    lng: _this.position.longitude,  //如果改为在getMyLocation中调用该方法,该位置应该变为 obj.longitude和obj.latitude
                    lat: _this.position.latitude,
                })
                .then(function (response) {
                    // response.data以http or https开头,打开支付页面 
                    if(response.data.indexOf("http") == 0){
                         window.location.href = response.data;
                    }else{
                        _this.$notify({
                        title: '定位失败',
                        message: '经度: '+ _this.position.longitude + ", 纬度:" + _this.position.latitude + "," + "信息:" + response.data,
                        type: 'success'
                    })
                    }
                })
                .catch(function (error) {
                    console.error(error);
                });
            },
        },
    ​
        mounted() {
            this.getMyLocation();
        }
    }
    </script>
    ​
    <style>
    #container{
        width: 100%;
        height: 100%;
        position: absolute;
    }
    </style>
    ​
    

    结语

    整个接入完成之后是将这个地图功能全部整合到另一个vue写的后台管理系统中。整合过程踩了很多坑。

    整个功能部分是在vue2.x的环境中写好的,但是后台管理是vue3.x所以出了一些问题

    一开始接入的时候new qq.maps. 这个位置所有new 的qq.maps都出错了,然后网上百度了一番,找到了个解决办法,就是 new window.qq.maps 在qq的前面加上window就没问题了。

    项目代码部分有问题 ,可以联系我。

    展开全文
  • vue接入腾讯地图

    2021-01-12 18:22:36
    vue接入腾讯地图最近在使用vue接入腾讯地图也是饱受折磨,因为本身对vue就不是很会,借此机会能好好学学vue。里面代码可能有的地方会有不妥之处,后面会改进的一、接入腾讯地图首先在马上开始接入 - 入门指南 | 腾讯...

    vue接入腾讯地图

    最近在使用vue接入腾讯地图也是饱受折磨,因为本身对vue就不是很会,借此机会能好好学学vue。

    里面代码可能有的地方会有不妥之处,后面会改进的

    一、接入腾讯地图

    首先在马上开始接入 - 入门指南 | 腾讯位置服务​lbs.qq.com

    ,这里面申请一个key

    效果图如下

    1、在vue里面的index.html中引用地图

    2、在vue页面中写如下代码

    里面代码包含了,当前定位信息

    let map, marker, polygon, drawingManager, lngLat,ap;

    export default {

    name: 'Index',

    data() {

    return {

    position:[

    {

    longitude: 0,//经度 latitude:0,//纬度 city:''

    }

    ]

    };

    },

    methods:{

    /*** /定位获得当前位置信息*/

    getMyLocation() {

    var geolocation = new qq.maps.Geolocation("你申请的key", "名字");

    geolocation.getLocation(this.showPosition, this.showErr);

    },

    showPosition(position) {

    console.log(position);

    this.position.latitude = position.lat;

    this.position.longitude = position.lng;

    this.position.city = position.city;

    this.setMapData();

    },

    //定位失败再请求定位,测试使用 showErr() {

    console.log("定位失败,请重试!");

    this.getMyLocation();

    },

    /*** 位置信息在地图上展示*/

    setMapData() {

    var myLatlng = new qq.maps.LatLng(this.position.latitude, this.position.longitude);

    var myOptions = {

    zoom: 16,

    center: myLatlng,

    mapTypeId: qq.maps.MapTypeId.ROADMAP

    }

    //获取dom元素添加地图信息 map = new qq.maps.Map(document.getElementById("container"), myOptions)

    //给定位的位置添加图片标注 marker = new qq.maps.Marker({

    position: myLatlng,

    map: map,

    draggable: true //允许鼠标拖动 })

    },

    },

    mounted() {

    this.getMyLocation();

    }

    }

    #container{

    width: 100%;

    height: 100%;

    position: absolute;

    }

    二、鼠标点击地图,获得相应位置信息

    在vue的methods中写入此方法,再在setMapData()方法中调用此方法即可,具体情况可根据自己需求你来写,我这里是需要用这个点击鼠标获取位置信息借此跳转页面来测试其他功能

    methods:{

    /*** 鼠标点击获取标记位置事件*/

    mouseClick () {

    const _this = this

    qq.maps.event.addListener(map, 'click', function (event) {

    if(!marker) {

    marker=new qq.maps.Marker({

    position: event.latLng,

    map:map

    })

    return

    }

    marker.setPosition(event.latLng)

    _this.position.latitude = event.latLng.getLat();

    _this.position.longitude = event.latLng.getLng();

    })

    },

    },

    三、在地图上搜索地点

    如图

    在vue中的index.html中加入

    这一步很关键,因为之前我看是加入了这个cdn,但是没注意到后面还拼了个libraries=place这个,导致一直搜索不出来

    然后在vue的method加入如下代码,再在setMapData()方法中调用此方法即可

    template中加入如下代码

    /**搜索地点 */

    search(){

    ap = new window.qq.maps.place.Autocomplete(document.getElementById('place'));

    var keyword = "";

    //调用Poi检索类。用于进行本地检索、周边检索等服务。

    var searchService = new window.qq.maps.SearchService({

    complete : function(results){

    if(results.type === "CITY_LIST") {

    searchService.setLocation(results.detail.cities[0].cityName);

    searchService.search(keyword);

    return;

    }

    var pois = results.detail.pois;

    var latlngBounds = new window.qq.maps.LatLngBounds();

    for(var i = 0,l = pois.length;i < l; i++){

    var poi = pois[i];

    latlngBounds.extend(poi.latLng);

    var marker = new window.qq.maps.Marker({

    map:map,

    position: poi.latLng

    });

    marker.setTitle(poi.name);

    }

    map.fitBounds(latlngBounds);

    }

    });

    //添加监听事件

    window.qq.maps.event.addListener(ap, "confirm", function(res){

    keyword = res.value;

    searchService.search(keyword);

    });

    }

    四、绘制围栏

    这部分借鉴了在vue中使用腾讯地图绘制围栏功能_soberbloke的博客-CSDN博客​blog.csdn.net

    在vue中的index.html中加入

    注意:到后面还拼了个libraries=drawing

    目前此功能正在完善,但是具体的思路有了。代码部分有个问题,就是在drawingManager.setMap(map)这里说我传入的map值或者类型不对,但是我传入的map其实是没有为题的。所有正在完善。提供代码,提供个思路

    这部分在vue中所有代码如下:

    import { Notification } from 'element-ui';

    let marker, polygon, drawingManager, lngLat,ap, map;

    let path = [];// 设置回显数据参数let overlaysArray = []

    import axios from 'axios'

    export default {

    name: 'addpolygon',

    data() {

    return {

    position:[

    {

    longitude: 0,//经度 latitude:0,//纬度 city:''

    }

    ],

    polygonPath: [

    {

    provider: '',

    polygonsVOS: [

    {

    lat: '',

    lng: '',

    q: '',

    p: ''

    }

    ]

    }

    ],

    lngLatData: [],

    notify:'',

    input:''

    };

    },

    methods:{

    // 子组件给父组件传值(确认按钮) sendLngLat() {

    if (lngLat == undefined) {

    lngLat = path;

    }

    const h = this.$createElement;

    },

    /*** 定位获得当前位置信息*/

    getMyLocation() {

    var geolocation = new window.qq.maps.Geolocation("你的key", "名字");

    geolocation.getLocation(this.showPosition, this.showErr);

    },

    showPosition(position) {

    console.log(position);

    this.position.latitude = position.lat;

    this.position.longitude = position.lng;

    this.position.city = position.city;

    this.setMapData();

    },

    //定位失败再请求定位,测试使用 showErr() {

    console.log("定位失败,请重试!");

    this.getMyLocation();

    },

    /*** 位置信息在地图上展示*/

    setMapData() {

    var myLatlng = new window.qq.maps.LatLng(this.position.latitude, this.position.longitude);

    console.log("当前位置:"+this.position.latitude, this.position.longitude)

    var myOptions = {

    zoom: 16,

    center: myLatlng,

    mapTypeId: window.qq.maps.MapTypeId.ROADMAP

    }

    //获取dom元素添加地图信息 map = new window.qq.maps.Map(document.getElementById("container"), myOptions)

    console.log("初始定义map:" + map)

    //给定位的位置添加图片标注 marker = new window.qq.maps.Marker({

    position: myLatlng,

    map: map

    })

    /**绘制围栏 */

    this.addpolygon();

    },

    /*** 绘制地图围栏*/

    addpolygon() {

    const _this = this

    drawingManager = new window.qq.maps.drawing.DrawingManager({

    drawingMode: window.qq.maps.drawing.OverlayType.null, // 默认选中绘制方式 drawingControl: true,

    drawingControlOptions: {

    position: window.qq.maps.ControlPosition.TOP_CENTER,

    // 表头显示区域 drawingModes: [

    window.qq.maps.drawing.OverlayType.MARKER,

    window.qq.maps.drawing.OverlayType.CIRCLE,

    window.qq.maps.drawing.OverlayType.POLYGON,

    window.qq.maps.drawing.OverlayType.POLYLINE,

    window.qq.maps.drawing.OverlayType.RECTANGLE

    ]

    },

    markerOptions: {

    visible: false

    },

    // 多边形样式 polygonOptions: {

    editable: true,

    strokeColor: new window.qq.maps.Color(202, 67, 58, 0.8),

    fillColor: new window.qq.maps.Color(202, 67, 58, 0.1),

    clickable: false

    },

    // 圆形样式 circleOptions: {

    fillColor: new window.qq.maps.Color(255, 208, 70, 0.3),

    strokeColor: new window.qq.maps.Color(88, 88, 88, 1),

    strokeWeight: 3,

    clickable: false

    }

    });

    drawingManager.setMap(map);

    window.qq.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {

    // clearOverlays(overlaysArray) lngLat = [];

    overlaysArray.push(event.overlay);

    for (const item of event.overlay.getPath().elems) {

    const lng = item.getLng();

    const lat = item.getLat();

    lngLat.push({

    lat: lat,

    lng: lng

    });

    }

    console.log("绘图后获得的:"+lngLat); // 获得相应的经纬度值 });

    },

    },

    mounted() {

    this.getMyLocation()

    }

    }

    #container{

    width: 84%;

    height: 87%;

    position: absolute;

    }

    .mapBtn {

    position: absolute;

    top: 20px;

    right: 500px;

    z-index: 999;

    }

    #place{

    position: absolute;

    top: 20px;

    width: 40%;

    right:10px;

    z-index:999

    }

    后面绘制地图的代码部分如果我处理这个部分,应该是可以将绘制好的围栏信息传入后台

    五、显示后台数据库中的所有地图围栏信息

    在显示围栏这部分,出了个失误一直没发现,知道最后整合的时候才发现的问题。就是一开始是在mounted中调用的查询全部围栏的方法getAllPolygons() 第一次加载的时候没有问题,但是我从这个页面出去然后回到这个页面的时候,加载的围栏就会消失。这个问题是vue中加载顺序导致的。

    后来我直接在加载模板的时候就调用这个方法最后成功解决这个办法。

    如图所示

    这部分显示围栏,并不是显示单一围栏。而是显示数据库中存入的所有围栏

    request.js 部分代码如下

    const url = 'http://127.0.0.1:8081'; // 开发export default {url}

    在显示地图围栏这部分,前提是你的后台提供了这部分的功能接口

    import { Notification } from 'element-ui';

    let map, marker, polygon, drawingManager, lngLat,ap;

    let path = [];// 设置回显数据参数import url from '@/request';

    import axios from 'axios'

    export default {

    name: "showpolygon",

    data() {

    return {

    position:[

    {

    longitude: 0,//经度 latitude:0,//纬度 city:''

    }

    ],

    polygonPath: [

    {

    provider: '',

    polygonsVOS: [

    {

    lat: '',

    lng: '',

    q: '',

    p: ''

    }

    ]

    }

    ],

    markersArray: [],

    notify:'',

    input:''

    };

    },

    methods:{

    /***定位获得当前位置信息*/

    getMyLocation() {

    var geolocation = new window.qq.maps.Geolocation("你的key", "名字");

    geolocation.getLocation(this.showPosition, this.showErr);

    },

    showPosition(position) {

    console.log(position);

    this.position.latitude = position.lat;

    this.position.longitude = position.lng;

    this.position.city = position.city;

    this.setMapData();

    },

    //定位失败再请求定位,测试使用 showErr() {

    console.log("定位失败,请重试!");

    this.getMyLocation();

    },

    /*** 位置信息在地图上展示*/

    setMapData() {

    var myLatlng = new qq.maps.LatLng(this.position.latitude, this.position.longitude);

    console.log("当前位置:"+this.position.latitude, this.position.longitude)

    var myOptions = {

    zoom: 16,

    center: myLatlng,

    mapTypeId: qq.maps.MapTypeId.ROADMAP

    }

    //获取dom元素添加地图信息 map = new qq.maps.Map(document.getElementById("container"), myOptions)

    //给定位的位置添加图片标注 marker = new qq.maps.Marker({

    position: myLatlng,

    map: map,

    })

    //查询所有后台围栏 this.getAllPolygons()

    },

    /*** 获取所有围栏*/

    getAllPolygons(){

    const _this = this;

    axios.get(url.url + "/v1/polygons/findAll").then(function (response) {

    _this.polygonPath = response.data

    _this.showArrayPolygon()

    })

    .catch(function (error) {

    console.error(error);

    });

    },

    /**循环调用显示围栏方法 */

    showArrayPolygon(){

    const _this = this

    for (const polygonpath of _this.polygonPath) {

    path = []

    for (const polygonsvos of polygonpath.polygonsVOS) {

    path.push(new qq.maps.LatLng(polygonsvos.lat, polygonsvos.lng))

    }

    _this.showpolygons(path)

    }

    },

    /*** 显示围栏*/

    showpolygons(path) {

    const _this = this

    polygon = new qq.maps.Polygon({

    map: map,

    strokeColor: new qq.maps.Color(202, 67, 58, 0.8),

    fillColor: new qq.maps.Color(202, 67, 58, 0.1)

    });

    polygon.setPath(path);

    },

    },

    mounted() {

    this.getMyLocation();

    }

    }

    #container{

    width: 100%;

    height: 100%;

    position: absolute;

    }

    #place{

    position: absolute;

    top: 20px;

    width: 40%;

    right:10px;

    z-index:999

    }

    六、判断当前位置在不在围栏中

    如图所示

    这部分的功能主要是,获取当前位置并判断当前位置在不在地图中的围栏中,如果在则跳转页面。不在则显示不在围栏中的信息

    request.js 部分代码如下

    const url = 'http://127.0.0.1:8081'; // 开发export default {url}

    在显示地图围栏这部分,前提是你的后台提供了这部分的功能接口

    import { Notification } from 'element-ui';

    let map, marker, polygon, drawingManager, lngLat,ap;

    let path = [];// 设置回显数据参数import url from '@/request';

    import axios from 'axios'

    export default {

    name: 'Index',

    data() {

    return {

    position:[

    {

    longitude: 0,//经度 latitude:0,//纬度 city:''

    }

    ],

    polygonPath: [

    {

    provider: '',

    polygonsVOS: [

    {

    lat: '',

    lng: '',

    q: '',

    p: ''

    }

    ]

    }

    ],

    lngLatData: [],

    notify:'',

    input:''

    };

    },

    methods:{

    /*** //定位获得当前位置信息*/

    getMyLocation() {

    var geolocation = new qq.maps.Geolocation("你的key", "名字");

    geolocation.getLocation(this.showPosition, this.showErr);

    },

    showPosition(position) {

    console.log(position);

    this.position.latitude = position.lat;

    this.position.longitude = position.lng;

    this.position.city = position.city;

    this.setMapData();

    },

    //定位失败再请求定位,测试使用 showErr() {

    console.log("定位失败,请重试!");

    this.getMyLocation();

    },

    /*** 位置信息在地图上展示*/

    setMapData() {

    var myLatlng = new qq.maps.LatLng(this.position.latitude, this.position.longitude);

    console.log("当前位置:"+this.position.latitude, this.position.longitude)

    var myOptions = {

    zoom: 16,

    center: myLatlng,

    mapTypeId: qq.maps.MapTypeId.ROADMAP

    }

    //获取dom元素添加地图信息 map = new qq.maps.Map(document.getElementById("container"), myOptions)

    console.log("初始定义map:" + map)

    //给定位的位置添加图片标注 marker = new qq.maps.Marker({

    position: myLatlng,

    map: map,

    draggable: true

    })

    this.mouseClick()

    //获取围栏信息 this.getAllPolygons()

    this.existsPolygon();

    },

    /*** 鼠标点击获取标记位置事件*/

    mouseClick () {

    const _this = this

    qq.maps.event.addListener(map, 'click', function (event) {

    if(!marker) {

    marker=new qq.maps.Marker({

    position: event.latLng,

    map:map

    })

    return

    }

    marker.setPosition(event.latLng)

    console.log("鼠标点击位置:"+event.latLng)

    _this.position.latitude = event.latLng.getLat();

    _this.position.longitude = event.latLng.getLng();

    _this.existsPolygon();

    })

    },

    /*** 获取所有围栏*/

    getAllPolygons(){

    const _this = this;

    axios.get(url.url + "/v1/polygons/findAll").then(function (response) {

    _this.polygonPath = response.data

    console.log("获取所有围栏信息:"+_this.polygonPath)

    _this.showArrayPolygon()

    })

    .catch(function (error) {

    console.error(error);

    });

    },

    /**循环调用显示围栏方法 */

    showArrayPolygon(){

    const _this = this

    for (const polygonpath of _this.polygonPath) {

    path = []

    for (const polygonsvos of polygonpath.polygonsVOS) {

    path.push(new qq.maps.LatLng(polygonsvos.lat, polygonsvos.lng))

    }

    _this.showpolygons(path)

    }

    },

    /*** 显示围栏*/

    showpolygons(path) {

    const _this = this

    polygon = new qq.maps.Polygon({

    map: map,

    strokeColor: new qq.maps.Color(202, 67, 58, 0.8),

    fillColor: new qq.maps.Color(202, 67, 58, 0.1)

    });

    polygon.setPath(path);

    },

    /*** 当前位置是否在围栏中*/

    existsPolygon(){

    const _this = this;

    // console.log("当前位置:"+ _this.position.latitude,_this.position.longitude)​

    axios.post(url.url + "/v1/polygons/existPolygons", {

    lng: _this.position.longitude, //如果改为在getMyLocation中调用该方法,该位置应该变为 obj.longitude和obj.latitude lat: _this.position.latitude,

    })

    .then(function (response) {

    // response.data以http or https开头,打开支付页面 if(response.data.indexOf("http") == 0){

    window.location.href = response.data;

    }else{

    _this.$notify({

    title: '定位失败',

    message: '经度: '+ _this.position.longitude + ", 纬度:" + _this.position.latitude + "," + "信息:" + response.data,

    type: 'success'

    })

    }

    })

    .catch(function (error) {

    console.error(error);

    });

    },

    },

    mounted() {

    this.getMyLocation();

    }

    }

    #container{

    width: 100%;

    height: 100%;

    position: absolute;

    }

    结语

    整个接入完成之后是将这个地图功能全部整合到另一个vue写的后台管理系统中。整合过程踩了很多坑。

    整个功能部分是在vue2.x的环境中写好的,但是后台管理是vue3.x所以出了一些问题

    一开始接入的时候new qq.maps. 这个位置所有new 的qq.maps都出错了,然后网上百度了一番,找到了个解决办法,就是 new window.qq.maps 在qq的前面加上window就没问题了。

    项目代码部分有问题 ,可以联系我。

    展开全文
  • 关于腾讯地图开发的博客还是挺少的,此教程只是给一些初进入接入腾讯地图文档的作为参考,我也是一知半解,但是对于一些需要简单接入地图的小伙伴就足够了,因为我也是看着官方文档来写的,所以以官方文档为准腾讯...
  • vue接入腾讯地图之点击事件

    千次阅读 2020-09-07 11:57:29
    //先在vue的index.html里面引入腾讯地图包 <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=yourkey"></script> //.vue <template> <div> <div id=...
  • vue接入腾讯地图(一)【点击事件】请参考:https://juejin.im/post/6868479028777484301 1、【标注】 添加标注 var marker = new qq.maps.Marker({ position: myLatlng , map: map }); 文本标注 var marker = new ...
  • vue接入腾讯地图(一)【点击事件】

    千次阅读 2020-09-04 12:02:45
    //先在vue的index.html里面引入腾讯地图包 <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=yourkey"></script> //.vue <template> <div> <div id=...
  • vue引入腾讯地图

    2022-08-03 15:28:18
    index.html引入。
  • vue接入腾讯地图(一)【点击事件】请参考:https://juejin.im/post/6868479028777484301 1、【标注】 添加标注 var marker = new qq.maps.Marker({ position: myLatlng , map: map }); 文本标注 var marker = new ...
  • vue版本--腾讯地图demo,可搜索关键字和经纬度,显示地图和搜索结果列表。下载改key即可用。vue版本--腾讯地图demo,可搜索关键字和经纬度,显示地图和搜索结果列表。下载改key即可用。
  • VUE 引用腾讯地图

    2022-06-16 09:36:30
    腾讯地图选址,搜索
  • vue创建腾讯地图显示为空白
  • ant-design-vue 使用腾讯地图去掉logo ant-design-vue 使用腾讯地图去掉logo ant-design-vue 使用腾讯地图去掉logo #mapcontainer div:nth-child(2) a:nth-child(1){ display: none !important; } #mapcontainer div...
  • vue 对接腾讯地图

    2020-10-14 10:46:15
    1、从腾讯地图API官网注册一个开发秘钥 2.、index.html引入相关js文件 //地图api <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=yourkey"></script> //定位 <script ...
  • vue中使用腾讯地图

    千次阅读 2020-05-14 15:50:15
    vue中使用腾讯地图 开始是腾讯地图文档登录注册成为开发者,随后申请key,我们直接到第二步开始使用。 以 此处https://lbs.qq.com/webApi/javascriptGL/glGuide/glBasic 的开发文档为例子。示例是直接引入...
  • 腾讯地图
  • vue3+腾讯地图

    2022-02-14 16:25:22
    vue3+腾讯地图 实现效果: 官方: 控制台入口(申请key):点我 api:点我 实现步骤: 1、官网申请腾讯的key 2、在public/index.html里面添加 <script src="https://map.qq.com/api/gljs?v=1.exp&...
  • vue项目中加载使用腾讯地图

    万次阅读 2019-02-13 17:40:16
    vue-cli脚手架搭建的vue项目里使用到了腾讯地图。看了腾讯地图的官方给出的API(https://lbs.qq.com/javascript_v2/index.html)敲了一遍代码,才有点感觉写一个总结点的东西。 使用前需要在index.html里引入&...
  • vue 中使用地图的时候,实例化的对象用 data 或 ref 、reactive 来管理会导致报错。大概原因是地图对象内部处理与 vue 冲突,目前在高德、腾讯都碰到了,各厂应该都会有类似问题。
  • 打开腾讯地图定位 找到控制台 选择新建应用 应用名称和类型选择好了后 添加key 这里就获取到了定位 在vue视图中需要定位的 <div class="locationWrapper" @click="getPosition"> ...
  • 1.先获取腾讯地图的key:...//先在vue的index.html里面引入腾讯地图包 <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=yourkey"></script> //.vue <template> &l...
  • vue3 中使用腾讯地图

    千次阅读 2021-12-12 23:48:19
    然后再publuc下引入腾讯地图的链接 src="https://map.qq.com/api/gljs?v=1.exp&key=自己的秘钥></script> 然后再创建地图方法前加上window,例如 <template> <div> <div ref=...
  • vue2.0引入腾讯地图

    2020-09-17 16:24:10
    百度很多东西,然后我没找到腾讯地图VUE2.0里面的引用。于是根据找的其他地图引用资料进行尝试。步骤如下。 首先在src里面建立了TMap.js的文件,内容如下: export function TMap(key) { return new ...
  • vue对接腾讯地图,获取经纬度

    千次阅读 2018-12-19 13:56:14
    1:获取腾讯地图key https://lbs.qq.com/console/mykey.html 2: 在js中引入腾讯提供的js export function TMap() { return new Promise(function(resolve, reject) { window.init = function() { resolve(qq) }...
  • 1、public文件夹下的index.html加上 <script type="text/javascript" src=...</script> 2、vue页面 data () { return { address: { addr: '' }, } }, method
  • vue接入腾讯地图(一)【点击事件】请参考:https://juejin.im/post/6868479028777484301 1、【标注】 添加标注 var marker = new qq.maps.Marker({ position: myLatlng , map: map }); 文本标注 var marker = new ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 474
精华内容 189
关键字:

vue接入腾讯地图