هنا أخبركم فقط كيفية استخدام واجهة برمجة تطبيقات خرائط Google. يعتبر وسيلة لجذب الانتباه. لبعض الأسباب ، كانت Google بعيدة عن الجميع.
نسخة الكود كما يلي:
<! doctype html>
<html>
<head>
<title> الموقع الجغرافي </title>
<meta name = "viewport" content = "scale scale = 1.0 ، charalable = no">
<meta charset = "utf-8">
<style>
html ، الجسم ، #خريطة canvas {
الهامش: 0 ؛
الحشو: 0 ؛
الارتفاع: 100 ٪
}
</style>
<script src = "https://maps.googleapis.com/maps/api/js؟v=3.exp&sensor=false"> </script>
<script>
خريطة فار
فار بولي ؛
تهيئة الدالة () {
var mylatlng = new Google.maps.latlng (31.1937077 ، 121.4158436) ؛
مواقع var = [
['Test1 ، الدقة: 150m' ، 31.1937077 ، 121.4158436 ، 100] ،
['Test2 ، الدقة: 150m' ، 31.2937077 ، 121.4158436 ، 100] ،
['Test3 ، الدقة: 150m' ، 31.0937077 ، 121.2158436 ، 100] ،
['Test4 ، الدقة: 150m' ، 31.3937077 ، 120.4158436 ، 100] ،
['Test5 ، الدقة: 150m' ، 31.1637077 ، 120.4858436 ، 100] ،
['Test6 ، الدقة: 150m' ، 31.1037077 ، 121.5158436 ، 100]
] ؛
var mapoptions = {
التكبير: 13 ،
المركز: mylatlng ،
maptypeid: google.maps.maptypeid.roadmap
} ؛
MAP = جديد google.maps.map (document.getElementByid ('map-canvas') ،
mapoptions) ؛
// إعدادات الخط
var polyoptions = {
Strokecolor: '#00ff00' ، // color
السكتة الدماغية: 1.0 ، // الشفافية
وزن السكتة الدماغية: 4 // العرض
}
poly = جديد google.maps.polyline (polyoptions) ؛
poly.setmap (MAP) ؛ // حمولة
/* حلقة لتمييز جميع الإحداثيات*/
/*لـ (var i = 0 ؛ i <socation.length ؛ i ++) {
var loc = [] ؛
loc.push (مواقع [i] [1]) ؛
loc.push (مواقع [i] [2]) ؛
var path = poly.getPath () ؛ // احصل على إحداثيات الخط
path.push (جديد google.maps.latlng (loc [0] ، loc [1])) ؛ // أضف إحداثيات علامة إلى الخطوط
// إنشاء أيقونة العلامة
Marker = جديد google.maps.marker ({
الموضع: جديد google.maps.latlng (loc [0] ، loc [1]) ،
الخريطة: الخريطة
// icon: "https://maps.gstatic.com/mapfiles/markers/marker_green.png"
}) ؛
}*/
var marker ، i ، circle ؛
var iwarray = [] ؛
var InfoWindow ؛
var latlngbounds = new Google.maps.latlngbounds () ؛
var iconyellow = new Google.maps.markerimage ("http://maps.google.com/mapfiles/ms/icons/yellow-dot.png") ؛
لـ (i = 0 ؛ i <sorts.length ؛ i ++) {
var loc = [] ؛
loc.push (مواقع [i] [1]) ؛
loc.push (مواقع [i] [2]) ؛
var path = poly.getPath () ؛ // احصل على إحداثيات الخط
path.push (جديد google.maps.latlng (loc [0] ، loc [1])) ؛
var latlng = new Google.maps.latlng (المواقع [i] [1] ، مواقع [i] [2]) ؛
latlngbounds.extend (latlng) ؛
إذا (المواقع [i] [0] .indexof ("[[cached") == 0 || (المواقع [i]
Marker = جديد google.maps.marker ({
الموقف: latlng ،
الخريطة: خريطة ،
أيقونة: iconyellow
}) ؛
var iw = '<div style = "font-size: 12px ؛ word-wrap: word-word ؛ word-break: break-all ؛"> <strong> <font color = "#ff0000">' + socations [i]
} آخر {
Marker = جديد google.maps.marker ({
الموقف: latlng ،
الخريطة: الخريطة
}) ؛
var iw = '<div style = "font-size: 12px ؛ word-wrap: word-word ؛ word-break: break-all ؛"> <strong> <font color = "#000000">' + socations [i] [0] + '</strong> <viv>' ؛
}
iwarray [i] = iw ؛
google.maps.event.addlistener (Marker ، 'Mouseover' ، (function (marker ، i) {
وظيفة الإرجاع () {
InfoWindow = جديد google.maps.infowindow ({
المحتوى: iwarray [i] ،
MaxWidth: 200 ،
Pixeloffset: جديد google.maps.size (0 ، 0)
}) ؛
InfoWindow.Open (MAP ، Marker) ؛
}
}) (علامة ، ط)) ؛
google.maps.event.addlistener (Marker ، 'mouseout' ، function () {
InfoWindow.Close () ؛
}) ؛
Circle = جديد google.maps.circle ({
الخريطة: خريطة ،
دائرة نصف قطرها: مواقع [i] [3]
FillColor: '#0000AA' ،
Folyopacity: 0.01 ،
وزن السكتة الدماغية: 1 ،
Strokecolor: '#0000cc' ،
السكتة الدماغية: 0.8
}) ؛
Circle.Bindto ('center' ، marker ، 'position') ؛
}
map.fitbounds (latlngbounds) ؛
var leader = google.maps.event.addlisteneronce (MAP ، "Idle" ، function ()
{
var zoomlevel = parseint (map.getzoom ()) ؛
إذا (Zoomlevel> 13)
map.setzoom (13) ؛
}) ؛
}
google.maps.event.adddomlistener (نافذة ، "تحميل" ، تهيئة) ؛
</script>
</head>
<body>
<div id = "map-canvas"> </viv>
</body>
</html>