个人中心
gpt4 book ai didi

javascript - 将地理位置添加到现有的谷歌地图

转载 作者：行者123 更新时间：2023-11-28 09:52:13 26 4
gpt4 key购买 nike

嗨，我正在根据此示例制作 map http://econym.org.uk/gmap/example_categories.htm并尝试向其中添加地理定位，但每次我尝试添加地理定位代码时，它都会破坏代码的其余部分，所以我希望有人能指出我如何让​​它工作的正确方向

我是 Google map 和地理定位新手

如果之前有人问过这个问题，我很抱歉我找不到我需要的答案

这是我在 index.html 页面中使用的代码

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<link href="test.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="scripts/downloadxml.js"></script>
<script type="text/javascript" src="scripts/map.js"></script>
</head>

 <body onload="initialize()">
 <div class="main-container">
 <img class="logo" src="images/testlogo.png" width="1000" height="150">
 <div class="overall">

 <div class="sidebar1">
 <p>Home</p>
 <p>About Us</p>
 <p>Contact Us</p>
 <p>My Portfolio</p>
 <p>Links</p>
 </div>

 <div class="sidebar2">

 <p>Hi My name is Robert Baron Austin and I'm the designer of this website and other sites like Spinfish.co.uk which was my first ever website that I handcoded by myself by using Dreamweaver, Photoshop and Illustrator.</p>

 </div>

 <div class="content1">

 <p>Hi My name is Robert Baron Austin and I'm the designer of this website and other sites like Spinfish.co.uk bacwhich was my first ever website that I handcoded by myself by using Dreamweaver, Photoshop and Illustrator.</p>

 </div>

 <div class="content2">

 <p>Hi My name is Robert Baron Austin and I'm the designer of this website and other sites like Spinfish.co.uk which was my first ever website that I handcoded by myself by using Dreamweaver, Photoshop and Illustrator.</p>

 </div>

 <div class="content3">

 <p>Hi My name is Robert Baron Austin and I'm the designer of this website and other sites like Spinfish.co.uk which was my first ever website that I handcoded by myself by using Dreamweaver, Photoshop and Illustrator.</p>

 </div>

 <div class="content4">

 <p class="images1"><img class="otherpics" src="../f5770309.jpg" width="150" height="150"></p>
 <p>Hi My name is Robert Baron Austin and I'm the designer of this website and other sites like Spinfish.co.uk which was my first ever website that I handcoded by myself by using Dreamweaver, Photoshop and Illustrator.</p>
 </div>

 <div class="content5">

 <p>Hi My name is Robert Baron Austin and I'm the designer of this website and other sites like Spinfish.co.uk which was my first ever website that I handcoded by myself by using Dreamweaver, Photoshop and Illustrator.</p>

 </div>

 <div class="content6">

 <p><div id="map"></div>

 <form class="form" action="#">
   Theatres: <input type="checkbox" id="theatrebox" onclick="boxclick(this,'theatre')" /> &nbsp;&nbsp;
   Golf Courses: <input type="checkbox" id="golfbox" onclick="boxclick(this,'golf')" /> &nbsp;&nbsp;
   Test: <input type="checkbox" id="testbox" onclick="boxclick(this,'test')" /> &nbsp;&nbsp;
   Tourist Information: <input type="checkbox" id="infobox" onclick="boxclick(this,'info')" /><br />
 </form></p>

<div id="side_bar"></div>

 </div>



 </div>


 <div class="footer">footer</div>

 </div></div></body>
 </html>

这是 JavaScript

//<![CDATA[
  // this variable will collect the html which will eventually be placed in the side_bar 
  var side_bar_html = ""; 

  var gmarkers = [];
  var gicons = [];
  var map = null;

