Configuração Inicial e Marcadores Básicos
Para começar a utilizar a API JavaScript do AMap, é necessário incluir o script principal com sua chave de API. Abaixo, demonstramos como inicializar um mapa básico e adicionar marcadores a partir de um array de coordenadas geográficas.
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Mapa Básico AMap</title>
<script src="https://webapi.amap.com/maps?v=2.0&key=SUA_CHAVE_AQUI&plugin=AMap.ToolBar"></script>
<style>
#mapa-container { width: 100%; height: 500px; }
</style>
</head>
<body>
<div id="mapa-container"></div>
<script>
const pontosInteresse = [
{ id: 1, lng: 116.453844, lat: 39.943812, nome: "Ponto A" },
{ id: 2, lng: 116.473844, lat: 39.923812, nome: "Ponto B" }
];
const mapa = new AMap.Map('mapa-container', {
zoom: 10,
center: [pontosInteresse[0].lng, pontosInteresse[0].lat]
});
const marcadores = pontosInteresse.map(ponto => {
return new AMap.Marker({
position: new AMap.LngLat(ponto.lng, ponto.lat),
title: ponto.nome
});
});
mapa.add(marcadores);
AMap.plugin('AMap.ToolBar', () => {
mapa.addControl(new AMap.ToolBar());
});
</script>
</body>
</html>
Utilizadno SimpleMarker para Ícones Personalizados
O componente SimpleMarker da biblioteca UI do AMap permite uma personalização avançada dos ícones. É possível definir o ícone através de uma URL, um objeto de configuração com estilos inline, ou até mesmo uma string HTML ou um nó DOM.
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>SimpleMarker AMap</title>
<script src="https://webapi.amap.com/maps?v=2.0&key=SUA_CHAVE_AQUI"></script>
<script src="https://webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
<style>
html, body, #container { width: 100%; height: 100%; margin: 0; }
.icone-customizado { background: orange; width: 20px; height: 40px; border-radius: 5px; }
</style>
</head>
<body>
<div id="container"></div>
<div style="display:none"><div id="no-dom" class="icone-customizado"></div></div>
<script>
const mapa = new AMap.Map('container', { zoom: 5 });
AMapUI.loadUI(['overlay/SimpleMarker'], function(SimpleMarker) {
const centro = mapa.getCenter();
new SimpleMarker({
iconLabel: '1',
iconStyle: 'https://webapi.amap.com/theme/v1.3/markers/b/mark_r.png',
offset: new AMap.Pixel(-12, -40),
map: mapa,
position: centro
});
new SimpleMarker({
iconLabel: '2',
iconStyle: {
src: 'https://webapi.amap.com/theme/v1.3/markers/b/mark_b.png',
style: { width: '20px', height: '30px' }
},
offset: new AMap.Pixel(-10, -30),
map: mapa,
position: [116.40, 39.90]
});
new SimpleMarker({
iconLabel: '3',
iconStyle: '<div style="background:red;width:20px;height:40px;"></div>',
offset: new AMap.Pixel(-10, -40),
map: mapa,
position: [116.30, 39.80]
});
new SimpleMarker({
iconLabel: '4',
iconStyle: document.getElementById('no-dom'),
offset: new AMap.Pixel(-10, -40),
map: mapa,
position: [116.50, 40.00]
});
});
</script>
</body>
</html>
Navegação de Distritos com DistrictExplorer
Para visualizar limites administrativos, o componente DistrictExplorer é ideal. Ele permite carregar dados geográficos de países, províncias e cidades, renderizando polígonos e gerenciando interações como hover e clique.
AMapUI.load(['ui/geo/DistrictExplorer', 'lib/$'], function (DistrictExplorer, $) {
const exploradorDistritos = new DistrictExplorer({
eventSupport: true,
map: mapa
});
let noAtual = null;
function atualizarEstiloHover(feature, isHover) {
if (!feature) return;
const props = feature.properties;
const poligonos = exploradorDistritos.findFeaturePolygonsByAdcode(props.adcode);
poligonos.forEach(pol => {
pol.setOptions({ fillOpacity: isHover ? 0.5 : 0.2 });
});
}
exploradorDistritos.on('featureMouseover featureMouseout', function (e, feature) {
atualizarEstiloHover(feature, e.type === 'featureMouseover');
});
exploradorDistritos.on('featureClick', function (e, feature) {
const props = feature.properties;
if (props.childrenNum > 0) {
carregarRegiao(props.adcode);
}
});
function renderizarPoligonos(no) {
mapa.setBounds(no.getBounds(), false, null, true);
exploradorDistritos.clearFeaturePolygons();
exploradorDistritos.renderSubFeatures(no, function (feature, i) {
return {
cursor: 'pointer',
strokeColor: '#3366cc',
strokeWeight: 2,
fillColor: '#ff9900',
fillOpacity: 0.3
};
});
}
function carregarRegiao(adcode) {
exploradorDistritos.loadAreaNode(adcode, function (error, no) {
if (error) return console.error(error);
noAtual = no;
renderizarPoligonos(no);
});
}
carregarRegiao(110000);
});
Efeito de Recorte Inverso
Uma técnica avançada é criar um efeito de recorte inverso, onde uma área específica é destacada e o restante do mapa é escurecido. Isso é feito construindo um polígono com anéis, onde o anel externo é o país e os anéis internos são as áreas a serem recortdaas.
function extrairAneis(feature) {
const coords = feature.geometry.coordinates;
return coords.map(coord => coord[0]);
}
function obterAnelMaisLongo(feature) {
const aneis = extrairAneis(feature);
aneis.sort((a, b) => b.length - a.length);
return aneis[0];
}
AMapUI.load(['geo/DistrictExplorer'], function(DistrictExplorer) {
const explorador = new DistrictExplorer({ map: mapa });
const codigoPais = 100000;
const codigosProvincias = [110000];
const codigosCidades = [230100];
explorador.loadMultiAreaNodes(
[codigoPais].concat(codigosCidades),
function(error, nos) {
if (error) return;
const noPais = nos[0];
const nosCidades = nos.slice(1);
const caminhoPoligono = [];
caminhoPoligono.push(obterAnelMaisLongo(noPais.getParentFeature()));
codigosProvincias.forEach(cod => {
const subFeature = noPais.getSubFeatureByAdcode(cod);
if(subFeature) caminhoPoligono.push(...extrairAneis(subFeature));
});
nosCidades.forEach(noCidade => {
caminhoPoligono.push(...extrairAneis(noCidade.getParentFeature()));
});
new AMap.Polygon({
bubble: true,
lineJoin: 'round',
strokeColor: 'rgba(0,0,0,0)',
strokeWeight: 0,
fillColor: '#00366D',
fillOpacity: 0.65,
map: mapa,
path: caminhoPoligono
});
}
);
});