<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!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"> <style> html, body, #container { width: 100%; height: 100%; } </style> <title>圓的繪製</title> <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /> <script src="https://webapi.amap.com/maps?v=1.4.12&key=7b6ccda63f7884f88bbd464a00517b68&plugin=AMap.CircleEditor"></script> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.12&key=7b6ccda63f7884f88bbd464a00517b68&plugin=AMap.Geocoder"></script> <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> </head> <body> <div id="container"></div> <script type="text/javascript"> var geocoder; if(!geocoder){ geocoder = new AMap.Geocoder({ // city: "010", //城市設爲北京,默認:「全國」 }); } $(function () { var address="北京市朝陽區阜榮街10號"; geocoder.getLocation(address, function(status, result) { var lat = result.geocodes[0].location.lat var lng = result.geocodes[0].location.lng var map = new AMap.Map("container", { center: [lng.toString(),lat.toString()], zoom: 14, }) var circle = new AMap.Circle({ center: [lng.toString(),lat.toString()], radius: 2000, //半徑 borderWeight: 3, strokeColor: "#FF33FF", strokeOpacity: 1, strokeWeight: 6, strokeOpacity: 0.2, fillOpacity: 0.4, strokeStyle: 'dashed', strokeDasharray: [10, 10], // 線樣式還支持 'dashed' fillColor: '#1791fc', zIndex: 50, }) circle.setMap(map) // 縮放地圖到合適的視野級別 map.setFitView([ circle ]) }); }) </script> </body> </html>
本文爲轉載侵權刪javascript