SVG画出定位符号

使用高德地图做背景

by Mike Lin

HTML

<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css">
<script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="https://webapi.amap.com/maps?v=1.3&amp;key=a5ebc730f80db3b1375a691afad00942"></script>
<script src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<body>
<div id="container"></div>
</body>

JavaScript

const content = `<svg width="30" height="50">
         <circle cx="17" cy="15" r="5" fill="transparent" stroke="#f44336"/>
         <path d="M4,15 a 1,1 0, 1, 1, 25 0 L 15 50 L 4 15" fill="transparent" stroke="#f44336" stroke-width="2"/>
                  </svg>`
const lng = 116.397428
const lat = 39.90923
var map = new AMap.Map('container', {
    resizeEnable: true,
    zoom:11,
    center: [lng, lat]

});
let marker = new AMap.Marker({
  content: content,
  map: map,
  position: [116.397428, 39.90923]
});
marker.setTitle(`经度：${lng}\n纬度：${lat}`);
marker.setMap(map)