Uniapp develops a wechat applet to display the map function, and click it to open Gaode or Tencent map.

When I first came across the map , It's complicated . Think about whether you need to quote Gaode or Baidu map api And so on. .
There's no need to , Use uniapp Own method uni.openLocation that will do .
Don't talk much , Complete code 、 notes 、 And the problems encountered in the development are as follows ：

1、uniapp After packaged into wechat applet — To configure app.json file

// Development process , Need to be in unpackage>>dist>>dev>>mp-weixin>>app.json Add the following configuration to 
"permission": {
    
    "scope.userLocation": {
    
      "desc": " Your location information will be used to show the effect of the applet location interface "
    }
 }
// stay manifest.json Configure... In the source view of ： To configure appid And geographical location 
"mp-weixin": {
     /*  Applet specific relevance  */
		"appid": "", // Need configuration appid
		"setting": {
    
			"urlCheck": false
		},
		"usingComponents": true,
		"permission": {
    
			"scope.userLocation": {
    
				"desc": " Your location information will be used to show the effect of the applet location interface "
			}
		}
	}

2. Page specific code ：

<template>
	<view class="">
		<view class="ditu">
			<map style="width:100%;height:100%;" :latitude="latitude" :longitude="longitude" :scale="scale" :markers="marker" @markertap="toMap()">
			<!-- There is a problem of stepping on the pit 1： @markertap  Is when you click the marked point on the map   Trigger open map . @tap  When you click on the whole map   Trigger open map . -->
			</map>
		</view>
	</view>
</template>

<script> export default {
       data() {
       return {
       latitude: '', // latitude  longitude: '', // longitude  marker: [{
       id: 0, latitude: '', // latitude  longitude: '', // longitude  // title: ' Shandong XX Co., Ltd ', // Mark the roll  alpha: 1, // transparency  }], scale: 14, // Zoom the map  address: '' } }, methods: {
       // Click on the mark on the map , Open the built-in map of your phone  toMap() {
       console.log(' Click on the map ') uni.openLocation({
       latitude: Number(this.latitude), // Latitude to go to - Address  longitude: Number(this.longitude), // Longitude to go - Address  address: this.address, // The specific address to go  // Here is the problem of stepping on the pit 2： //latitude  and  longitude It must be number type . // Therefore, you need to use Number Convert it . }) }, } } </script>
<style scoped> .ditu {
       width: 100%; height: 565rpx; } </style>

3. Development complete ~ As shown in the figure below ：

4. Two questions about stepping on the pit ：

① Click where to trigger the map ？
@markertap Is when you click the marked point on the map Trigger open map .
@tap When you click on the whole map Trigger open map .

②uni.openLocation No response when clicking to open the map ？
Note the data type of longitude and latitude ： Use Number

ending~