当前位置： 文江博客话题详情

如何更改 Gmap 标记颜色？

发布于 2024-08-11 15:49:36 字数 411 浏览 9 评论 0原文

我有一个带有不同点的自定义谷歌地图：

Markers[0] = new Array(new GMarker(new GLatLng(45.0, 9.0)), "Location1", "<strong>Address Line</strong><br/>Some information");
Markers[1] = new Array(new GMarker(new GLatLng(45.0, 12.0)), "Location2", "<strong>Address Line</strong><br/>Some information");

等等。

我只是想将标记的颜色从默认的红色更改为红色。即第二个蓝色。

如何做到这一点？

原文

I've a custom google map with different points:

Markers[0] = new Array(new GMarker(new GLatLng(45.0, 9.0)), "Location1", "<strong>Address Line</strong><br/>Some information");
Markers[1] = new Array(new GMarker(new GLatLng(45.0, 12.0)), "Location2", "<strong>Address Line</strong><br/>Some information");

etc.

Simply I want to change the color of the markers from the default red. I.E. the 2nd blue.

How to do this?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（4）

无悔心 2024-08-18 15:49:37

这是一个简单的代码，允许谷歌地图使用多种颜色标记，

<?php
$con = mysql_connect("localhost","root","");
$Db=mysql_select_db("map",$con);
$select_det=mysql_query("select * from record");

// some code
?> 
<html>
<head>
<title>EasyGoogleMap</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAPDUET0Qt7p2VcSk6JNU1sBSM5jMcmVqUpI7aqV44cW1cEECiThQYkcZUPRJn9vy_TWxWvuLoOfSFBw" type="text/javascript"></script>
  </head>
  <body onUnload="GUnload()">

<div id="map" style="width: 550px; height: 450px"></div>
<script type="text/javascript">
var greenIcon = new GIcon(G_DEFAULT_ICON);
greenIcon.image = "http://localhost/pointer_image/markerRd.png";
var markerOptions1 = {icon:greenIcon};

    var redIcon = new GIcon(G_DEFAULT_ICON);
redIcon.image = "http://localhost/pointer_image/markerGr.png";
var markerOptions2 = {icon:redIcon};

var yIcon = new GIcon(G_DEFAULT_ICON);
yIcon.image = "http://localhost/pointer_image/markerBl.png";
var markerOptions3 = {icon:yIcon};

    //<![CDATA[
    if (GBrowserIsCompatible()) { 


      // A function to create the marker and set up the event window
      // Dont try to unroll this function. It has to be here for the function closure
      // Each instance of the function preserves the contends of a different instance
      // of the "marker" and "html" variables which will be needed later when the event triggers.    
      function createMarker(point,html,type) {    
        if(type=="b")
        {   
        var marker = new GMarker(point, markerOptions1);
        }   
        else if(type=="c")
        {
         var marker = new GMarker(point, markerOptions2);
        }   
        else
        {
         var marker = new GMarker(point, markerOptions3);
        }
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });     
        return marker;      
      }

      // Display the map, with some controls and set the initial location 
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      <?php
      while($fetch_record=mysql_fetch_array($select_det))
     {
     ?>
      map.setCenter(new GLatLng(<?php echo $fetch_record['lat'];?>,<?php echo $fetch_record['long'];?>),8);

      // Set up three markers with info windows 

      var point = new GLatLng(<?php echo $fetch_record['lat'];?>,<?php echo $fetch_record['long'];?>);
      var marker = createMarker(point,'<?php echo $fetch_record['desc'];?>','<?php echo $fetch_record['type'];?>')
      map.addOverlay(marker);

     <?php
     }
     ?>

    }

    // display a warning if the browser was not compatible
    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }

    // This Javascript is based on code provided by the
    // Community Church Javascript Team
    // http://www.bisphamchurch.org.uk/   
    // http://econym.org.uk/gmap/

    //]]>
    </script> 
</body>
</html>

