腾讯地图绘制外卖配送范围及标注商家地点的绘制及回显，搜索
<!DOCTYPE html>
女性翘二郎腿的危害及建议<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title></title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
body, button, input, select, textarea {
font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
p{
width:603px;
padding-top:3px;
overflow:hidden;
}
#container{
min-width:600px;
min-height:767px;
}
</style>
<script charset="utf-8" src="3gimg.qq/lightmap/components/geolocation/geolocation.min.js"></script>
<script charset="utf-8" src="map.qq/api/js?p&key=key&libraries=drawing"></script>
<script>
var map,marker,polygon,drawingManager,lngLat; // 地图，坐标点，多边形初始化加载，多边形绘制，多边形每个点的集成数组
var markersArray=[],overlaysArray=[]; //标注点集合，绘制多边形时的集合
/**
* 初始化地图
*/
function init(){
map = new qq.maps.ElementById('container'), {
center: new qq.maps.LatLng(30.57447, 103.92377), // 暂时默认成都
zoom: 8
})
// 标注的⽣成与回显
addMarker(new qq.maps.LatLng(30.925788712587014,103.8922119140625)) // 初始化回显标注
markerOnly()
// 多边形绘制及回显
/
/设置多边形路径以便回显
var path3=[
new qq.maps.LatLng(30.57447,101.92377),
new qq.maps.LatLng(30.17447,102.92377),
new qq.maps.LatLng(31.57447,103.92377),
new qq.maps.LatLng(30.37447,104.92377),
new qq.maps.LatLng(30.47447,105.92377)
];
showpolygon(path3)
// 绘制
addpolygon()
}
/**
* 标注
*/
// 添加监听事件获取⿏标单击事件（仅留⼀个标注点）
function markerOnly(){
qq.maps.event.addListener(map, 'click', function(event){
addMarker(event.latLng)
qq.maps.event.addListener(map, 'click', function(event){
deleteOverlays() // 删除原有标注仅留下⼀个
marker=new qq.maps.Marker({
marker=new qq.maps.Marker({
position:event.latLng,
map:map
});
});
var gps = Lat() + ',' + Lng() // 解析出来的点⽅便给后端});
}
//添加标记
function addMarker(location){
deleteOverlays()
var marker = new qq.maps.Marker({
position: location,
map: map
});
markersArray.push(marker);
}
//删除标记
function deleteOverlays(){手机sql数据库软件
if(markersArray){
for(i in markersArray){
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
if(marker !== undefined){
marker.setMap(null);
identity matrix是什么意思}
}
/**
* 多边形绘制
*/
// 绘制
function addpolygon(){
drawingManager = new qq.maps.drawing.DrawingManager({
drawingMode: qq.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: qq.maps.ControlPosition.TOP_CENTER,
drawingModes: [
qq.maps.drawing.OverlayType.POLYGON
]
},
markerOptions:{
visible:false
},
circleOptions: {
fillColor: new qq.maps.Color(255, 208, 70, 0.3),
strokeColor: new qq.maps.Color(88, 88, 88, 1),
strokeWeight: 3,
clickable: false
}
})
drawingManager.setMap(map)
qq.maps.event.addListener(drawingManager, 'overlaycomplete', function(event){
// clearOverlays(overlaysArray)
lngLat =[]
overlaysArray.push(event.overlay)
for(const item of Path().elems){
let lng = Lng()
let lat = Lat()
lngLat.push({
latitude: lat,
longitude: lng
})
}
}
console.log(lngLat)
})
}
// 初始化回显
function showpolygon(path3){
polygon = new qq.maps.Polygon({
map: map
});
polygon.setPath(path3);
}
// 删除初始化多边形
function delpolygon(){
const a =[]
polygon.setPath(a);
}
// 删除绘制的多边形
function clearOverlays(){
if(overlaysArray){ // 这个if判断在vue中会报错，不知道是⾥⾯的for in被重写还是咋的，原因还不知道，如果报错可以不要这个if判断，删除标注那个地⽅跟这个原理是⼀样的，报错的话也不要，把长度重置为0
for(i in overlaysArray){
overlaysArray[i].setMap(null)
}
}
overlaysArray =[] // 需要重置为空，否则之前的数据还在这个数组⾥⾯
}
/**
*需要进⾏搜索的话加⼊下⾯代码
*/
// 搜索
企业表单大师onSearch(val){ // ⾃定义的搜索⽅法名，由事实触发
var _this = this
var keyword = val
var region =''
var searchService = new qq.maps.SearchService({
complete : function(results){
公司注册if(results.detail.pois){
_this.pois = results.detail.pois
}else{
Message.warning('请输⼊正确地址，例如成都太古⾥')
return false
}
}
})
searchService.setLocation(region)
searchService.search(keyword)
}
</script>
</head>
<body onload="init()">
<div id="container"></div>
<p>给地图绑定了点击事件，当点击地图时，会在点击位置显⽰Marker。</p>
<button onclick="delpolygon()">删除多边形</button>
<button onclick="clearOverlays()">删除绘制多边形</button>
</body>
</html>
多边形覆盖物按⽂档应该是下⾯这个，但没时间去重新改造成我想要的东西了，这⼉只是单纯的⾯向百度写了⼀个⽅便在vue⾥⾯进⾏展⽰
position和location的区别init = function(){
var center = new qq.maps.LatLng(39.916527, 116.397128);
var map = new qq.maps.ElementById('container'), { center: center,
zoom: 13
});
var path =[
new qq.maps.LatLng(39.930131, 116.395500),
new qq.maps.LatLng(39.911437, 116.377476),
new qq.maps.LatLng(39.911305, 116.417301)
];
var polygon = new qq.maps.Polygon({
//多边形是否可点击。
clickable: true,
//⿏标在多边形内的光标样式。
cursor: 'crosshair',
//多边形是否可编辑。
editable: true,
//多边形的填充⾊，可通过Color对象的alpha属性设置透明度。
fillColor: '#5f9ea0',
//fillColor: new qq.maps.Color(0, 0, 0, 0.5),
//要显⽰多边形的地图。
map: map,
//多边形的路径，以经纬度坐标数组构成。
path: path,
//多边形的线条颜⾊，可通过Color对象的alpha属性设置透明度。
strokeColor: '#000000',
//多边形的边框样式。实线是solid，虚线是dash。
strokeDashStyle: 'dash',
//多边形的边框线宽。
strokeWeight: 5,
//多边形是否可见。
visible: true,
/
/多边形的zIndex值。
zIndex: 1000
});
};
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论