腾讯地图添加标记

最新推荐文章于 2024-08-15 12:21:06 发布

黑脸樵夫

最新推荐文章于 2024-08-15 12:21:06 发布

阅读量5k

点赞数

分类专栏：腾讯地图调取

本文链接：https://blog.csdn.net/u013521005/article/details/97805349

版权

腾讯地图调取专栏收录该内容

1 篇文章 0 订阅

订阅专栏

腾讯地图添加标记

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>腾讯坐标</title>
   <meta name="renderer" content="webkit">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
   <meta name="apple-mobile-web-app-status-bar-style" content="black">
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="format-detection" content="telephone=no">
   <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=MZJBZ-MORW3-JOA36-3QI4P-5YTVJ-7GBVJ"></script>
   <script src="https://lbs.qq.com/web/library/jquery-1.11.0.min.js"></script>
</head>
<body class="childrenBody" >
<form class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">地址</label>
<div class="layui-input-inline" style='width: 320px;'>
<input type="text" name='address' id='address' lay-verify="required" value="{$team_data.address}" class="layui-input" placeholder="请输入基地地址">
</div>
<div class="layui-form-label layui-btn">获取坐标</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">坐标</label>
<div class="layui-input-inline" style="width: 150px;">
<input type="text" name="xaxis" id='xaxis' lay-verify="axis" value="{$team_data.xaxis}" placeholder="" autocomplete="off" class="layui-input layui-disabled">
</div>
<div class="layui-input-inline" style="width: 150px;">
<input type="text" name="yaxis" id='yaxis' lay-verify="axis" value="{$team_data.yaxis}" placeholder="" autocomplete="off" class="layui-input layui-disabled">
</div>
</div>
       <div class="layui-col-xs5">
           <div id="container" style='height: 500px;'></div>
       </div>
</form>

//绑定单击事件添加参数
qq.maps.event.addListener(map, 'click', function(event) {
$('#xaxis').val(event.latLng.getLat());
$('#yaxis').val(event.latLng.getLng());
deleteOverlays();
addMarker(event.latLng);
});

//调用地址解析类
geocoder = new qq.maps.Geocoder({
complete : function(result){
   console.log(result.detail.location);
   $('#xaxis').val(result.detail.location.lat);
   $('#yaxis').val(result.detail.location.lng);
map.setCenter(result.detail.location);
var marker = new qq.maps.Marker({
map:map,
position: result.detail.location
});
markersArray.push(marker);
}
});

// }

$('.chaxun').click(function(){
   deleteOverlays();
   // city+=$("#counties_id").find("option:selected").text();
   codeAddress();
})

setTimeout(function () {
var address = document.getElementById("address").value;
address=city+address;
//通过getLocation();方法获取位置信息值
geocoder.getLocation(address);

}, 100);

// 添加标记
function codeAddress() {

var address = document.getElementById("address").value;
address=city+address;
//通过getLocation();方法获取位置信息值
geocoder.getLocation(address);
}

//添加标记
function addMarker(location) {
var marker = new qq.maps.Marker({
position: location,
map: map
});
console.log(location);
markersArray.push(marker);
}
//删除标记
function deleteOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
</script>