您必须将标记图像从名为“pointer_image”的文件夹中放入，

更改代码

您可以通过编辑这部分代码来

<script type="text/javascript">
var greenIcon = new GIcon(G_DEFAULT_ICON);
greenIcon.image = "http://localhost/pointer_image/markerRd.png";
var markerOptions1 = {icon:greenIcon};

    var redIcon = new GIcon(G_DEFAULT_ICON);
redIcon.image = "http://localhost/pointer_image/markerGr.png";
var markerOptions2 = {icon:redIcon};

var yIcon = new GIcon(G_DEFAULT_ICON);
yIcon.image = "http://localhost/pointer_image/markerBl.png";
var markerOptions3 = {icon:yIcon};

：--希望这会帮助你，我还提供了数据库，它也在下面-----

-- phpMyAdmin SQL Dump
-- version 2.11.4
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Sep 19, 2011 at 12:48 PM
-- Server version: 5.0.51
-- PHP Version: 5.2.5

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

--
-- Database: `map`
--

-- --------------------------------------------------------

--
-- Table structure for table `record`
--

CREATE TABLE IF NOT EXISTS `record` (
  `id` int(11) NOT NULL auto_increment,
  `lat` varchar(100) NOT NULL,
  `long` varchar(100) NOT NULL,
  `desc` varchar(200) NOT NULL,
  `type` varchar(5) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

--
-- Dumping data for table `record`
--

INSERT INTO `record` (`id`, `lat`, `long`, `desc`, `type`) VALUES
(1, '22.572646', '88.363895', 'kolkata', 'a'),
(2, '22.982022', '88.440027', 'kalyani', 'b'),
(3, '23.4', '88.5', 'krishnanagar', 'c');

here is a simple code that allows multiple color marker for google map

<?php
$con = mysql_connect("localhost","root","");
$Db=mysql_select_db("map",$con);
$select_det=mysql_query("select * from record");

// some code
?> 
<html>
<head>
<title>EasyGoogleMap</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAPDUET0Qt7p2VcSk6JNU1sBSM5jMcmVqUpI7aqV44cW1cEECiThQYkcZUPRJn9vy_TWxWvuLoOfSFBw" type="text/javascript"></script>
  </head>
  <body onUnload="GUnload()">

<div id="map" style="width: 550px; height: 450px"></div>
<script type="text/javascript">
var greenIcon = new GIcon(G_DEFAULT_ICON);
greenIcon.image = "http://localhost/pointer_image/markerRd.png";
var markerOptions1 = {icon:greenIcon};

    var redIcon = new GIcon(G_DEFAULT_ICON);
redIcon.image = "http://localhost/pointer_image/markerGr.png";
var markerOptions2 = {icon:redIcon};

var yIcon = new GIcon(G_DEFAULT_ICON);
yIcon.image = "http://localhost/pointer_image/markerBl.png";
var markerOptions3 = {icon:yIcon};

    //<![CDATA[
    if (GBrowserIsCompatible()) { 


      // A function to create the marker and set up the event window
      // Dont try to unroll this function. It has to be here for the function closure
      // Each instance of the function preserves the contends of a different instance
      // of the "marker" and "html" variables which will be needed later when the event triggers.    
      function createMarker(point,html,type) {    
        if(type=="b")
        {   
        var marker = new GMarker(point, markerOptions1);
        }   
        else if(type=="c")
        {
         var marker = new GMarker(point, markerOptions2);
        }   
        else
        {
         var marker = new GMarker(point, markerOptions3);
        }
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });     
        return marker;      
      }

      // Display the map, with some controls and set the initial location 
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      <?php
      while($fetch_record=mysql_fetch_array($select_det))
     {
     ?>
      map.setCenter(new GLatLng(<?php echo $fetch_record['lat'];?>,<?php echo $fetch_record['long'];?>),8);

      // Set up three markers with info windows 

      var point = new GLatLng(<?php echo $fetch_record['lat'];?>,<?php echo $fetch_record['long'];?>);
      var marker = createMarker(point,'<?php echo $fetch_record['desc'];?>','<?php echo $fetch_record['type'];?>')
      map.addOverlay(marker);

     <?php
     }
     ?>

    }

    // display a warning if the browser was not compatible
    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }

    // This Javascript is based on code provided by the
    // Community Church Javascript Team
    // http://www.bisphamchurch.org.uk/   
    // http://econym.org.uk/gmap/

    //]]>
    </script> 
