腾讯地图通过详细地址获取经纬度

16 篇文章 0 订阅

先引入js

<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>


<script>
        var geocoder, map, marker = null;
   
        geocoder = new qq.maps.Geocoder();


        function codeAddress() {
            var address = '中国,北京,海淀区,海淀大街38号';
            //对指定地址进行解析
            geocoder.getLocation(address);
            //设置服务请求成功的回调函数
            geocoder.setComplete(function(result) {
            console.log(result);
            });
            //若服务请求失败,则运行以下函数
            geocoder.setError(function() {
                alert("出错了,请输入正确的地址!!!");
            });
        }
        codeAddress();
    </script>

好的,下面是详细的步骤: 1. 在 HTML 中地图容器和标记容器: ```html <template> <div class="map-container"> <div class="map" ref="map"></div> <div class="marker" ref="marker"></div> </div> </template> ``` 2. 在 `setup()` 函数中引入腾讯地图的 API 和样式文件,并创建地图和标记: ```javascript import { onMounted, ref } from "vue"; export default { setup() { // 引入腾讯地图 API 和样式文件 const script = document.createElement("script"); script.type = "text/javascript"; script.src = "http://map.qq.com/api/js?v=2.exp&key=YOUR_KEY_HERE"; script.onload = () => { // 创建地图和标记 const map = new qq.maps.Map(document.getElementById("map"), { center: new qq.maps.LatLng(39.916527, 116.397128), zoom: 13, }); const marker = new qq.maps.Marker({ position: map.getCenter(), draggable: true, map: map, }); // 监听标记拖动结束事件 qq.maps.event.addListener(marker, "dragend", function (event) { // 获取标记位置的经纬度信息 const latLng = marker.getPosition(); console.log("经度:" + latLng.getLng() + ",纬度:" + latLng.getLat()); }); }; document.head.appendChild(script); return {}; }, }; ``` 3. 在 `mounted()` 函数中获取地图和标记容器的 DOM 节点: ```javascript import { onMounted, ref } from "vue"; export default { setup() { // ... onMounted(() => { // 获取地图和标记容器的 DOM 节点 const mapContainer = document.getElementById("map"); const markerContainer = document.getElementById("marker"); // 设置地图和标记容器的宽度和高度 mapContainer.style.width = "100%"; mapContainer.style.height = "400px"; markerContainer.style.width = "32px"; markerContainer.style.height = "32px"; // 将标记容器作为标记的图标 marker.setIcon( new qq.maps.MarkerImage( "http://open.map.qq.com/doc/img/n_marker.png", null, null, null, new qq.maps.Size(32, 32) ) ); marker.set("offset", new qq.maps.Size(0, 0)); marker.set("iconAnchor", new qq.maps.Point(16, 16)); marker.set("shadow", new qq.maps.MarkerImage(null, null, null, null, new qq.maps.Size(0, 0))); markerContainer.appendChild(marker.get("container")); }); return {}; }, }; ``` 4. 最后在 CSS 中设置地图容器的样式: ```css .map-container { position: relative; } .map { position: relative; z-index: 1; } .marker { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; } ``` 这样就完成了使用腾讯地图拖动标记获取经纬度的操作。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值