最近项目用到的腾讯Map demo
2018-10-27 本文已影响45人
geeooooz
<!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>为多个Marker添加事件</title>
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
}
* {
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;
}
.btn {
width: 142px;
}
#container {
width: 100%;
height: 100%;
}
</style>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<script type="text/javascript" src="/Public/wechat/js/jquery.min.js"></script>
<script>
function init(){
var center = new qq.maps.LatLng(38.04364,114.47789);//定义中心点
var map = new qq.maps.Map(document.getElementById("container"),{
zoom: 12,
center: center,
panControl: true,
zoomControl: true,
});
var infoWin = new qq.maps.InfoWindow({
map: map
});
var anchor = new qq.maps.Point(42, 20),
size = new qq.maps.Size(80, 80),
origin = new qq.maps.Point(0,0),
icon = new qq.maps.MarkerImage('qq.png', size, origin, anchor);
var marker = new qq.maps.Marker({
position: center,
map: map
});
qq.maps.event.addListener(marker, 'click', function() {
infoWin.open();
infoWin.setContent('<div style="text-align:center;white-space:'+
'nowrap;margin:10px;">这是Home标注,<a href="https://www.baidu.com">点击查看</a></div>');
infoWin.setPosition(center);
});
//end
var latsss = getMapdata();
console.log(latsss);
for(var i = 0;i < latsss.data.length; i++) {
(function(n){
var mapls = latsss.data;
var anchor = new qq.maps.Point(42, 20),
size = new qq.maps.Size(80, 80),
origin = new qq.maps.Point(0,0),
icon = new qq.maps.MarkerImage('qq.png', size, origin, anchor);
var marker = new qq.maps.Marker({
position: new qq.maps.LatLng(mapls[n].latitude,mapls[n].longitude),
map: map
});
qq.maps.event.addListener(marker, 'click', function(){
infoWin.open();
infoWin.setContent('<div style="text-align:center;white-space:'+
'nowrap;margin:10px;">这是第 ' + n + ' 个标注,<a href="https://www.baidu.com">点击查看</a></div>');
infoWin.setPosition(new qq.maps.LatLng(mapls[n].latitude,mapls[n].longitude));
});
})(i);
}
}
function getMapdata(){
var temp;
$.ajax({
async: false,
type: "POST",
url: '{:U("Map/getMapData")}',
dataType: "json",//回调函数接收数据的数据格式
success: function(data){
temp=data;
},
error:function(msg){
console.log(msg);
}
})
return temp;
}
</script>
</head>
<body onload="init();">
<div id="container"></div>
<p>给三个标注绑定点击事件，当点击标注时，会弹出标注的序号信息。</p>
</body>
</html>
没有的JS自己去引用
后台传入数组即可
下面的是php后台文件文件：
public function getMapData(){
$map = M('map')->field('longitude,latitude,job_id,poiregions')->where(['id'=>array('in','64,53')])->select();
$this->ajaxReturn(array('data'=>$map));
}
console值：
Objectdata: Array(2)0:
job_id: "0"latitude: "38.054533213792"longitude: "114.48153307002"poiregions: "鹿城苑"__proto__: Object1: job_id: "0"latitude: "38.054533083269"longitude: "114.48121563992"poiregions: "金海华府"
<!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>为多个Marker添加事件</title>
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
}
* {
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;
}
.btn {
width: 142px;
}
#container {
width: 100%;
height: 100%;
}
</style>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<script>
function init() {
var center = new qq.maps.LatLng(39.916527,116.397128);//定义中心点
var map = new qq.maps.Map(document.getElementById("container"), {//打开以中心点的地图
zoom: 12, //设置地图缩放级别
center: center, //设置中心点
panControl: false, //不启用平移控件
zoomControl: false, //不启用缩放控件
});
var infoWin = new qq.maps.InfoWindow({//添加到提示窗
map: map
});
//中心点标注 以及创建点击事件 自定义标记 start
var anchor = new qq.maps.Point(42, 20), //自定义标记
size = new qq.maps.Size(80, 80),
origin = new qq.maps.Point(0,0),
icon = new qq.maps.MarkerImage('qq.png', size, origin, anchor);
var marker = new qq.maps.Marker({//创建标记
position: center,
map: map
});
qq.maps.event.addListener(marker, 'click', function() {//获取标记的点击事件
infoWin.open();
infoWin.setContent('<div style="text-align:center;white-space:'+
'nowrap;margin:10px;">这是Home标注,<a href="https://www.baidu.com">点击查看</a></div>');
infoWin.setPosition(center);
});
//end
var latlngs = [ //定义要循环的要标注的点
new qq.maps.LatLng(39.91474,116.37333),
new qq.maps.LatLng(39.91447,116.39336),
new qq.maps.LatLng(39.90884,116.41306)
];
console.log(latlngs);
for(var i = 0;i < latlngs.length; i++) {
(function(n){
var anchor = new qq.maps.Point(42, 20), //自定义标记
size = new qq.maps.Size(80, 80),
origin = new qq.maps.Point(0,0),
icon = new qq.maps.MarkerImage('qq.png', size, origin, anchor);
var marker = new qq.maps.Marker({//创建标记
icon: icon,
position: latlngs[n],
map: map
});
qq.maps.event.addListener(marker, 'click', function() {//获取标记的点击事件
infoWin.open();
infoWin.setContent('<div style="text-align:center;white-space:'+
'nowrap;margin:10px;">这是第 ' + n + ' 个标注,<a href="https://www.baidu.com">点击查看</a></div>');
infoWin.setPosition(latlngs[n]);
});
})(i);
}
}
</script>
</head>
<body onload="init();">
<div id="container"></div>
<p>给三个标注绑定点击事件，当点击标注时，会弹出标注的序号信息。</p>
</body>
</html>
没有的JS自己去引用
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>选择位置</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
}
* {
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;
}
.btn {
width: 142px;
}
#container {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<input type="text" name="name" id="lat"/><br>
<input type="text" name="age" id="lng" /><br>
<input type="text" name="poiaddress" id="poiaddress" /><br>
<input type="text" name="cityname" id="cityname" /><br>
<input type="text" name="poiname" id="poiname" /><br>
<iframe id="mapPage" width="100%" height="100%" src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=6NVBZ-YA43F-UHLJY-JS3WK-26HQH-7ZBLM&referer=灵工邦" >
</iframe>
<div class="tuichu-box">
<input class="weui-btn login-btn" id="button" value="提交" type="submit">
</div>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script>
window.addEventListener('message', function(event) {
// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
var loc = event.data;
if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
$("#lat").val(loc.latlng.lat);//纬度
$("#lng").val(loc.latlng.lng);//经度
$("#poiaddress").val(loc.poiaddress);//详细地址
$("#cityname").val(loc.cityname);//市
$("#poiname").val(loc.poiname);//地址 例：XX小区 即名称
}
}, false);
</script>
</body>
</html>
没有的JS自己去引用
