腾讯地图经纬度选择和图层功能

最新推荐文章于 2023-07-11 15:02:41 发布
最新推荐文章于 2023-07-11 15:02:41 发布
阅读量2.5k 收藏 1
点赞数
分类专栏： util 文章标签： 腾讯地图 定位 经纬度选择 添加图层
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yutao_Struggle/article/details/83382730
版权

效果展示：

在这里插入图片描述

功能实现：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<html>

<head>
    <link rel="stylesheet" href="overanalysis/style.css">
</head>

<body id="container">
    <form id="myform" class="form-horizontal">
		<input type="text" hidden="hidden" id="lng"/>
		<input type="text" hidden="hidden" id="lat"/>
		<div class="box-body">
			<div class="form-group" id="allMap" style="height:700px;width:800px;"></div>
		</div>	
	</form>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&libraries=convertor"></script>
<script>

   $(function () {
		//其他页面跳转携带经纬度参数，则定位到该经纬度，否则定位到当前位置
        var lngLat = "${param.lngLat}";
        if (lngLat != undefined && lngLat != '') {
            try {
                var arr = lngLat.split(",");
                var lng = arr[0];
                var lat = arr[1];
                init(lng,lat);
            } catch (e) {
                init();
            }
        } else {
            init();
        }
        bindEvent();
    });
    var map;
    var marker;
    var center;
    function init(lng,lat) {
        //定义地图的中心地理坐标
        if (lng != undefined && lng !='' && lat != undefined && lat != '') {
            center = new qq.maps.LatLng(parseFloat(lat),parseFloat(lng));
        } else {
            center = new qq.maps.LatLng(36.726032,114.102802);
			//该方法为异步
            getLocation();
        }

        //初始化地图
        initMap(lng,lat);

        //创建矩形叠加层，图片url请修改
		createGroundOverlay();
        
        //添加折线覆盖物
        createPolygon();

    }

    //初始化地图
    function initMap() {
        //定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
        map = new qq.maps.Map(document.getElementById("allMap"),{
            center : center, // 地图的中心地理坐标
            zoom : 15, // 默认缩放级别,缩放级别4-17
            mapTypeId : qq.maps.MapTypeId.HYBRID, // 卫星地图模式
            mapTypeControl:false,
        });

        //创建一个Marker
        marker = new qq.maps.Marker({
            //设置Marker的位置坐标
            position: center,
            //设置显示Marker的地图
            map: map,
            draggable:true
        });
        setLngLat(center.getLng(),center.getLat());
    }

    //绑定事件
    function bindEvent() {
        //添加监听事件   获取鼠标单击事件，添加标记点
        qq.maps.event.addListener(map, 'click', function(event) {
            marker.setMap(null);
            marker=new qq.maps.Marker({
                position:event.latLng,
                map:map,
                draggable:true
            });
            setLngLat(event.latLng.getLng(),event.latLng.getLat());
        });
    }

    //获取当前位置
    function getLocation(){
        var geolocation = new qq.maps.Geolocation("6IWBZ-NGJKP-UT5DR-V7TJL-5U7S2-K4BW4", "yutao");
        geolocation.getLocation(
            function (position) {
                var lat = position.lat;
                var lng = position.lng;
                center = new qq.maps.LatLng(lat,lng);
                map.setCenter(center);
                marker.setMap(null);
                marker=new qq.maps.Marker({
                    position:center,
                    map:map,
                    draggable:true
                });
                setLngLat(lng,lat);
            }, function () {
                center = new qq.maps.LatLng(36.726032,114.102802);
            }, {timeout: 8000});
    }

	//创建矩形叠加层，图片url请修改
	function createGroundOverlay(){
		new qq.maps.GroundOverlay({
            map:map,
            zIndex:-1,
            imageUrl:Global.contextPath + '/static/pages/monitor/img/yh.png',
            bounds:new qq.maps.LatLngBounds(new qq.maps.LatLng(36.7399126700,114.0859880600),
                new qq.maps.LatLng(36.7210522200,114.1175883900))
        });
        new qq.maps.GroundOverlay({
            map:map,
            zIndex:-1,
            imageUrl:Global.contextPath + '/static/pages/monitor/img/zs1.png',
            bounds:new qq.maps.LatLngBounds(new qq.maps.LatLng(36.7348870300,114.0916279100),
                new qq.maps.LatLng(36.6876175900,114.1322266000))
        });
        new qq.maps.GroundOverlay({
            map:map,
            zIndex:-1,
            imageUrl:Global.contextPath + '/static/pages/monitor/img/py.png',
            bounds:new qq.maps.LatLngBounds(new qq.maps.LatLng(36.7434735600,113.8977854400),
                new qq.maps.LatLng(36.6955655900,113.9444176500))
        });
        new qq.maps.GroundOverlay({
            map:map,
            zIndex:-1,
            imageUrl:Global.contextPath + '/static/pages/monitor/img/zs3.png',
            bounds:new qq.maps.LatLngBounds(new qq.maps.LatLng(36.6363133800,114.1114188800),
                new qq.maps.LatLng(36.5997751400,114.1538538600))
        });

	}
    // 添加折线覆盖物
    function createPolygon(){

        var polygon = new qq.maps.Polygon({
            path: [
                new qq.maps.LatLng(36.7362187706,114.0991544724),
                new qq.maps.LatLng(36.7389529065,114.1000986099),
                new qq.maps.LatLng(36.7378351898,114.1064715385),
                new qq.maps.LatLng(36.7372333356,114.1064715385),
                new qq.maps.LatLng(36.7372333356,114.1064715385),
                new qq.maps.LatLng(36.7367518488,114.1100120544),
                new qq.maps.LatLng(36.7345507280,114.1096687317),
                new qq.maps.LatLng(36.7336565046,114.1133165359),
                new qq.maps.LatLng(36.7231829982,114.1097760201),
                new qq.maps.LatLng(36.7265023429,114.1034245491),
                new qq.maps.LatLng(36.7282565500,114.1022658348),
                new qq.maps.LatLng(36.7283941332,114.1003775597),
                new qq.maps.LatLng(36.7274654419,114.1000986099),
                new qq.maps.LatLng(36.7275342343,114.0981030464),
                new qq.maps.LatLng(36.7280157788,114.0966224670),
                new qq.maps.LatLng(36.7266915240,114.0947556496),
                new qq.maps.LatLng(36.7278094030,114.0920305252),
                new qq.maps.LatLng(36.7322119680,114.0912365913),
                new qq.maps.LatLng(36.7322119680,114.0912365913),
                new qq.maps.LatLng(36.7356512963,114.0954422951),
                new qq.maps.LatLng(36.7364767122,114.0961503983),
                new qq.maps.LatLng(36.7360124168,114.0991115570)
            ],
            strokeColor: '#ff0000',
            strokeWeight: 1,
            fillColor: new qq.maps.Color(220,220,220,0.3),
            map: map
        });
    }

    //设置经纬度
    function setLngLat(lng,lat) {
        $("#lng").val(lng);
        $("#lat").val(lat);
    }