var infowindow = new google.maps.InfoWindow(
 { 
  size: new google.maps.Size(150,50)
  });


  var iconImage = new google.maps.MarkerImage('mapIcons/marker_red.png',
   // This marker is 20 pixels wide by 34 pixels tall.
   new google.maps.Size(20, 34),
   // The origin for this image is 0,0.
   new google.maps.Point(0,0),
   // The anchor for this image is at 9,34.
   new google.maps.Point(9, 34));
  var iconShadow = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png',
   // The shadow image is larger in the horizontal dimension
   // while the position and offset are the same as for the main image.
   new google.maps.Size(37, 34),
   new google.maps.Point(0,0),
   new google.maps.Point(9, 34));
   // Shapes define the clickable region of the icon.
   // The type defines an HTML &lt;area&gt; element 'poly' which
   // traces out a polygon as a series of X,Y points. The final
   // coordinate closes the poly by connecting to the first
   // coordinate.
   var iconShape = {
   coord:   [9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0],
  type: 'poly'
  };

    //Custom marker function
        function createMarker(point) {

    //Create the markers
        return new google.maps.Marker({
        position: point,
        map: map,
        draggable: false

    });

 }

  // A function to create the marker and set up the event window
  function createMarker(latlng,name,html,category) {
  var contentString = html;
  var marker = new google.maps.Marker({
    position: latlng,
    icon: gicons[category],
    shadow: iconShadow,
    map: map,
    title: name,
    zIndex: Math.round(latlng.lat()*-100000)<<5
    });
    // === Store the category and name info as a marker properties ===
    marker.mycategory = category;                                 
    marker.myname = name;
    gmarkers.push(marker);

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString); 
    infowindow.open(map,marker);
    });
 }

  // == shows all markers of a particular category, and ensures the checkbox is checked ==
  function show(category) {
    for (var i=0; i<gmarkers.length; i++) {
      if (gmarkers[i].mycategory == category) {
        gmarkers[i].setVisible(true);
      }
    }
    // == check the checkbox ==
    document.getElementById(category+"box").checked = true;
  }

  // == hides all markers of a particular category, and ensures the checkbox is cleared ==
  function hide(category) {
    for (var i=0; i<gmarkers.length; i++) {
      if (gmarkers[i].mycategory == category) {
        gmarkers[i].setVisible(false);
      }
    }
    // == clear the checkbox ==
    document.getElementById(category+"box").checked = false;
    // == close the info window, in case its open on a marker that we just hid
    infowindow.close();
  }

  // == a checkbox has been clicked ==
  function boxclick(box,category) {
    if (box.checked) {
      show(category);
    } else {
      hide(category);
    }
    // == rebuild the side bar
    makeSidebar();
  }

  function myclick(i) {
    google.maps.event.trigger(gmarkers[i],"click");
  }


  // == rebuilds the sidebar to match the markers currently displayed ==
  function makeSidebar() {
    var html = "";
    for (var i=0; i<gmarkers.length; i++) {
      if (gmarkers[i].getVisible()) {
        html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].myname + '<\/a><br>';
      }
    }
    document.getElementById("side_bar").innerHTML = html;
  }

 function initialize() {
  var myOptions = {
   zoom: 10,
   center: new google.maps.LatLng(53.8363,-3.0377),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map"), myOptions);


  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
    });



  // Read the data
  downloadUrl("categories.xml", function(doc) {
  var xml = xmlParse(doc);
  var markers = xml.documentElement.getElementsByTagName("marker");

    for (var i = 0; i < markers.length; i++) {
      // obtain the attribues of each marker
      var lat = parseFloat(markers[i].getAttribute("lat"));
      var lng = parseFloat(markers[i].getAttribute("lng"));
      var point = new google.maps.LatLng(lat,lng);
      var address = markers[i].getAttribute("address");
      var name = markers[i].getAttribute("name");
      var html = "<b>"+name+"<\/b><p>"+address;
      var category = markers[i].getAttribute("category");
      // create the marker
      var marker = createMarker(point,name,html,category);
    }

    // == show or hide the categories initially ==
    hide("theatre");
    hide("golf");
    hide("info");
    hide("test");
    // == create the initial sidebar ==
    makeSidebar();
  });
 }

 // This Javascript is based on code provided by the
 // Community Church Javascript Team
 // http://www.bisphamchurch.org.uk/   
 // http://econym.org.uk/gmap/
 // from the v2 tutorial page at:
 // http://econym.org.uk/gmap/example_categories.htm
 //]]>

最佳答案

首先，在包含 Google Maps API 时，您必须使用 sensor=true

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

关于javascript - 将地理位置添加到现有的谷歌地图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10762453/

26 4 0
文章推荐： jquery - 如何在保持侧面菜单隐藏的同时滚动 body 上的 "overflow: hidden;"？
文章推荐： Javascript仅在窗口处于焦点时才执行计时器函数？
文章推荐： jquery - 响应式下拉点击/悬停
文章推荐： javascript - 无法使用 DOM 解析 onClick 文本
行者123
个人简介

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

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