个人中心
gpt4 book ai didi

javascript - 如何在谷歌地图 api3 中用一条线连接两个标记

转载 作者：行者123 更新时间：2023-11-30 12:22:03 24 4
gpt4 key购买 nike

我制作了一个 html 文件，该文件从 XML 文件中获取数据并使用其中的数据在 map 上绘制两个标记，有什么方法可以连接这两个没有固定位置的标记这是我的代码标记。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple markers</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script>
var map;
window.onload=function ()
{
    var myLatlng = new google.maps.LatLng(0,0);
    var mapOptions = {
        zoom: 4,
        center: myLatlng
    }
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    //google.maps.event.addDomListener(window, 'load', mapready);
    getdata();
    setInterval(function () {getdata()}, 1000);
}

function getdata() 
{
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
   xmlhttp.open("GET","xxxxxxxxxxx",true);
   xmlhttp.onreadystatechange=function () {gotdata()};
   xmlhttp.send();
}
var lastCoordinates={};
var polyline = new google.maps.Polyline({map:map})
var path = [];
function gotdata(){

    if (xmlhttp.readyState == 4){

        var d = xmlhttp.responseXML.documentElement 
            //innerHTML shouldn't work for XML-Nodes
            y = d.getElementsByTagName("y")[0].textContent,
            x = d.getElementsByTagName("x")[0].textContent,
            h = [x,y].join('_');
        if(lastCoordinates[h]){
          return;
        } 

        lastCoordinates[h]= new google.maps.Marker({
                              position: new google.maps.LatLng(x,y),
                              map: map,
                              title: 'YAY'
                            });
         path.push(lastcoordinates[h].getPosition());
         if (path.length >= 2) {
           polyline.setPath(path);
         }

    }
}

这是我的 XML 文件中的内容

<Location>
<x>42</x>
<y>14</y>
</Location>

它从中获取 x 和 y 数据，当我更改它时， map 会创建另一个文件。

最佳答案

  1. 创建 polyline (有关可用选项，请参阅 documentation)

     var polyline = new google.maps.Polyline({
        // set desired options for color, opacity, width, etc.
        strokeColor:"#0000FF",  // blue (RRGGBB, R=red, G=green, B=blue)
        strokeOpacity: 0.4      // opacity of line
     }); // create the polyline (global)
     var path = []; // global variable to hold all the past locations

  2. 用你的分数更新它

     function gotdata(){

         if (xmlhttp.readyState == 4){

             var d = xmlhttp.responseXML.documentElement 
                 //innerHTML shouldn't work for XML-Nodes
                 y = d.getElementsByTagName("y")[0].textContent,
                 x = d.getElementsByTagName("x")[0].textContent,
                 h = [x,y].join('_');
             if(lastCoordinates[h]){
               return;
             } 

             lastCoordinates[h]= new google.maps.Marker({
                                   position: new google.maps.LatLng(x,y),
                                   map: map,
                                   title: 'YAY'
                                 });
              path.push(lastCoordinates[h].getPosition());
              if (path.length >= 2) {
                // display the polyline once it has more than one point
                polyline.setMap(map);
                polyline.setPath(path);
              }

         }
     }

proof of concept fiddle

代码片段:

var geocoder;
var map;
var lastCoordinates = [];
var count = 0;
var polyline = new google.maps.Polyline({
   // set desired options for color width
   strokeColor:"#0000FF",  // blue (RRGGBB, R=red, G=green, B=blue)
   strokeOpacity: 0.4      // opacity of line
}); // create the polyline (global)
var path = []; // global variable to hold all the past locations

function initialize() {
    map = new google.maps.Map(
    document.getElementById("map_canvas"), {
        center: new google.maps.LatLng(37.4419, -122.1419),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    setInterval(gotdata, 1000);

}
google.maps.event.addDomListener(window, "load", initialize);

function gotdata() {

    // if (xmlhttp.readyState == 4){
    count++;
    // var d = xmlhttp.responseXML.documentElement 
    //innerHTML shouldn't work for XML-Nodes
    y = count * 0.01; // d.getElementsByTagName("y")[0].textContent,
    x = count * 0.01; //d.getElementsByTagName("x")[0].textContent,
    h = [x, y].join('_');
    if (lastCoordinates[h]) {
        return;
    }

    lastCoordinates[h] = new google.maps.Marker({
        position: new google.maps.LatLng(x, y),
        map: map,
        title: 'YAY'
    });
    map.panTo(lastCoordinates[h].getPosition());
    path.push(lastCoordinates[h].getPosition());
    if (path.length >= 2) {
        // display the polyline once it has more than one point
        polyline.setMap(map);
        polyline.setPath(path);
    }
    // }
}
html, body, #map_canvas {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>

关于javascript - 如何在谷歌地图 api3 中用一条线连接两个标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30667509/

24 4 0
文章推荐： ios - 导航栏中的多个搜索栏
文章推荐： c# - 这对这种情况有意义 - 类 vs 接口(interface) vs 抽象？
文章推荐： swift - iOS App崩溃时向服务器发送数据
文章推荐： c# - 如何在 azure 函数中禁用 XML 序列化
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com