经纬度，中心点悬浮标注"/>
腾讯地图根据位置获取经纬度，中心点悬浮标注
拖动地图获取中心点的经纬度
html部分
<script charset="utf-8" src="=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script><style type="text/css">html,body {height: 100%;margin: 0px;padding: 0px;position: relative;}#container {width: 100%;height: 100%;}#info {position: absolute;bottom: 50px;left: 50%;transform: translateX(-50%);background: rgba(102, 175, 233, 0.6);border-radius: 3px;padding: 10px;width: 170px;z-index: 9999;}#copyright {position: absolute;bottom: 0px;left: 80%;z-index: 9999;}</style><body onload="initMap()"><div id="container"></div><div id="info"><input type="hidden" id="lng" value=""><input type="hidden" id="lat" value=""><p>当前中心点：<button id="saveBut" type="button" class="form-btn form-btn-small" onclick="getCenter()"><iclass="fa fa-save"></i> 保 存</button><div id="position"></div></p></div></body>
js部分
function initMap() {var lone = parent.$('input[name=longitude]').val();var late = parent.$('input[name=latitude]').val();var address = parent.$('.address').text();if (!isEmpty(lone) && !isEmpty(late)) {if (address) {$.ajax({async: true,type: 'GET',dataType: 'jsonp',url: '/',data: {address: address,key: "OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77",output: "jsonp"},success: function (data) {if (data.status == 0) {var longitude = data.result.location.lng;var latitude = data.result.location.lat;setOrientation(longitude, latitude);}}, error: function (data) {alert(data.message)}});}} else {setOrientation(lone, late);}}/*** 设置显示坐标*/function setOrientation(longitude, latitude) {$('#lng').val(longitude);$('#lat').val(latitude);var position = document.getElementById("position");position.innerHTML = longitude + '，' + latitude//获取地图中心点var center = new TMap.LatLng(latitude, longitude);//设置中心点坐标//初始化地图var map = new TMap.Map("container", {zoom: 12, //设置地图缩放级别center: center, //设置地图中心点坐标});var markerGeo = {id: 'center',position: map.getCenter(),};// 创建一个位于地图中心点的markervar markerLayer = new TMap.MultiMarker({map: map,geometries: [markerGeo]});// 监听中心点变化事件，更新marker的位置map.on('center_changed', () => {markerGeo.position = map.getCenter();markerLayer.updateGeometries([markerGeo]);});//监听地图平移map.on("pan", function () {var lng = map.getCenter().getLng().toFixed(6);var lat = map.getCenter().getLat().toFixed(6);$('#lng').val(lng);$('#lat').val(lat);position.innerHTML = lng + "，" + lat;//获取地图中心点});}/*** 获取中心点位置赋值父页面*/function getCenter() {parent.$('input[name=longitude]').val($('#lng').val());parent.$('input[name=latitude]').val($('#lat').val());}
更多推荐
腾讯地图根据位置获取经纬度,中心点悬浮标注
发布评论