【问题标题】:How to rotate custom marker image on google map v3如何在谷歌地图 v3 上旋转自定义标记图像
【发布时间】:2013-12-08 03:18:32
【问题描述】:

在谷歌搜索如何在谷歌地图 v3 上旋转自定义标记图像 4-5 小时后,我在这里发布了这个问题。请通过示例提出任何解决方案。

【问题讨论】:

  • 嗨,没人知道,请帮帮我,这对我来说真的很重要。

标签: google-maps rotation google-maps-markers


【解决方案1】:

user1884506 编写的代码非常有用,但它会旋转默认图标。

您无法旋转自定义图像。参考 https://developers.google.com/maps/documentation/javascript/3.exp/reference#Symbol

符号的路径,可以是内置的符号路径,也可以是使用 SVG 路径表示法表示的自定义路径。必需。

为此,您需要使用 SVG(可缩放矢量图形)创建图像。

【讨论】:

    【解决方案2】:

    请参考以下代码

    <script type="text/javascript" >
    function kh(i, j, k) {
        var a;
        var b;
        if (j != null && k != null) {
            a = j;
            b = k;
        }
        else {
            a = 12.9540112248064; b = 77.6991748809814;
        }
        if (i != null) {
            var angleDegrees = i;
        }
        else {
            angleDegrees = 0;
        }
        var angle = 45;
    
    
        var myLatlng = new google.maps.LatLng(a, b);
        var mapOptions = {
            zoom: 16,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        var arrowIcon = new Image();
        arrowIcon.src = "../Image/CarNew.png";
        var image = '../Image/add.jpg';
        var myLatLng = new google.maps.LatLng(a, b);
        var beachMarker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: {
            path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,
    scale: 2,
    rotation: angleDegrees           }    
    
         });document.getElementById("HiddenField1").value=a;
    
    
    document.getElementById("HiddenField2").value = b;
    }
    

    【讨论】:

      【解决方案3】:
      using System;
      using System.Collections;
      using System.Configuration;
      using System.Data;
      using System.Linq;
      using System.Web;
      using System.Web.Security;
      using System.Web.UI;
      using System.Web.UI.HtmlControls;
      using System.Web.UI.WebControls;
      using System.Web.UI.WebControls.WebParts;
      using System.Xml.Linq;
      using System.IO;
      
      
      public partial class NewFolder1_Rotatev3 : System.Web.UI.Page
      {
      string line;
      System.IO.StreamReader file = null;
      protected void Page_Load(object sender, EventArgs e)
      {
          if (!IsPostBack)
          {
              file = new System.IO.StreamReader("D:\\GoogleMapsDemo\\Files\\closepoints.txt");
              ScriptManager.RegisterStartupScript(Page, typeof(Page), "_ShowHideBusiJust_", "i();", true);
              Session["file"] = file;
          }
      }
      protected void Timer1_Tick(object sender, EventArgs e)
      {
          file = (System.IO.StreamReader)Session["file"];
          string[] strdata = null;
          line = file.ReadLine();
          if (line != null)
          {
              strdata = line.Split('\t');
              string j = strdata[0];
              string k = strdata[1];
              Session["Lat"] = j;
              Session["Long"] = k;
              int R = 6371; // km
              double lat1 =HiddenField1.Value != null ? Convert.ToDouble(HiddenField1.Value) : 0;
              double lat2 = Convert.ToDouble(j);
              double lon1 = HiddenField2.Value != null ? Convert.ToDouble(HiddenField2.Value) : 0;
              double lon2 =Convert.ToDouble(k);
              if (!(lat2 == 0 && lon2 == 0))
                  {
      
                  var dLat = DegreeToRadian((lat2 - lat1));
                  var dLon = DegreeToRadian((lon2 - lon1));
                  lat1 = DegreeToRadian(lat1);
                  lat2 = DegreeToRadian(lat2);
                  var a = Math.Sin(dLat / 2) * Math.Sin(dLat / 2) +
                  Math.Sin(dLon / 2) * Math.Sin(dLon / 2) * Math.Cos(lat1) * Math.Cos(lat2);
                  var c = 2 * Math.Atan2(Math.Sqrt(a), Math.Sqrt(1 - a));
                  var d = R * c;
                  var y = Math.Sin(dLon) * Math.Cos(lat2);
                  var x = Math.Cos(lat1) * Math.Sin(lat2) -
                          Math.Sin(lat1) * Math.Cos(lat2) * Math.Cos(dLon);
                  var brng = (Math.Atan2(y, x));
                  var last = RadianToDegree(brng);
                  Label2.Text = Convert.ToString(d);
                  string i = Convert.ToString(last);
                  Session["Angle"] = i;
                  string script = string.Format("i({0},{1},{2});",
                                    i.ToString(), j.ToString(), k.ToString());
              ClientScript.RegisterStartupScript(this.GetType(), "RefreshOpener", script, true);
              //System.Threading.Thread.Sleep(1000);
              //strdata[0]   - Latitude
              //strdata[1]   - Langitude
                  }
      
          }
          else
          {
              string i = Convert.ToString(Session["Angle"]);
              string j = Convert.ToString(Session["Lat"]);
              string k = Convert.ToString(Session["Long"]);
              string script = string.Format("i({0},{1},{2});",
                                    i.ToString(), j.ToString(), k.ToString());
              ClientScript.RegisterStartupScript(this.GetType(), "RefreshOpener", script, true);
              Timer1.Enabled = false;
      
          }
          Session["file"] = file;
      }
       private double DegreeToRadian(double angle)
      {
          return Math.PI * angle / 180.0;
      }
      private double RadianToDegree(double angle)
      {
          return angle * (180.0 / Math.PI);
      }
      
      }
      

      【讨论】:

      • 这是什么???用户询问如何在 Google Maps V3 API for javascript 上旋转标记,您只是发布了一段随机代码,没有任何解释它的作用,甚至不是用 javascript 编写的。下次请至少正确描述和解释您的答案,因为这对任何人都没有帮助。
      猜你喜欢
      • 1970-01-01
      • 2012-05-27
      • 2018-09-09
      • 2016-12-07
      • 2012-05-20
      • 2012-09-24
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多