高德地图API
<!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="搜索" οnclick="clearOverlays()">
</div>
<div style="width:1403px;height:600px" id="map_canvas"></div>
<!--<p>输入地址，点击search进行地址解释,点击Marker会弹出反查结果。</p>
-->
</body>
</html>
效果图：