</script>
</body>
</html>

上述引用到图层请自行更改为本地图片的地址，查看效果。

yutao_Struggle
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
前端-腾讯地图个性化图层功能实现
weixin_55717063的博客
05-30 1084
点击图层创建到创建图层，可以理解就是ps里的图层，相当于你把一张图片盖在了地图上，只不过你这张图片和地图的路线河流等都是高度契合的，这个其实比较考验ui的功底，创建好图层后需要审核，审核需要一俩个工作日可能，审核通过后需要和你的应用进行绑定，src就是网址路径，大家可以理解成小程序页面嵌套了一个H5就好了，也就是你提前写好web端的个性化地图，然后通过web-view去展示到小程序上，，写代码需要这个id来确定你使用哪个图层，目前是只支持web端使用个性化图层，小程序端是要钱的，亲测。
使用腾讯地图直接获取经纬度
前端程序猿的博客
05-12 4688
1.注册成为开发者申请api key 注册成功后填写密钥信息打开控制台获取密钥 腾讯位置服务 - 立足生态，连接未来 2.使用axios去获取经纬度 在main.js 中添加一下代码 import axios from 'axios' axios.defaults.baseURL='#' Vue.prototype.$http = axios 再需要获取经纬度的页面 <script> export default { name: 'Home', .
腾讯地图个性化图层创建及发布
小小码农biubiubiu
06-02 1294
腾讯位置服务控制台 首先在腾讯位置服务控制台下注册完毕后，打开个性化样式 选择一个自己喜欢的样式作为模板，在这个模板的基础上对地图要素的样式进行修改，加快地图设计的速度。 本次案例主题是【中国红】，但是鉴于“玉露”和“澹月”主题是企业客户专项，这里就选“烟翠”这个主题，这个主题有“深沉的灰调，柔和的色彩搭配，更能体现建筑物的立体感”。 可供编辑的要素 按要素类型分有POI（点），背景线、道路（线），背景面（面）四种，每个大类里面有一些详细分类。 陆地 把陆地改成玉红（#c04851） 绿地、公园
Vue:加入百度地图经纬度选取。（Ant design pro vue）
一个头发贼多的小火鸡
05-30 2619
需求描述： 1.使用百度地图选取地理经纬度位置，结合mongodb 2d索引检索距离。 2.可手动输入经纬度地址，和唤起地图选取。 3.根据用户信息把用户经纬度传给百度地图组件，回显坐标。 4.把获取的经纬度地址截取成数组让mongodb识别。 var locations = this.storeLocation.split(',') StoreLocation = [Number(locations[0]), Number(locations[1])] 准备工作：申请百度地图开放平台Key（
腾讯地图省市区经纬度json
04-23
微信小程序,腾讯地图省市区经纬度json status: 0, message: "query ok", data_version: "20190117", result: [ [ { id: "110000", name: "北京", fullname: "北京市", pinyin: [ "bei", "jing" ], location: { lat: 39.90469, lng: 116.40717 }, cidx: [ 0, 15 ] }, { id: "120000", name: "天津", fullname: "天津市", pinyin: [ "tian", "jin" ], location: { lat: 39.0851, lng: 117.19937 }, cidx: [ 16, 31 ] },
腾讯地图经纬度转换为百度地图经纬度PHP类.zip
07-11
百度地图BD09坐标腾讯地图用的也是GCJ02坐标@param double $lat 纬度@param double $lng 经度百度地图BD09坐标---->中国正常GCJ02坐标腾讯地图用的也是GCJ02坐标@param double $lat 纬度@param double $lng 经度@...
C# winfrom获取百度地图经纬度转换腾讯地图经纬度示例
12-23
通过api获取到百度地图经纬度，再转换为腾讯地图经纬，用于夸地图规划路线，获取起点到终点距离等。。。
PHP腾讯地图经纬度转百度地图经纬度类
05-03
PHP腾讯地图经纬度转百度地图经纬度类能将百度地图经纬度 转换到 腾讯地图/Google 对应的经纬度.
百度地图经纬度转换到腾讯地图/Google 对应的经纬度
12-18
实现目的:将百度地图经纬度 转换到 腾讯地图/Google 对应的经纬度. 方法1：使用代码进行转换 存在的问题：转换之后误差大，基本不可用 public static void Convert_BD09_To_GCJ02(double lat, double lng) { ...
vue项目中使用腾讯地图(2.个性化手绘地图)
最新发布
z980498059的博客
07-11 858
这边可以创建个性化图层，根据步骤插入图片，提交审核会需要时间 具体可参考控制台个性化地图beta版下的使用指南。/*在JSAPI GL中，个性化图层将以栅格图层的形式叠加在地图上进行展示。//开始引入实例化的地图，参考文章VUE项目中使用腾讯地图文章1。1.用到的腾讯地图控制台的个性化地图——个性化图层beta版。传入个性化图层ID，即可创建栅格图层实例 *///控制台创建个性化地图审核通过的id。// 创建失败，请查看控制台错误信息。// 成功创建个性化图层。
微信小程序+ vue3 + ts 中使用腾讯地图和个性化图层
qq_58946786的博客
09-17 2199
微信小程序中使用腾讯地图个性化图层，Vue2 和 Vue3 中使用地图及个性化图层
腾讯地图的使用，添加多个标记和点击事件
热门推荐
陈雪珊的博客
12-20 2万+
腾讯地图API官网：http://lbs.qq.com/javascript_v2/index.html获取当前位置经纬度使用腾讯地图之前，先要获取指定位置的经纬度。 可以利用具体地理位置（如：北京市朝阳区朝阳北路101号 朝阳大悦城）来获取经纬度，具体获取方法这里不进行说明。 如果是在微信中使用腾讯地图，可以调用JSSDK来获取当前地理位置的经纬度。方法如下： //微信JS-SDK 获取
如何准确获取地点位置的经纬度？
Dove言和
06-29 1万+
有时候想要获取某个位置的经纬度，怎么获取呢？网上一些在线获取经纬度的软件不太准确，还是自己手动活动比较准确，有更好的方式欢迎留言。 1、打开电脑浏览器输入amap.com，进入高德地图页面 2、输入你想获取经纬度的位置 3、点击分享，复制链接 4、再打开一个标签，输入刚复制的链接 5、按回车的一瞬间，截屏 前面的就是纬度，后面是经度 完成！ ...
如何获取常见位置的经纬度
DoWayChan的博客
04-25 1856
打开浏览器，搜索拾取坐标系统，点击图中搜索到的网页进入 进来之后，鼠标所在任何位置经纬度自动出现，右上角可以复制，地图上的位置可以任意选择。 还可以使用坐标反查功能，需要勾选搜索框，输入经纬度，经度在前，右侧有使用简介。 ...
arcgis api for js 4.x学习笔记（1）地图加载(Map、MapView、MapImageLayer、TileLayer)
wangchaohpu的博客
07-21 2441
<div id="viewDiv" style="width:300px;height:300px"></div> require(["esri/Map", "esri/views/MapView", "esri/layers/TileLayer", "esri/layers/MapImageLayer", "esri/geometry/Extent", 'dojo/domReady!' ].
腾讯地图api-地图展示map和覆盖物(标记)
北辰
08-21 5777
地图展示map和覆盖物(标记)详情参考：https://lbs.qq.com/javascript_v2/doc/index.html 最简单的地图展示和覆盖物(标记)示例： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <met...
vue中利用高德地图选取经纬度
weixin_62328829的博客
10-29 3365
点击哪里，输入框中就会绑定哪里的经纬度 ，这里用的是高德地图来实现的，首先要去高德地图api申请一个key。项目中要求，鼠标点击地图可以获取到当前地址的经纬度。首先根据高德地图的引导安装插件。这样就可以了，还是很简单的。直接cv拿去，不用谢。
腾讯地图经纬度转高德地图经纬度
05-26
腾讯地图与高德地图使用的坐标系是不同的，需要进行坐标系转换。可以通过以下方法将腾讯地图经纬度转换为高德地图经纬度： 1. 将腾讯地图经度加上0.0065，纬度加上0.0060，得到新的经纬度。 2. 将得到的新经纬度转换为火星坐标系经纬度，可以使用开源库 "coordtransform" 进行转换。 3. 将火星坐标系经纬度转换为高德地图经纬度，可以使用高德地图提供的 "AMap.Geocoder" 方法进行转换。 以下是示例代码（使用 JavaScript）： ``` // 引入 "coordtransform" 库 const coordtransform = require('coordtransform'); // 将腾讯地图经纬度转换为火星坐标系经纬度 const qqLngLat = [113.935097, 22.531578]; // 腾讯地图经纬度 const marsLngLat = coordtransform.qq2mars(qqLngLat[0], qqLngLat[1]); // 火星坐标系经纬度 // 将火星坐标系经纬度转换为高德地图经纬度 const AMap = window.AMap; // 需要在 HTML 中引入高德地图 API const geocoder = new AMap.Geocoder(); geocoder.getAddress(marsLngLat, (status, result) => { if (status === 'complete' && result.info === 'OK') { const amapLngLat = [result.regeocode.longitude, result.regeocode.latitude]; console.log(amapLngLat); // 高德地图经纬度 } }); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值