</body>
</html>

here you have to put your marker image from a folder called "pointer_image"

you can change the marker image by chenging the code

by editing this portion of code :--

<script type="text/javascript">
var greenIcon = new GIcon(G_DEFAULT_ICON);
greenIcon.image = "http://localhost/pointer_image/markerRd.png";
var markerOptions1 = {icon:greenIcon};

    var redIcon = new GIcon(G_DEFAULT_ICON);
redIcon.image = "http://localhost/pointer_image/markerGr.png";
var markerOptions2 = {icon:redIcon};

var yIcon = new GIcon(G_DEFAULT_ICON);
yIcon.image = "http://localhost/pointer_image/markerBl.png";
var markerOptions3 = {icon:yIcon};

hope this will help you ,i am also providing the database thi it also in bellow------

-- phpMyAdmin SQL Dump
-- version 2.11.4
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Sep 19, 2011 at 12:48 PM
-- Server version: 5.0.51
-- PHP Version: 5.2.5

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

--
-- Database: `map`
--

-- --------------------------------------------------------

--
-- Table structure for table `record`
--

CREATE TABLE IF NOT EXISTS `record` (
  `id` int(11) NOT NULL auto_increment,
  `lat` varchar(100) NOT NULL,
  `long` varchar(100) NOT NULL,
  `desc` varchar(200) NOT NULL,
  `type` varchar(5) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

--
-- Dumping data for table `record`
--

INSERT INTO `record` (`id`, `lat`, `long`, `desc`, `type`) VALUES
(1, '22.572646', '88.363895', 'kolkata', 'a'),
(2, '22.982022', '88.440027', 'kalyani', 'b'),
(3, '23.4', '88.5', 'krishnanagar', 'c');
回复 原文
若水般的淡然安静女子 2024-08-18 15:49:36

在标记上使用 setImage 方法。

Marker[1].setImage('blue-icon.png');

http://gmaps-samples.googlecode.com/svn/trunk/ whackamarker/whackamarker.htm

Use the setImage method on the marker.

Marker[1].setImage('blue-icon.png');

http://gmaps-samples.googlecode.com/svn/trunk/whackamarker/whackamarker.htm

回复 原文
你好，陌生人 2024-08-18 15:49:36

您可以在原始标记上放置具有所需颜色的新标记。此处通过示例解释了此技术：http://esa.ilmari.googlepages.com /hellocolorswitch.htm

You can put a new marker with the desired color over the original marker. This technique, with an example, is explained here: http://esa.ilmari.googlepages.com/hellocolorswitch.htm

回复 原文
咆哮 2024-08-18 15:49:36

如果你使用 gmap3 插件，你可以像这个例子一样。

https://gmap3.net/api-marker.html。

您可以像这样使用所有这些颜色和图标，

https://sites.google.com/site /gmapsdevelopment/

if you are using gmap3 plugin you can do like this example.

https://gmap3.net/api-marker.html.

And you can use all these colours and icons like this,

https://sites.google.com/site/gmapsdevelopment/

回复 原文
~没有更多了~

关于作者

-柠檬树下少年和吉他

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

小瓶盖

文章 0 评论 0

wxsp_Ukbq8xGR

文章 0 评论 0

1638627670

文章 0 评论 0

仅一夜美梦

文章 0 评论 0

夜访吸血鬼

文章 0 评论 0

近卫軍团

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文