主要是基于JavaScript的地图API实现自定义的marker和点击事件，前后端不分离场景，是ajax得到请求；
-
<!doctype html>
-
<html>
-
<head>
-
<meta charset=
"utf-8">
-
<meta http-equiv=
"X-UA-Compatible" content=
"IE=edge">
-
<meta name=
"viewport" content=
"initial-scale=1.0, user-scalable=no, width=device-width">
-
<title>默认点标记</title>
-
<link rel=
"stylesheet" href=
"https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
-
<style>
-
html, body,
#container {
-
height:
100%;
-
width:
100%;
-
}
-
-
.amap-icon img,
-
.amap-marker-content img{
-
width:
25px;
-
height:
34px;
-
}
-
-
.marker {
-
position: absolute;
-
top:
-20px;
-
right:
-118px;
-
color:
#fff;
-
padding:
4px
10px;
-
box-shadow:
1px
1px
1px rgba(
10,
10,
10,
.2);
-
white-space: nowrap;
-
font-size:
12px;
-
font-family:
"";
-
background-color:
#25A5F7;
-
border-radius:
3px;
-
}
-
-
.input-card{
-
width:
18rem;
-
z-index:
170;
-
}
-
-
.input-card .btn{
-
margin-right:
.8rem;
-
}
-
-
.input-card .btn:last-child{
-
margin-right:
0;
-
}
-
</style>
-
-
<% include(
"/web/include/head.html"){} %>
-
<script type=
"text/javascript"
-
src=
"https://webapi.amap.com/maps?v=1.4.15&key=9ac90d41d649732b840fb59de296d287"></script>
-
<script type=
"text/javascript">
-
-
var marker, map = null;
-
-
$(function(){
-
//初始化一个腾讯地图
-
mapInit();
-
//alert(
"1111----");
-
getCompanyPosition();
-
//alert(
"4444----");
-
-
});
-
-
-
function mapInit() {
-
//alert(
"2222----");
-
marker, map = new AMap.Map(
"container", {
-
resizeEnable: true,
-
center: [
113.5403600000,
34.8043600000],
-
zoom:
4
-
});
-
}
-
-
-
-
var companyLogoArray=[];
-
var imgUrl=
"${ctxPath}";
-
-
function getCompanyPosition() {
-
-
// 通过ajax调用后台获取企业信息json
-
$.ajax({
-
url:
"${ctxPath}/KpCompany/getBaseCompany",
-
success:function(data){
-
companyInfoJsonArray = eval(data);
-
-
//使用ajax得到的json数组样例
-
//[{
"logoName":
"putty",
"companyId":
"d139a08326874965be63106a2c10ee6a",
"logoSrc":
"/KpCompany/showPicture?pk=d139a08326874965be63106a2c10ee6a",
"Lng":
"1",
"Lat":
"1",
"logoSuffix":
".exe"}]
-
-
//addMarkerOne();
-
//addMarkerTwo();
-
//marker.on(
'click', showInfoM);
-
-
for(var i=
0; i<companyInfoJsonArray.length; i++) {
-
-
//得到经纬度地址
-
var companyName=companyInfoJsonArray[i][
"companyName"];
-
var longitude=companyInfoJsonArray[i][
"longitude"];
-
var latitude=companyInfoJsonArray[i][
"latitude"];
-
//调用经纬度解析方法
-
var positionArray=[];
-
-
positionArray.push(longitude);
-
positionArray.push(latitude);
-
-
//alert(companyName);
-
//alert(positionArray);
-
//得到企业的logo的src
-
var companyLogoSrc=imgUrl+companyInfoJsonArray[i][
"logoSrc"];
-
-
//alert(companyLogoSrc);
-
//得到企业logo的src数组
-
//companyLogoArray.push(companyLogoSrc);
-
-
-
var markerDesign = new AMap.Marker({
-
icon: companyLogoSrc,
-
position: positionArray,
-
offset: new AMap.Pixel(
-13,
-30)
-
});
-
-
markerDesign.setMap(map);
-
//markerDesign.on(
'click', showInfoM);
-
-
}
-
-
-
// function addMarkerOne() {
-
// marker = new AMap.Marker({
-
// icon:
"https://3gimg.qq.com/lightmap/api_v2/2/4/122/theme/default/imgs/marker.png",
-
// position: [
121.659637,
42.017033],
-
// offset: new AMap.Pixel(
-13,
-30)
-
// });
-
// marker.setMap(map);
-
//
-
// }
-
//
-
//
-
// function showInfoM(e){
-
// var text =
'您好！'
-
// document.querySelector(
"#text").innerText = text;
-
// }
-
//
-
//
-
// function addMarkerTwo() {
-
// marker = new AMap.Marker({
-
// icon:
"https://3gimg.qq.com/lightmap/api_v2/2/4/122/theme/default/imgs/marker.png",
-
// position: [
113.5403600000,
34.8043600000],
-
// offset: new AMap.Pixel(
-13,
-30)
-
// });
-
// marker.setMap(map);
-
// }
-
}});
-
-
}
-
-
// function showInfoM(e){
-
// js.alert(
'中原云数据',{icon:
1})
-
// }
-
-
-
</script>
-
</head>
-
<body>
-
<div style=
"width:1403px;height:600px" id=
"container"></div>
-
<div
class="info" id="text">
-
请点击覆盖物试试
-
</div>
-
</body>
-
</html>
腾讯地图API：
-
<!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>demo</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;
-
margin-top:
10px;
-
overflow: hidden;
-
}
-
input
#address {
-
width:
300px;
-
}
-
</style>
-
<% include(
"/web/include/head.html"){} %>
-
<script charset=
"utf-8" src=
"https://map.qq.com/api/js?v=2.exp&key=NAEBZ-OVLKU-ELLVG-2Q2WU-DC4AE-VKBGM"></script>
-
<!--<script type=
"text/javascript" src=
"jquery-1.9.1.js"></script>-->
-
<script type=
"text/javascript">
-
-
//var companyInfoJson=[];
-
//var companyLocations=[];
-
var markerObject=[];
-
var geocoder, map = null;
-
var companyInfoJsonArray=[];
-
//var companyInfoJsonArray=[{logoName:
"3b57b176939f5475c0e2dd24e24734c", companyId:
"625d0db73aa6445c9bcd15c27349e29e", logoSrc:
"/KpCompany/showPicture?pk=625d0db73aa6445c9bcd15c27349e29e", companyName:
"阿里巴巴", registrationAddr:
"杭州市余杭区文一西路969号"}];
-
var imgUrl=
"${ctxPath}/KpCompany/getBaseCompany";
-
var Map = qq.maps.Map;
-
var Marker = qq.maps.Marker;
-
var LatLng = qq.maps.LatLng;
-
var Event = qq.maps.event;
-
-
var MarkerImage = qq.maps.MarkerImage;
-
var MarkerShape = qq.maps.MarkerShape;
-
var MarkerAnimation = qq.maps.MarkerAnimation;
-
var Point = qq.maps.Point;
-
var Size = qq.maps.Size;
-
var ALIGN = qq.maps.ALIGN;
-
-
var MVCArray = qq.maps.MVCArray;
-
var MarkerCluster = qq.maps.MarkerCluster;
-
var markerClusterer = qq.maps.MarkerCluster;
-
var Cluster = qq.maps.Cluster;
-
var MarkerDecoration = qq.maps.MarkerDecoration;
-
var markers = new MVCArray();
-
//var markerCluster;
-
-
//$(function(){
-
//初始化一个腾讯地图
-
//mapInit();
-
//getCompanyPosition();
-
//getCompanyPosition();
-
//使用ajax得到的json数组样例
-
//[{
"logoName":
"putty",
"companyId":
"d139a08326874965be63106a2c10ee6a",
"logoSrc":
"/KpCompany/showPicture?pk=d139a08326874965be63106a2c10ee6a",
"companyName":
"1",
"registrationAddr":
"1",
"logoSuffix":
".exe"}]
-
//logo拼接得到：imgUrl + logoSrc + logoSuffix
-
-
//});
-
-
//function mapInit() {
-
//var center = new qq.maps.LatLng(
39.916527,
116.397128);
-
//map = new qq.maps.Map(document.getElementById(
'container'), {
-
// center: center,
-
// zoom:
4,
-
//});
-
//}
-
-
-
//使用ajax得到的json数组样例
-
//[{
"logoName":
"putty",
"companyId":
"d139a08326874965be63106a2c10ee6a",
"logoSrc":
"/KpCompany/showPicture?pk=d139a08326874965be63106a2c10ee6a",
"companyName":
"1",
"registrationAddr":
"1",
"logoSuffix":
".exe"}]
-
// 通过ajax调用后台获取企业信息json
-
$.ajax({
-
url:
"${ctxPath}/KpCompany/getBaseCompany",
-
success:function(data){
-
companyInfoJsonArray = eval(data);
-
//alert(
"1111----"+companyInfoJsonArray.length);
-
-
var latlng = new LatLng(
39.91,
116.38);
-
var options = {
-
'zoom':
4,
-
'center':latlng,
-
'mapTypeId':
"roadmap"
-
};
-
-
var map = new Map(document.getElementById(
'map_canvas'), options);
-
//alert(
"map-ok----");
-
-
-
//添加到提示窗
-
var infoWin = new qq.maps.InfoWindow({
-
map: map
-
});
-
-
function createCluster() {
-
-
for (var i =
0; i < companyInfoJsonArray.length; i++) {
-
(function(n){
-
var latLng = new LatLng(companyInfoJsonArray[i][
"latitude"], companyInfoJsonArray[i][
"longitude"]);
-
var decoration = new MarkerDecoration(i, new Point(
0,
-5));
-
var companyLogoSrc=companyInfoJsonArray[i][
"logoSrc"];
-
-
-
var anchor = new qq.maps.Point(
0,
10),
-
scaleSize = new qq.maps.Size(
22,
22),
-
origin = new qq.maps.Point(
0,
0),
-
icon = new qq.maps.MarkerImage(
-
companyLogoSrc,
-
null,
-
origin,
-
anchor,
-
scaleSize
-
);
-
var marker = new Marker({
-
'position':latLng,
-
map:map
-
});
-
marker.setIcon(icon);
-
//获取标记的点击事件
-
var companyName=companyInfoJsonArray[i][
"companyName"];
-
var registrationAddr=companyInfoJsonArray[i][
"registrationAddr"];
-
var legalPerson=companyInfoJsonArray[i][
"legalPerson"];
-
var registrationArea=companyInfoJsonArray[i][
"registrationArea"];
-
-
var message=
'<div style="text-align:center;"><b>企业信息</b></div>'
-
+
'<div>企业名称：'+companyName+
'</div>'
-
+
'<div>企业法人：'+legalPerson+
'</div>'
-
+
'<div>企业地址：'+registrationAddr+
'</div>'
-
+
'<div>注册地区：'+registrationArea+
'</div>';
-
qq.maps.event.addListener(marker,
'click', function() {
-
location.href=
'${ctxPath}/KpCompany/companyAudit?op=look&companyId='+companyInfoJsonArray[n][
"companyId"];
-
});
-
-
qq.maps.event.addListener(marker,
'mouseover', function() {
-
infoWin.open();
-
infoWin.setContent(message);
-
infoWin.setPosition(latLng);
-
});
-
markerObject.push(companyInfoJsonArray[n]);
-
markers.push(marker);
-
})(i);
-
}
-
-
markerClusterer = new MarkerCluster({
-
map:map,
-
minimumClusterSize:
2, //默认
2
-
markers:markers,
-
zoomOnClick:true, //默认为true
-
gridSize:
30, //默认
60
-
averageCenter:true, //默认false
-
maxZoom:
4, //默认
18
-
});
-
-
Event.addListener(markerClusterer,
'clusterclick', function (evt) {
-
// writeLog(
"mouse event", eventType);
-
var ss = evt;
-
//alert(
'点击了聚合点');
-
});
-
-
};
-
createCluster();
-
}});
-
-
//}
-
function clearOverlays() {
-
if (markers) {
-
$.each(markers.elems,function(key ,val){
-
//清除覆盖层
-
val.setVisible(false);
-
if(markerObject[key][
"companyName"].indexOf($(
"#keyword").val()) >=
0)
-
val.setVisible(true);
-
})
-
}
-
}
-
-
-
/*
-
* set markers
-
*/
-
-
-
</script>
-
-
</head>
-
-
<body>
-
<!--<div>
-
<input id=
"address" type=
"textbox" value=
"中国,北京,海淀区,海淀大街38号">
-
<button onClick=
"codeAddress()">search</button>
-
</div>
-
-->
-
<div>
-
<input id=
"keyword" type=
"textbox" value=
"中原云数据">
-
<input type=
"button" value=
"搜索" onclick=
"clearOverlays()">
-
</div>
-
-
<div style=
"width:1403px;height:600px" id=
"map_canvas"></div>
-
<!--<p>输入地址，点击search进行地址解释,点击Marker会弹出反查结果。</p>
-
-->
-
</body>
-
-
</html>
转载：https://blog.csdn.net/yezonggang/article/details/113059049
查看评论